Github client
Деплой
О процессе разработки
Использованные технологи:
1. React, Mobx, Axios
2. Typescript ❤️, SCSS, Webpack, Storybook...
Реализованные фичи
1. Поиск репозиториев
2. Получение данных по выбранному репо
3. Использование квери параметров
4. Пагинация и сортировки
5. Добавлена темная тема и переключение
6. Очередь сообщений
7. Кеширование запросов API
Сложности на пути
1. Ограничения по запросам от API 😑
2. Добавление пагинации
3. Двойной рендеринг от React.StrictMode 🤔
4. Axios + Cache Interceptor + Abort = 🙀
5. Внедрение тем с помощью SCSS
6. Поддержка Jest и Storybook при миграции с CRA
Ограничения по запросам от API 😑
60 в час на 1 IP адрес 😿
Решение:
1. добавление кеширования (Etag, If-modified)
2. 5000 в час на один аккаунт с токеном
Добавление пагинации
/orgs/{orgName}/repos
Решение:
/search/repositories?q=org:{orgName}
export const useLocalStore = <T extends ILocalStore>(
create: () => T
): T => {
const ref = React.useRef<null | T>(null);
ref.current ??= create();
React.useEffect(() => {
store.init();
return () => {
store.destroy();
};
}, []);
return ref.current;
};# PRESENTING CODE
Двойной рендеринг от React.StrictMode 🤔
export const useLocalStore = <T extends ILocalStore>(
create: () => T
): T => {
const ref = React.useRef<null | T>(null);
ref.current ??= create();
React.useEffect(() => {
ref.current ??= create();
ref.current.init();
return () => {
ref.current?.destroy();
ref.current = null;
};
}, [create]);
return ref.current;
};# PRESENTING CODE
Двойной рендеринг от React.StrictMode 🙂
Axios + Cache Interceptor + Abort = 🙀
Проблема в зависании axios
Решение:
1. дебаг - источник проблемы не найден 🙈
2. добавлю ка в запрос задержку 🤔
3. ментора не проведешь 😹
4. еще дебаг - такс проблема в интерцепторе
5. stackoverflow + github issues
6. workaround - заработало 😌
Внедрение тем с помощью SCSS
$themes: (
light: (
text: #000,
background: #fff,
),
dark: (
text: #ccc,
background: #222,
),
);
@mixin themify($arg: theme) {
@each $theme, $map in $themes {
:global(.theme-#{$theme}) & {
$theme-map: () !global;
@each $key, $submap in $map {
$value: map-get(map-get($themes, $theme), '#{$key}');
$theme-map: map-merge(
$theme-map,
(
$key: $value,
)
) !global;
}
@content;
$theme-map: null !global;
}
}
}
@function getValue($key) {
@return map-get($theme-map, $key);
}
# PRESENTING CODE
Впечатления от курса
- Понравились ревью от ментора 🔥
- Работа с Typescript ❤️
- Познакомился со Storybook
- Хорошая подача практик и паттернов работы с React и Mobx 👾
- Хотелось бы заменить значительную часть миксинов SCSS на работу с CSS переменными (R.I.P. 🪦 IE11)
Github Client
By qpundb