Написал тестовое на react, кто из сильных поможет с оценой?

Question

[DMITRY Chernenkiy]

Народ кто помочь может, написал маленькое простое тестовое задание на react-redux . Но работодатель отморозился, даже колбек, по нему, на предмет ошибок не прислал. Подскажите код совсем хреново написан ?Претендую на вакансию джуна+
Сам проект Репозиторий проекта
собраный билд

Приложение умеет создавать записи, помечать их как важные, показывать только важные, делать поиск по записям

Comments

[Михаил]

sirch-panel.jsx
serchChange
SirchInput
case "DLT":
case "CHNG":

вы приняты

[WbICHA]

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

[Кира]

Странная структура проекта, папка component (почему не componentS?), а в ней и редюсер и экшены.
В приложении можно добавить пустую айтему.
Внешне оно немного стремное :)

[Василий Банников]

А ещё даже дефолтный README от CRA не переписан.
reducer непонятно зачем JSX, а не просто JS

Тестовое написано не на Junior+. Это максимум уровень Trainee/Junior без опыта работы.

[DMITRY Chernenkiy]

Михаил, спасибо, это я действительно прозевал

[DMITRY Chernenkiy]

WbICHA, подскажите пожалуйста, а в каком месте он вам показался наиболее проседающим? или в общем стиль кода слабоват?

[ReactLover]

DMITRY Chernenkiy, Он слабоват во всех местах. Начиная от именования, подходов реализации и до использования инструментов. Какие требования были в тестовом?

[DMITRY Chernenkiy]

ReactLover, особо не было, только такое,

Приложение умеет создавать записи, помечать их как важные, показывать только важные, делать поиск по записям

Answer 1

[Александр]

1. React.StrictMode отсутствует.
2. Не понятно, для чего Вы в App подписываетесь на изменения store и обновляете состояние им.
3. Все файлы компонентов названы с маленькой буквы, а лучше бы с заглавной.
4. Все стили описаны в файле src/style.css, а надо бы для каждого компонента их разделять. Я бы разбивал на модули.
5. Расширение .jsx используйте только для компонентов. У Вас есть файлы с логикой, которые имеют такое расширение.
6. Чтобы не передавать Redux-хранилище по цепочке в другие компоненты используется функция connect.
7. Значение о том, какой тип сущностей и фильтр по ним (important или не important; filter), лучше вынести в Redux, или композицией в родительский компонент.
8. В sirch-panel.jsx (а еще лучше бы SearchPanel.jsx) лучше хранить состоянием только значение поля для новой сущности.
9. События Redux - считаю, что лучше константы вынести в отдельный файл (action types), а сами события оформить без store.dispatch. Диспатчинг событий можно перенести в тот же connect (можно даже bindActionCreators использовать).
10. Reducer - даже если событие не данного reducer'а, то Вы возвращаете новое состояния. Лучше перенести код по модификации состояния в сам switch. Для удаления можете воспользоваться методом массива .filter. Для пометки important можете воспользоваться методом массива .map. И вообще его вынести в отдельную директорию, т. к. он не является компонентом (как и action creators).
11. Чтобы не писать такие конструкции:

className={important ? "important list-item" : "list-item"}

можете воспользоваться classnames или clsx.
12. Почитайте про useCallback. Некоторые обработчики различных события можно улучшить при помощи данного хука.
13. Вы используете разные способы экспорта компонентов: default export и named export. Наверное, чтобы в дальнейшем не путаться, следует использовать какой-то один вариант.
14. Нет сохранения данных между сессиями. Воспользуйтесь для начала localStorage.
15. Если будете использовать сохранение данных, то у Вас появится проблема с ID сущностей. id: idCounter можно будет заменить на Date.now().

Comments

[DMITRY Chernenkiy]

Только не совсем понял эту фразу

Reducer - даже если событие не данного reducer'а, то Вы возвращаете новое состояния. Лучше перенести код по модификации состояния в сам switch.

[Александр]

DMITRY Chernenkiy, у Вас в reducer'е есть переменная newState в которую копируете прошлое состояние. Это лучше делать непосредственно в case, а в default возвращать текущее состояние без копирования.

[DMITRY Chernenkiy]

Да, это осознал, спасибо. И еще не понятно замечание:

В sirch-panel.jsx (а еще лучше бы SearchPanel.jsx) лучше хранить состоянием только значение поля для новой сущности.

В sirch-panel в стейте ведь хранится только список фильтров и занимается он только строкой поиска и кнопками important и allcase. А новая сущность создается только в add-block

[Александр]

DMITRY Chernenkiy, Проморгал момент этот значит. Но в любом случае, в панели поиска Вы по цепочке тянете Redux-хранилище и объект состояния компонента в другой компонент - List. Наверное List лучше рендерить в App.

[DMITRY Chernenkiy]

Александр, Вот это понятнее, еще раз огромное спасибо