Получить заготовку социальной сети.

Напишем хук useFlag, который позволит создавать просто api интерфейс для работы с флагами. В частности такой хук будет удобным для управления ранее созданного Collapse-Alert-AlertTitle (10 мин)

Настроим окружение так, чтобы указывать зависимости не через относительные пути, а через абсолютные пути через корень проекта. Сверстаем страницу для авторизации. (10 мин)

Сессия через куки позволит понять фронту: авторизован пользователь или нет. Поработаем с проверкой сессии и настроим соответствующий slice в redux. (11 мин)

SIgnin и Signout для сайта - запрограммируем форму для авторизации и добавим в MainMenu кнопку Logout. Урок в котором воспользуемся sessionSlice из redux. (14 мин)

Теперь мы умеем авторизоваться, выходить и проверять актуальность сессии. А значит, что нужно описать view-сценарии для роутов сайта. (12 мин)

Сверстаем Profile Header для Profile Page, в котором отобразим аватарку пользователя с маркером онлайн, имя, фамилию и статус. А так же добавим ActionsBar для управления relationship авторизованного пользователя с другими людьми. (18 мин)

Верстка полезна когда отображает актуальную информацию. Для этого мы запросим у сервера (backend) данные пользователя и отношение авторизованного пользователя к этому пользователю. А дальше дело техники и useMemo. (11 мин)

На проекте у нас не так много видов ресурсов и за этот урок мы реализуем сразу 2 api для работы с friendshipRequest и friendship. Это будет достаточно, чтобы сделать ProfileActionsBar интерактивным, правда пока с помощью перезагрузки страницы. (11 мин)

В этом уроке поработаем с кешом relationshipApi. После того как мы запросим дружбу или отменим запрос на дружбу нужно будет сбросить кеш relationshipApi и запросить новую актуальную информацию. Избавимся от перезагрузки страницы и дополнительно потренируемся управлять кешом на usersApi. (10 мин)

Публичная страница пользователя состоит из основных двух вещей: личной информации и постов. В этом уроке мы сверстаем форму для отправки постов и их отображения. Так же поработаем с выпадающим меню для управления постами. (15 мин)

Для запросов, создание, удаление и редактирования постов требуется соответствующее API. В этом уроке создадим менеджера для работы с ресурсом Post. Swagger нам поможет. (10 мин)

Запрограммируем PostForm для создания новых постов. В этом уроке подружим верстку из 18 урока и api из 19 урока. Так же запросим посты. Выводить мы их конечно же пока не будет, но убедимся в том, что при создании постов их возможно запросить. (14 мин)

Запрограммируем компоненты Post для отображения данных поста. Продумаем поведение компонента в разных сценариях: загрузки данных и отображения. Добавим ссылки на автора и добавим вспомогательное меню для управления постом. (11 мин)

Отображения постав сделали, теперь сделаем 2 базовые операции над постом. Удаление и лайк поста. В целом это оказывает не сложным из-за того, что мы заранее продумали postsApi для Redux. (10 мин)

Еще одна базовая функция работы с постом: редактирование поста. Это сложнее, потому что теперь каждый компонент поста должен иметь режим редактирования, дополнительную верстку в режиме редактирования и логику отправки новых данных на хост. Ну и конечно визуальная подсказка выгрузки данных. (8 мин)

Большой и сложный компонент Post сложно читать, а не то, чтобы поддерживать. По этому, по все законам жанра будет компонент разбивать на маленькие и глупые. (12 мин)

Перезагрузка всех постов клиента при каждом изменение состояния ресурса: надежный, но затратный вариант. Общение с сервером надо бы минимизировать, так как трафик для клиента может быть очень дорогим. По этому в этом уроке мы несколько модифицируем реакцию redux на изменение данных на хосте и вместо перезагрузки всех постов мутируем уже имеющийся хеш. (8 мин)

