# Неделя #3 Погружаемся в Redux

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

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

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

# Выполнить домашнее задание #5 (Localstorage hoc)

Переключитесь в ветку homework-5-localstorage-hoc
Ознакомиться с примером работы.
В данном домашнем задании вам необходимо создать hoc компонент, который будет насыщать обернутый компонент 2-мя пропсами. SavedData возвращает запись из localstorage. SaveData сохраняет данные.
Компонент ToDo не должен хранить в своем стейте ничего, кроме значения инпута, сами данные по ToDo задачам должны всегда хранится в localstorage с помощью методов из hoc.

# Выполнить домашнее задание #6 (Mail client)

Задача — написать почтовый клиент используя react-router-dom. Все данные находятся в контексте.

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

Переключитесь в ветку homework-6-mail-client
Ознакомиться с примером работы. Почта: test@test.ru / Пароль: 321
Изучите cypress/integration/homework.spec.js чтобы понять какой функционал должен быть реализован.
Начните работу с RootRouter.js. В нем необходимо определить базовые роуты.
Реализуйте приватный роут. Он должен находиться в файле PrivateRoute.js.
Реализуйте лейаут и навигацию в приложении в файле AppRouter.js.
Реализуйте компоненты Home (в нём должно показываться приветствие), InboxList (показывает список входящих писем), InboxMail (показывает выбранное входящее письмо), OutboxList (показывает список исходящих), OutboxMail (показывает выбранное исходящее письмо).
Работа со стилями.
Кроме того, для работы со стилями в данной работе используется новый подход — css-modules. Теперь он встроен в create-react-app.
Как происходит работа? Обратите внимание на название css файлов. Если в названии присутствует слово .module, это значит webpack будет обрабатывать такие файлы по особенному.
При импорте css-modules модулей в js, файл становится объектом, ключами которого являются названия классов из css файла, а значениями автоматически сгенерированные с помощью webpacck имена. Webpack следит за коллизиями имен, теперь в каждом модуле можно определить класс container или button, а webpack проследит за тем, чтобы эти имена в реальном дом дереве не пересекались.
Для работы с несколькими классами используется библиотека classnames. В самом простом исполнении она объединяет все строки-классы, переданные аргументами и возвращает конкатенированную строку классов для тегов. Более подробно мы ее изучим на соответствующем занятии про стили в react.

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

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

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

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

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

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

# 🗓 Вторник

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

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

# 🗓 Среда

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

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

# 🗓 Четверг

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

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

Клонируем домашнее задание 6, осваиваемся с исходниками.

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

# 🗓 Пятница

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

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

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

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