sarchieedu / react-20231109

2023-11-09

Дз1

1. Создать репозиторий(Публичный) на github
2. Создать ветку с названием - lecture-1/hw
3. Создать проект(используем vite - https://vitejs.dev/guide/#scaffolding-your-first-vite-project)
4. Очистить проект
5. Скопировать себе в проект мокковые данные(materials/mock.js в этом проекте)
6. Отобразить все рестораны из моковых данных. Отображаем рестораны друг за другом. Логику отрисовку массивов не используем, отображаем каждый ресторан отдельно. Цель отработать работу с элементами.
   1. Название ресторана
   2. Заголовок - Меню (h3)
   3. Список названий блюд (используем тег ul и li)
   4. Заголовок - Отзывы (h3)
   5. Список текстов отзывов (используем тег ul и li)
   6. (Доп) сделать все это на React.createElement.
7. Сделать коммит
8. Запушить
9. Открыть ПР из ветки с дз в ветку main
10. Отправить ссылку на ПР в ветку дз 1 в Discord

Дз2

1. Реализовать отрисовку по макету. макет в ветке. Необходимо правильно разбить на компоненты. Пока без интерактивности, просто статика. моки используем из первого дз.

Дз3

1. Реализовать выбор активного состояния:
   1. Дефолтно ресторан не выбран, отображаем только табы(кнопки с названиями всех ресторанов)
   2. По клику на кнопку с названием отображаем ресторан(название, меню, отзывы и тд)
   3. По клику на кнопку с названием другого отображаем другой ресторан.
   4. Одновременно отображаем только 1 активный ресторан.(список ресторанов больше не рисуем)
2. У блюд в меню ресторана необходимо реализовать счетчик
   1. У каждого блюда должны быть две кнопки - и +.
   2. Между кнопками - и + рисуем число. Дефолтно 0.
   3. По клику на + увеличиваем на единицу, по клику на - уменьшаем
   4. Минимальное значение 0, максимальное 5
   5. Если при переключении ресторанов у блюд остаются значения прошлого ресторана не переживайте, пока это ок.

Дз4

1. Реализовать форму нового отзыва ресторана:
   1. Форма состоит из 3 контролов- имя, текст, рейтинг.
   2. Имя - просто инпут
   3. Текст - просто инпут
   4. Рейтинг - контрол как у блюда(-5+). Важно переиспользовать контрол, а не делать новый. Основные отличия: шаг 0.5, минимальное значение 1, максимальное 5.
   5. Форма хранит состояние(см пример с лекции)
   6. Отображаем в ресторане, после отзывов.

Дз5

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

Дз6

1. Если нет шапки и футера добавляем их
2. В шапку добавляем две кнопки - Заказ и Смена темы
3. В футер добавляем одну кнопку - контакты
4. По клику на кнопку "Смена темы" кнопки в области между хедером и футером меняют оформление, кнопки в хедере и футере остаются без изменений.

ДЗ7

1. Установить библиотеки @reduxjs/toolkit, react-redux;
2. Скопировать в свой проект файл normalized-mock (в этом проекте Materials/normalized-mock.js)
3. Сконфигурировать стор;
4. Создать модули(как на лекции, только для своих сущностей, на лекции говорил об этом)
5. Описать селекторы модулей
6. Заменить использование старых мокковых данных на редакс, аналогично тому как мы делали на лекции.

Дз8

1. Скопировать simple_api (в этом проекте Materials/normalized-mock.js)
2. Заменить мокки на загрузку данных:
   1. Рестораны грузить один раз
   2. Блюда и отзывы грузить для каждого ресторана(При первом открытии ресторана)
   3. Пользователей грузим один раз
3. Данны стараемся грузить максимально близко к месту использования

Дз9

1. Переписать получение и использование данных на RTKQuery(как на лекции)
2. Реализовать сохранение нового отзыва(отправляем Post запросом объект с полями: userId(берем любой из загруженных пользователей), text, rating)
3. ДОП ЗАДАНИЕ: в компоненте отзыва(просто отображает) реализуем возможность включить режим редактирования. В режиме редактирования можно поменять текст и рейтинг и по клику на кнопку сохранить отправляем PATCH запрос.

ВАЖНО: при использовании мутаций инвалидируйте теги, чтобы отображать только актуальные данные

Дз10

1. Сделать роут ресторанов - /restaurants. Отображаем табы
2. Сделать вложенный роут ресторана - /restaurants/:restaurantId. Название ресторана и табы(меню и отзывы, по клику открываются вложенные роуты)
3. Сделать вложенный в роут ресторана роут меню - /restaurants/:restaurantId/menu. Открывается при открытии ресторана.
4. Сделать вложенный в роут ресторана роут отзывов - /restaurants/:restaurantId/reviews

Дз11

1. Сделать домашнее приложение(то, которое делали в дз) на некст.(в новом репозитории).