Тестовое задание для соискателя на должность frontend-разработчика от компании Kode (лежит в открытом доступе)
- Create React App
- React Router
- Axios (но я предпочёл Fetch API)
- Добавил TypeScript
Когда пользователь открывает сайт необходимо загрузить актуальный список работников компании.
При входе в приложение необходимо отобразить экран 2.0.0. Изначально он должен быть в состоянии загрузки, экран 1.0.0. Если при загрузке произошла ошибка, отсутствует интернет соединение или API вернул ошибку, необходимо отобразить экран "Критическая ошибка". В случае успеха, необходимо отобразить Top App Bar и список людей.
Компонент находится в верху экрана и представляет собой поле для поиска с иконкой "Поиск", кнопкой "Сортировка" и панель вкладок. При переключении между вкладками на главном экране список работников фильтруется и отображаются только люди работающие в выбранном департаменте, либо все, если выбрана вкладка "Все".
Соответствия названия вкладок с полем "department" из запроса API:
- android - Android
- ios - iOS
- design - Дизайн
- management - Менеджмент
- qa - QA
- back_office - Бэк-офис
- frontend - Frontend
- hr - HR
- pr - PR
- backend - Backend
- support - Техподдержка
- analytics - Аналитика
При нажатии на кнопку "Фильтр" открывается Bottom Sheet с вариантами сортировки списка работников. Есть два варианта сортировки "По алфавиту" (по умолчанию), "По дню рождения". При переключении варианта сортировки, панель должна закрываться, а список на главной странице должен перезагружаться.
Когда пользователь вводит текст в поисковое поле, необходимо фильтровать список на главном экране и отображать только работников соответствующих параметрам поиска. Поиск может осуществляться по имени, фамилии или никнейму, состоящему из двух символов.
В случае отсутствия результатов поиска необходимо отобразить информацию о том, что ничего не было найдено. Экран "2.0.0Г Люди (Ошибка поиска)".
Вверху главной страницы должна быть расположена верхняя панель приложения, на которой должны находиться: поле для поиска, панель вкладок для группировки загруженного списка пользователей, список работников. Список должен обновляться каждый раз, когда меняются параметры поиска, обновляется вариант сортировки или пользователь переключается вкладки департаментов.
Пользователь имеет возможность скролить список работников.
В режиме сортировки "По алфавиту" для каждого работника отображается его фотография, имя, никнейм и департамент.
В режиме сортировки "По дню рождения", список отображается от ближайшей даты для рождения вниз. Если день рождения следующего работника будет только в следующем году, то необходимо отобразить блок с годом, экран 2.0.1А.
Когда пользователь кликнет на человека, необходимо открыть экран информации о человеке (экран "детали").
Сверху экрана деталей должна отображаться кнопка назад для навигации на главный экран. Также вернуться на главный экран можно, если нажать системную кнопку назад.
В шапке экрана должна отображаться аватарка пользователя, имя, никнейм и название департамента.
Ниже находится дата рождения и номер телефона. При нажатии на номер телефона необходимо открыть приложение для звонка по номеру.
Дополнительное задание необязательно для выполнения. Если вы не успеваете - лучше сделать хорошо основную часть. Но если время осталось...
Необходимо реализовать real-time отслеживание состояния сети устройства.
При отключении устройства от сети, верхняя панель приложения должна измениться на сообщение об ошибке сети, экран 2.0.0.А — Люди (Ошибка). При этом должна остаться возможность пользоваться приложением в offline, теми данными, которые успели загрузиться до отключения сети.
При восстановлении доступа к сети:
- Верхняя панель приложения должна измениться на сообщение о загрузке, экран 2.0.0.А — Люди (Загрузка).
- Список на активной вкладке должен обновиться.