Разбор тестового задания #2: react, redux, react-router, async

Цель: выяснить уровень знаний 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 (включительно)