Вернем MainMenu на страницу и обработаем сценарий короткой ширины приложения. Для этого запрограммируем бургер с выдвижным меню и через стили установим очередность видимости бургера и колонки меню. (14 мин)

Начнем верстать страницу с настройками аккаунта. Добавил табы на странице Settings и привяжем навигацию по табам к навигации url. Сверстаем NameOption (14 мин)

Сверстаем оставшиеся пункты меню. Поработаем с type='file' для скрытого input, но завязанного на Button из mui. Поработаем с ref для работы с неуправляемым компонентом. (15 мин)

Добавим в redux loadingAvatar endpoint, и запрограммируем все разделы страницы Settings для управления данными пользователя. Урок получился длинным из-за нескольких вставок с развернутым философским рассуждением о глупых и умных компонентах. (24 мин)

Сведем список пользователь со страницы Users в компонент UsersList и воспользуемся этим глупым компонентом на странице FriendsPage для отображения групп пользователей: друзья, заявки к, заявки от. (10 мин)

Последняя функциональная часть социальной сети: переписка. В этом уроке сверстаем страницу ChatsPage со списком всех активных чатов. Продумаем прогресс загрузки и визуальные подсказки переписки. Добавим новую схему в окружения TypeScript. (14 мин)

В этом уроке изменим подход к глобальной верстке социальной сети. До сих пор мы верстали стихийно, по потребности в функционале. Но пришло время продумать общую архитектуру размещения элементов в социальной сети. В частности этого требует страница ChatPage, для которой критично чтобы переписка занимала всю высоту скрина. (19 мин)

Чату нужна форма создания новых сообщений. Да не простая, а с автоматической ловлей фокуса, обработкой Enter и кнопки отправить в верстке. Этой версткой и программированием мы и займемся в этом уроке. (12 мин)

Вывод сообщений - сложнее чем кажется. Нужно учесть, что информация по каждому сообщению включает в себя аватарку, ФИО, дату, сообщение, ссылки, очередность, скролл... В общем в этом уроке мы сделаем верстку сообщения и запрограммируем на самостоятельную актуализацию. (16 мин)

Подключим библиотеку Socket.io для общения с сервером по открытому каналу websocket. Сделаем SingleTon для работы с socket в разных частях redux и типизируем его. Начнем с помощью socket отправлять сообщения чата. (16 мин)

Перепишем получение сообщений чата на Socket, больше типизируем Socket. А так же начнем отмечать прочитанные сообщения, изменять состояние сообщений на back и сообщать об этом изменение нашего друга по переписке. (12 мин)

В этом уроке доработает страницу ChatsPage чтобы она отображала все активные переписки. Немного перепишем интерфейс и поведение ChatItem чтобы компонент мог запрашивать данные по автору и получателю сообщения. (19 мин)

Добавим в дженерик сокета события работы с флагом непрочитанных сообщений. Когда у авторизованного пользователя есть или появляться не прочитанное сообщение - покажем это бейджем на бургере и в пункте навигационного меню. Пофиксим несколько багов. (12 мин)

Опишем для сокета типы событий, работающие с отслеживанием массива пользователей онлайн. Это поможет доработать бейджи аватарок. После этого урока только у пользователей онлайн будет активен бейджик. (11 мин)

Отслеживание изменений постов, стен и профилей можно и через socket соединение. Чем мы и займемся в этом уроке. В частности добавим типы в socket и перепишем usersApi на использование socket. (15 мин)

Чату положено прокручиваться, когда приходят новые сообщения, а дня этого нужно знать высоту чата. Высоту чата будет исследовать через requestAnimationFrame, потому что нет в JS события для отслеживания изменения высоты. Пару хуков и готово. (15 мин)

Проект готов. Но всегда можно что-то сделать лучше. В этом уроке разберем что именно можно было сделать лучше. Посмотрим на интерфейсы, memo и в каких ситуациях можно отказаться от useCallback и useMemo. (23 мин)