Разбор react junior задачи на typescript

В данном code-review я проверил TypeScript решения junior задачи, а так же решение с использование React.Context написанное на JavaScript

Заметка: tslint устаревает, возвращаемся к eslint и добавляем typescript настройки.

Евгений Казанцев

(Решение на JS + Context для авторизации)

Commit

Минусы

Если пользователь уже залогинился и мы обновляем страницу браузера, то можно заметить как UI сначала нам показывает дефолтный аватар, а затем уже аватар пользователя. Можно использовать useLayoutEffect хук, вместо useEffect здесь. Здесь сразу же вопрос: зачем подписка на updateUserProfile функцию?

Вероятно, анимации наложили отпечаток на количество перерисовок (render) компонентов: 3 раза если заходим в новость, 4 раза если возвращаемся на страницу Home. Посмотреть, можно ли уменьшить это число.

Находясь на странице логина, если мы наберем в URL адрес news/1 или profile — получим белый экран, без редиректа на логин (или хотя бы надписи, данный раздел недоступен без авторизации + ссылка)

Избыточное изменение стейта (опять перерисовки), если можно сразу проверить user ? … (user же в LS всегда актуальная запись судя по коду).

Плюсы

Автор заморочился. Анимации, дизайн, дополнительный функционал. Почитайте README.

В helpers используется JSDoc

Любопытно

Используется context, для хранения информации об авторизации пользователя

Кастомные хуки, в том числе хук для анимаций — useAnimation

Хук useUsers в который спрятана логика проверки пользователя

Далее идут TypeScript решения

Евгений Подивилов (TS)

Commit

Используется Parcel, redux-actions.

Минусы

Не уверен в правильности следования экшенов в момент логина, сначала мы должны передать системе новые сведения, а потом сделать редирект.

Тяжелые css-селекторы

Можно вынести в отдельную функцию, либо значения в константы (обсуждали на JS разборе)

Нейтрально

Если в tsconfig используем strict: true, то некоторые правила ниже излишне дублировать. Список strict правил (поиском --strict).

Плюсы

Используется namespace в типах экшенов.

Возможные экшены описаны union-типом (через | )

Используется async/await (легче читать асинхронный код)

Использование mappedTypes для типизации стора.

Легко читаемое описание Props для компонента

Использование хуков, которые умеют «в мемоизацию». (подробнее про useCallback в документации)

Образцовая работа. До идеальной работы не хватает componentDidCatch и хотя бы парочки тестов.

Sergej Vlasov (TS)

Commit

Минусы

Один общий редьюсер для авторизации и новостей. Нужно разделить. Так же у новостей нет состояний (загружаются? ошибка?)

У IcheckCredentials юнион тип (это плюс), но у некоторых экшенов тип string, лучше указывать тип уже — только конкретная строка (как это сделано в IcheckCredentials, через typeof)

В компоненте Profile идет проверка авторизации пользователя, но если таких закрытых компонентов будет много, то нам нужен более универсальный способ (намек на PrivateRoute компонент)

Хотелось бы избавиться от Redux.Dispatch<any> типа

Можно порефакторить изменение инпутов:

• использовать единый state (не критично)
• использовать одну функцию для изменения, созданную заранее (чтобы не создавать постоянно анонимные функции)

Запрос новостей из компонента без reducer’a (так же разбирали на JS разборе)

В остальном в работе присутствует типизация, где-то она вынесена аккуратно отдельно. Поддерживаю старания, есть куда прокачиваться далее.

Кузьмин Иван (TS)

Commit

Минусы

Стандартные: кнопка на форме не заблокирована если форма пустая, новости не через reducer проброшены…

Мертвый код (appReducer не используется в приложении)

Плохое название переменной firstTrial, речь же про ошибку в форме авторизации?) С ходу не догадаться.

Почему e.preventDefault не на первом месте в функции?

Плюсы

Симпатичный дизайн (используется material-ui)

Union тип для экшенов по users, в том числе «узкое» значение для типа экшенов, но там же наглая проверка на пользователя) не буду на ней заострять внимание в очередной раз.

Roman Bedritski

Commit

Для типизации стора используется react-hooks-global-state

Для диспатча экшена, так же используется react-hooks-global-state и запись имеет интересный вид. Не могу сказать, что я понял эту запись наверняка

В остальном — аккуратная работа, часть кода взята с прошлых уроков. Кнопка на форме не disabled… я опять об этом?) Нечего комментировать, все уже разбирали.