# Неделя #4 Работаем с сагами. Реализуем заказ такси.

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

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

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

Документация Redux-saga: перейти

Документация для сервера: перейти

Пример того что должно работать: перейти

# Подключите redux-saga

Для подключения саг добавьте следующий код в файл где вы создаёте redux-store.

import {createStore, applyMiddleware} from 'redux';
import createSagaMiddleware from 'redux-saga';

import reducer from './reducers';
import Sagas from './sagas';

const sagaMiddleware = createSagaMiddleware();

const store = createStore(reducer, applyMiddleware(sagaMiddleware));

sagaMiddleware.run(Sagas);

Все сетевые запросы теперь пусть совершаются только внутри саг.

Вам потребуется реализовать авторизацию, получение списка доступных адресов, получение точек маршрута с сервера.

К примеру у вас может получиться пять саг:

  1. registrationSaga - отвечает за регистрацию пользователя.

Выполняет запрос на https://loft-taxi.loftschool.com/register

  1. authorizationSaga - отвечает за логин

Выполняет запрос на https://loft-taxi.loftschool.com/auth

  1. addressListSaga - отвечает за получение списка адресов

Выполняет запрос на https://loft-taxi.loftschool.com/addressList

  1. routeSaga - сага для получения маршрута

Выполняет запрос на https://loft-taxi.loftschool.com/route

  1. paymentSaga - сага для отправки и получения платёжных данных

Выполняет запрос на https://loft-taxi.loftschool.com/card

Если для организации кода связанного с redux вы используете ducks - то саги будет удобно хранить в папках, где уже лежат связанные с ними редьюсеры и экшены.

Напишите тесты для каждой саги.

# Отправляем платёжные данные

На прошлой неделе вы сделали форму для ввода платёжных данных. На этой неделе мы будем отправлять данные на сервер. Платежные данные

Для отправки данных вам нужно будет создать отдельную сагу. К примеру это может быть paymentSaga.

# Выбор точек маршрута

На странице с картой добавьте окно с формой.

Маршрут

Если в профиле данные кредитной карты заполнены - показываем форму выбора начальной и конечной точки.

При вводе адресов в выпадающих списках должна выполняться фильтрация. Список конечных точек не должен содержать выбранную начальную и наоборот.

Если платёжные данные не заполнены - показываем сообщение с просьбой перейти в профиль и ввести данные карты.

# Построение маршрута

Используйте предоставленный сервер для получения данных с сервера. За это должна отвечать отдельная сага.

Документация mapbox: перейти на сайт

Для отображения маршрута на карте можете использовать следующий код:

export const drawRoute = (map, coordinates) => {
  map.flyTo({
    center: coordinates[0],
    zoom: 15
  });

  map.addLayer({
    id: "route",
    type: "line",
    source: {
      type: "geojson",
      data: {
        type: "Feature",
        properties: {},
        geometry: {
          type: "LineString",
          coordinates
        }
      }
    },
    layout: {
      "line-join": "round",
      "line-cap": "round"
    },
    paint: {
      "line-color": "#ffc617",
      "line-width": 8
    }
  });
};

map - экземпляр карты coordinates - список координат с сервера

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

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

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

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

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

Задаем появившиеся вопросы

# 🗓 Вторник

Изучаем методичку "Redux-saga"

Изучаем исходный код "Redux-saga"

Подключаем Redux-saga

# 🗓 Среда

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

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

Изучаем методичку "Redux-saga и работа с сетью"

Изучаем исходный код "II Redux-saga"

Отправляем платежные данные

Задаем появившиеся вопросы

# 🗓 Четверг

Выбираем точки маршрута

Строим маршрут

Подготовьте вопросы к созвону с наставником (тариф "Уютный")

# 🗓 Пятница

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

Изучаем методичку "Работа со стилями в React"

Изучаем исходный код "Работа со стилями в React"

# 🗓 Суббота

Изучаем материалы Workshop

Работаем над ДЗ

Изучаем тестирование Redux-saga

Задаем появившиеся вопросы

# 🗓 Воскресенье

Пишем тесты для Redux-saga

Сдаём домашнее задание на проверку. Отправьте пулл реквест на проверку наставнику.

Дедлайн: 12.00 первого дня пятой недели.

← Неделя #5 Работа с формами →