Цель: выяснить уровень знаний React/Redux/React-Router. Уровень работы с асинхронными запросами. Понимание взаимодействия клиента и сервера.
Это задание является одним из частых тестовых заданий. Обычно его дают для уровня junior, чтобы отсеять поток резюме. Те «джуны», кто присылают задание — автоматически проходят первую оборонительную линию в лице кадрового специалиста.
Для старта можете использовать репозиторий из тестового задания #1 (сайт, vk) или лучше решите первое задание сами.
Всем кто «боится» практики, или думает что у него не получится — читайте предпоследний абзац. Смотрите разбор первого ТЗ, делайте выводы.
Предподготовка
Внешний вид приложения и прочие моменты:
- верхнее / боковое меню с навигацией
- Логин (
/login) - Новости (список новостей, роут
/news) - Профиль (страница с информацией о пользователе,
/profile) - Кнопка «войти/выйти»
- Страница
/profileнедоступна для тех, кто не залогинился.
Бэкэнд
Приложение использует простой «бэк» расположенный на heroku. Свой бэкэнд делать не нужно.
Для проверки доступности бэкэнда, можете перейти по адресу:
https://mysterious-reef-29460.herokuapp.com/api/v1/
Удачный логин + редирект
Форма для входа включает в себя 2 поля: email + пароль.
По нажатию на «логин» (или после нажатия клавиши Enter) уходит POST запрос с введенными данными на бэкэнд.
Адрес и метод для запроса:
Если введены корректные данные: (email = ‘max@test.com’, password = ‘12345’, content-type: application/json), ответ будет:
В случае успеха — пользователя нужно редиректить на страницу профиля, на которой будет нужно получить подробную информацию о пользователе. Об этом ниже в разделе Профиль. Для выполнения этой задачи, рекомендую полученный id сохранять в стор (в какой-то из редьюсеров).
Обратите внимание на название полей (username, password), на их значения (строковые) и на то, что это POST запрос.
Если введены некорректные данные, то нужно уметь обрабатывать ответ с ошибкой:
После получения такого ответа, необходимо очистить из формы поле пароля (email не трогать) и показать красивое сообщение об ошибке: Имя пользователя или пароль введены не верно.
Дополнительно:
- организовать код таким образом, чтобы можно было легко показывать сообщения на различные сообщения об ошибке от сервера.
- сделать обработку возможной сетевой ошибки с текстом: Сервер не доступен
Запрос должен быть выполнен через традиционный redux-подход: то есть мы «диспатчим (вызываем) экшены и сохраняем необходимое в редьюсере».
Профиль
На странице профиля необходимо сделать GET запрос, и получить подробную информацию о пользователе:
В реальном приложении, после user-info мог бы быть любой id, в нашем случае — это id 1, значит запрос должен выглядеть так:
Ответ:
Полученные данные, положить в стор, и отрисовать на странице следующим образом:
Иконки возьмите из google картинок, положите к себе в public директорию. Для «сайта» подойдет иконка глобуса или сито «Без воды» 🙂
Ахтунг!
В требовании к задаче, «дизайнер» захотел, чтобы сайт (web) был первым в списке, а бэкэнд-разработчик ответил, что ему «пофиг и некогда». Поэтому, сайт нужно отрисовать первым своими силами (то есть, как-то обработать входящие данные с MockAPI). Все остальное в любом порядке.
Дополнительно:
- обработать ситуацию, когда пользователь не найден.
Новости
На странице, нужно вывести новости в формате «заголовок» + «текст».
Внизу страницы — «всего новостей ХХ» (зависит от количества новостей, в нашем случае это всегда «2», но вы должны сделать это число не «захардкоженным»)
Если говорить, словами «разработчиков», то API endpoint:
Если словами «новичков» — нужно сделать GET запрос, по адресу выше.
Ответ:
Новости должны храниться в соответствующем редьюсере.
Войти/Выйти
Кнопка просто меняет свое состояние. Если пользователи уже залогинился — «Выйти», если нет — «Войти»
Требования
- Внимание к деталям.
- Для асинхронных запросов использовать redux-thunk, можно ducks или любой другой подход. Использование «саг» для такой задачи не рекомендуется.
- Пока новости / профиль грузятся — показывать прелоадер (использовать редьюсеры и экшены, как того требует redux).
- Пока запрос на логине «в процессе» блокировать повторные запросы (самый легкий способ, это блокировать нажатия кнопки Enter + сделать disabled кнопку отправки формы). Разумеется, чтобы пользователю было понятнее, текст disabled кнопки можно сделать: «Проверяю…» либо прелоадер как на профиле/новостях.
- В форме показывать ошибку + стандартную валидацию email (по типу инпута, либо по регулярному выражению).
- Код разместить на github
- На почту maxpfrontend@gmail.com прислать ссылку на репозиторий + ответ на вопрос: сколько времени вы уже потратили на обучение JS и React. Если хотите — распишите подробнее: где учились, хобби или работа, сколько времени ушло на это задание, а так же все что пожелаете.
Дедлайн
20.05.2018 (включительно)
