ДЗ по созданию чат-приложения на React

homework/README.md

@@ -1,52 +1,30 @@
-[На главную](../README.md)
+# Chat App
+Это приложение на react и redux пользователям отправлять и читать сообщения в общем чате после регистрации
 
-# Домашнее задание
+## Основные компоненты и функции
 
-Для данного домашнего задания вам предстоит создать приложение "Глобальный чат", используя React и Redux-toolkit. Приложение будет поддерживать авторизацию пользователей, а также сохранение состояния между перезагрузками страницы.
+### TopBar
+Шапка в окне чата, показывает имя текущего пользователя, также имеется кнопка для выхода из приложения
 
-## Требования
+### BottomBar
+Поле для ввода сообщения, а также кнопка "Отправить". При вводе большого сообщения поле увеличивается в высоту чтобы дать больше места под текст
 
-* Использовать React и Redux-toolkit для создания приложения.
-* Приложение должно поддерживать авторизацию. Пользователь должен иметь возможность зарегистрироваться и войти в систему.
-* После авторизации пользователи могут проссматривать и отправлять сообщения в общий чат.
-* Все сообщения в общем чате видны всем авторизованным пользователям.
-* Состояние приложения (состояние чата, сообщения и текущий пользователь) должны сохраняться между перезагрузками страницы.
-* Внешний вид пользовательского интерфейса определяется студентами.
-* Сервер для выполнения задания находится в подкаталоге `homework-backend`. Перед началом работы важно разобраться в реализации и работе API веб-сервера, а также убедиться, что сервер запущен.
+### MessagesBox
+Основной компонент чата. В нем обрабатывается и выводится массив сообщений. Функция __orderMessages__ проходит по массиву сообщений и перед кажой группой сообщений от нового автора вставляет новое, с именем автора. После этого в функции __renderMessage__ в зависимости от автора и флага *isAuthor* при отображении сообщения ему присваиваются соответствуюие стили
 
-## Дополнительные баллы
+### VirtualScroller
+Компонент виртуальной прокрутки. Из большого массива сообщений в любой момент отображает только те, которые будут видны, с дополнительной "подушкой" выше и ниже окна (задается параметром _nodePadding_, по умолчанию 12) для более плавного отображения
 
-* Использовать кеширование данных на уровне Redux. Закэшированные данные должны загружаться при инициализации приложения, что снижает время загрузки и количество запросов к серверу.
-* Реализовать компонент "Virtual Scroll" с использованием React-context, который улучшает производительность при большом количестве сообщений в чате.
+### Основной компонент App
+Основной компонент приложения, в нем следует отметить следующие функции: 
+   #### checkReload
+      Функция вызывается через useEffect при первом рендере элемента, и проверяет, сохранены ли в localStorage данные пользователя. Если они там есть, то функция сразу помещает их в store и загружает сообщения с сервера. Таким образом, при перезагрузке страницы пользователь остается в чате и ему нет необходимости перезаходить
+   #### Загрузка сообщений
+      Через useEffect с интервалом в 1500ms, при наличии токена происходит запрос на сервер. Если есть новые сообщения, то они помещаются в store
+   #### register/login
+      Функции практически аналогичны, они включают отображение формы и задают её тип (регистрация и логин соответственно)
+   #### logout
+      Функция очищает store пользователя и токена, а также удаляет эту информацию из localStorage
 
-## Шаги для выполнения
-
-1. Форкните данный репозиторий.
-2. Установите все необходимые зависимости командой `npm install`.
-3. Убедитесь, что сервер, расположенный в директории `homework-backend`, запущен и готов к использованию.
-4. Изучите API и работу веб-сервера, расположенного в директории `homework-backend`.
-5. Создайте основные компоненты и страницы приложения:
-   * Страница регистрации/авторизации
-   * Страница глобального чата
-   * Компонент сообщения и чата
-6. Настройте Redux store и создайте срезы (slices) для управления состояниями:
-   * Глобального чата
-   * Сообщений
-   * Пользователя
-7. Реализуйте функционал:
-   * Регистрация и авторизация
-   * Получение и отправка сообщений в глобальном чате
-8. Реализуйте хранение состояния приложения в LocalStorage или IndexedDB и подгрузку закэшированного состояния при инициализации приложения.
-9. Реализуйте компонент "Virtual Scroll" для эффективного отображения большого количества сообщений.
-10. Протестируйте работоспособность реализованного функционала.
-11. Создайте README файл с подробным описанием проекта и его функционала.
-
-## Сроки сдачи
-
-Выполнение задания должно занять около двух недель.
-
-## Сдача задания
-
-После завершения работы над проектом создайте pull request в этот репозиторий.  Ссылку на pull request необходимо отправить в качестве ДЗ на платформу. После проверки работы вашим ментором, вы получите обратную связь в виде ревью вашего pull request.
-
-Удачи в выполнении задания!
+### Form
+Форма входа/регистрации. Форма закрывается при клике вне её, при регистрации она требует ввести пароль дважды и проверяет, чтобы пароли совпадали