# Неделя #4 II Redux-saga. Тестирование. Работа со стилями

# Подготовка к выполнению задания

1. Изучить все материалы четвертой недели курса в Личном кабинете.

# Что нужно сделать?

# Выполнить домашнее задание #10 (Nasa rover viewer)

Вам потребуется зарегистрироваться на сайте NASA, чтобы получить токен.

Необходимо написать приложение для просмотра фотографий 3 роверов за первые 3 дня.

В этом приложении у вас больше свободы, чем обычно.

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

Порядок работы

1. Получите домашнее задание №10 (react-course -h homework-10-nasa-rover-viewer)
2. Ознакомиться с примером работы.
3. Вы можете подсмотреть структуру компонентов используя React Developer Tools.
4. Изучите, диспатч каких экшенов происходит в примере при помощи Redux Dev Tools.
5. Обратите внимание на вкладку Network в Chrome Developer Tools. Посмотрите, какие выполняются запросы.
6. Напишите редьюсер авторизации.
7. Напишите редьюсер для работы с фотографиями
8. Вам потребуется подключить Redux Saga и написать сагу для загрузки фото.
9. В этом приложении используется material-ui библиотека компонентов. Вы можете посмотреть на пример её использования в файле /src/components/SelectSol/SelectSol.js

# Выполнить домашнее задание #11 Тесты

Общая информация

В этой домашней работе мы попрактикуемся писать тесты.

Что нужно сделать?

В папке /src находятся файлы с компонентами, нужно написать для них тесты.

Не забудьте установить пакеты. Перед началом работы выполните yarn или npm install.

1. Получите домашнее задание №11 (react-course -h homework-11-tests)
2. Допишите тесты
3. Запустите тесты при помощи команды yarn test
4. В каждом конкретном компоненте будет описано, что нужно тестировать
5. Сделайте коммит и пуш изменений
6. Создайте пулл реквест и отправьте его на проверку наставнику

# Выпускной проект. Создать веб-приложение “Loft Taxi”

Вам предстоит самостоятельно написать приложение для заказа такси.

Порядок работы

1. Ознакомиться с примером приложения

Логин: test@test.com Пароль: 123123

1. Перейти по ссылке и приступить к выполнению выпускного проекта

# Работа с сервером

Для получения данных о маршруте и списка доступных адресов - вы можете использовать сервер. Также на сервере реализована простейшая система авторизации с захардкоженными данными.

# Доступные запросы

• /auth - позволяет авторизоваться (test@test.com / 123123)
• /route - возвращает список точек для маршрута
• /addressList - возвращает список доступных адресов

Более подробное описание на странице сервера. Для сервера использован сервис glitch, так что вы можете взять существующий сервис за основу, сделать его ремикс и улучшить на своё усмотрение. Например добавить регистрацию и хранение данных пользователя.

# Работа с картой

Для работы с картой предлагается использовать сервис mapbox. Он предоставляют библиотеку для Javascript, её довольно удобно использовать для отображения карты и маршрутов на ней.

Документация для Jаvascript библиотеки Для работы с картой вам потребуется зарегистрироваться на mapbox и получить токен.

Пример использования карты в приложении

export default class Map extends Component {
  map = null;
  mapContainer = React.createRef();

  componentDidMount() {
    mapboxgl.accessToken = "ВАШ ТОКЕН С mapbox";
    this.map = new mapboxgl.Map({
      container: this.mapContainer.current,
      style: "mapbox://styles/mapbox/streets-v9",
      center: [30.2656504, 59.8029126],
      zoom: 15
    });
  }

  componentWillUnmount() {
    this.map.remove();
  }

  render() {
    return <div ref={this.mapContainer} />;
  }
}

Так же вам потребуются методы map.flyTo и map.addLayer.

# Работа со стилями

Для реализации приложения предлагается использовать библиотеку компонентов. Я рекомендую использовать Material UI. Именно эта библиотека была использована для демо. Помимо неё есть множество других библиотек компонентов:

• semantic-ui
• ant.design
• lihtning design
• grommet
• primer - библиотека компонентов на базе дизайн системы гитхаба.
• purecss
• foundation
• clarity

# Задачи

Необходимо реализовать приложение со следующим функционалом:

Как пользователь:

1. Я могу авторизоваться в приложении
2. При неверном логине или пароле я получу ошибку валидации
3. При попытке перейти на любую страницу кроме /login я буду перенаправлен обратно на страницу /login

Как авторизованный пользователь:

1. Я имею доступ к странице с картой (/map)
2. При незаполненных платёжных данных на странице карты я вижу сообщение о необходимости их заполнить и ссылку на профиль.
3. Я имею доступ к странице профиля (/profile)
4. На странице профиля (/profile) я могу указать данные банковской карты:

• Поля cardName, cardNumber, expDate, cvv обязательны для заполнения
• Поле cardName может содержать только буквы латинского алфавита
• Поле cardNumber может содержать только цифры и должно иметь длину 16 символов
• Поле expDat должно иметь формат даты
• Поле CVV может содержать только цифры. Состоит из 3 символов
• Я получаю оповещение при успешном сохранении данных карты

5. Я могу выйти из аккаунта нажав кнопку "Выйти".

Как авторизованный пользователь с указанными платёжными данными:

1. На странице с картой я могу выбрать адрес отправления и прибытия из списка доступных.
2. При указанных адресах отправления и прибытия я могу нажать на кнопку "Выполнить заказ":

• Карта переместится к точке отправления.
• Будет построен маршрут от адреса отправления к адресу прибытия.
• Я получу сообщение об успешно выполненном заказе.
• Мне будет доступна кнопка выполнения нового заказа.

# Условия выполнения

1. Необходимо реализовать приложение используя библиотеку ReactJS.
2. Для управлением состоянием приложения должен быть использован Redux.
3. Сайд-эффекты могут быть реализованы с помощью Redux Saga либо Redux Thunk, в крайнем случае с помощью middleware.

# Бонусные условия

1. Код редьюсеров покрыт тестами.
2. Сайд эффекты покрыты тестами.
3. Если в компоненте есть логика - она протестирована.

# Как всё успеть?

Данный план является примерным ориентиром. Вы всегда можете работать в удобном для себя темпе.

# 🗓 Понедельник

Изучаем материалы модуля "II Redux-saga".

Клонируем домашнее задание 10 и выполняем его.

Готовим вопросы к данному модулю.

# 🗓 Вторник

Изучаем материалы модуля "Тестирование".

Продолжаем работу над домашним заданием 10.

# 🗓 Среда

Работа над домашним заданием №11.

Готовим вопросы к данному модулю.

# 🗓 Четверг

Сдаём домашнее задание 11 на проверку.

Изучаем материалы модуля "Работа со стилями".

Смотрим пример выпускного проекта.

Готовим вопросы к данному модулю.

# 🗓 Пятница

Работа над выпускным проектом.

Участвовать в практическом вебинаре.