В данном code-review я проверил TypeScript решения junior задачи, а так же решение с использование React.Context написанное на JavaScript
Заметка: tslint устаревает, возвращаемся к eslint и добавляем typescript настройки.
Евгений Казанцев
(Решение на JS + Context для авторизации)
Минусы
Если пользователь уже залогинился и мы обновляем страницу браузера, то можно заметить как UI сначала нам показывает дефолтный аватар, а затем уже аватар пользователя. Можно использовать useLayoutEffect хук, вместо useEffect здесь. Здесь сразу же вопрос: зачем подписка на updateUserProfile
функцию?
Вероятно, анимации наложили отпечаток на количество перерисовок (render) компонентов: 3 раза если заходим в новость, 4 раза если возвращаемся на страницу Home. Посмотреть, можно ли уменьшить это число.
Находясь на странице логина, если мы наберем в URL адрес news/1
или profile
— получим белый экран, без редиректа на логин (или хотя бы надписи, данный раздел недоступен без авторизации + ссылка)
Избыточное изменение стейта (опять перерисовки), если можно сразу проверить user ? … (user же в LS всегда актуальная запись судя по коду).
Плюсы
Автор заморочился. Анимации, дизайн, дополнительный функционал. Почитайте README.
В helpers используется JSDoc
Любопытно
Используется context, для хранения информации об авторизации пользователя
Кастомные хуки, в том числе хук для анимаций — useAnimation
Хук useUsers в который спрятана логика проверки пользователя
Далее идут TypeScript решения
Евгений Подивилов (TS)
Используется Parcel, redux-actions.
Минусы
Не уверен в правильности следования экшенов в момент логина, сначала мы должны передать системе новые сведения, а потом сделать редирект.
Можно вынести в отдельную функцию, либо значения в константы (обсуждали на JS разборе)
Нейтрально
Если в tsconfig используем strict: true
, то некоторые правила ниже излишне дублировать. Список strict правил (поиском --strict
).
Плюсы
Используется namespace в типах экшенов.
Возможные экшены описаны union-типом (через |
)
Используется async/await (легче читать асинхронный код)
Использование mappedTypes для типизации стора.
Легко читаемое описание Props для компонента
Использование хуков, которые умеют «в мемоизацию». (подробнее про useCallback
в документации)
Образцовая работа. До идеальной работы не хватает componentDidCatch
и хотя бы парочки тестов.
Sergej Vlasov (TS)
Минусы
Один общий редьюсер для авторизации и новостей. Нужно разделить. Так же у новостей нет состояний (загружаются? ошибка?)
У IcheckCredentials юнион тип (это плюс), но у некоторых экшенов тип string, лучше указывать тип уже — только конкретная строка (как это сделано в IcheckCredentials
, через typeof
)
В компоненте Profile идет проверка авторизации пользователя, но если таких закрытых компонентов будет много, то нам нужен более универсальный способ (намек на PrivateRoute
компонент)
Хотелось бы избавиться от Redux.Dispatch<any>
типа
Можно порефакторить изменение инпутов:
- использовать единый state (не критично)
- использовать одну функцию для изменения, созданную заранее (чтобы не создавать постоянно анонимные функции)
Запрос новостей из компонента без reducer’a (так же разбирали на JS разборе)
В остальном в работе присутствует типизация, где-то она вынесена аккуратно отдельно. Поддерживаю старания, есть куда прокачиваться далее.
Кузьмин Иван (TS)
Минусы
Стандартные: кнопка на форме не заблокирована если форма пустая, новости не через reducer проброшены…
Мертвый код (appReducer не используется в приложении)
Плохое название переменной firstTrial
, речь же про ошибку в форме авторизации?) С ходу не догадаться.
Почему e.preventDefault не на первом месте в функции?
Плюсы
Симпатичный дизайн (используется material-ui)
Union тип для экшенов по users, в том числе «узкое» значение для типа экшенов, но там же наглая проверка на пользователя) не буду на ней заострять внимание в очередной раз.
Roman Bedritski
Для типизации стора используется react-hooks-global-state
Для диспатча экшена, так же используется react-hooks-global-state и запись имеет интересный вид. Не могу сказать, что я понял эту запись наверняка
В остальном — аккуратная работа, часть кода взята с прошлых уроков. Кнопка на форме не disabled… я опять об этом?) Нечего комментировать, все уже разбирали.