MVP социальной сети для обмена фотографиями
Много много часов
YYYY часов
Сhecklist @TODO
index.js
-
// @@TODO: реализовать получение постов юзера из API ГОТОВО
-
// @TODO: реализовать добавление поста в API ГОТОВО
-
// @TODO: реализовать страницу с фотографиями отдельного пользвателя ГОТОВО
add-post-page-component.js 4) // @TODO: Реализовать страницу добавления поста ГОТОВО
posts-page-component.js 5) // @TODO: реализовать рендер постов из api - ГОТОВО
- @TODO: чтобы отформатировать дату создания поста в виде "19 минут назад" можно использовать https://date-fns.org/v2.29.3/docs/formatDistanceToNow ГОТОВО
Анализ архитектуры работы и последовательности действий
Структура проекта Project/ |- api.js - работа с сервером (запросы GET, POST, загрузка файлов). |- favicon.ico |- helpers.js - вспомогательные функции (работа с LocalStorage для сохранения данных пользователя) |- index.html - оболочка |- index.js - управление рендером и навигацией @TODO #1-3 |- README.md |- routes.js - маршрутизатор |- styles.css |- ui-kit.css - стили кнопок инпутов и шрифтов |- assets/ | |- fonts/ | | |- stratosskyengweb-medium.woff2 | | |- stratosskyengweb-regular.woff2 | |- images/ | |- like-active.svg | |- like-not-active.svg |── components/ |- add-post-page-component.js - создание нового поста @TODO #4 |- auth-page-component.js - вход и регистрация |- header-component.js - шапка (навигация, логин, кнопки входа и выхода) |- loading-page-component.js - спинер загрузки данных с сервера |- posts-page-component.js - главная страница, рендер постов @TODO #5 и 6 |- upload-image-component.js - загрузка фоток
КАК ЭТО РАБОТАЕТ
- index.html запускает index.js.
- он в свою очередь определяет, на какой странице мы находимся (переменная page). Это либо:
- AUTH_PAGE - страница авторизации.
- ADD_POSTS_PAGE - добавление поста,
- POSTS_PAGE, основная страница ну или
- USER_POSTS_PAGE - профиль пользователя.
- Если мы на POSTS_PAGE или USER_POSTS_PAGE то нужны данные пользователя или сами посты, тогда вызывается функция из api.js. Пока мы ее ждем запускается LOADING_PAGE - спинер
- Когда мы их получили, index.js вызывает нужный нам component/
- AUTH_PAGE - renderAuthPageComponent
- ADD_POSTS_PAGE - renderAddPostPageComponent @TODO #2
- POSTS_PAGE - renderPostsPageComponent
- USER_POSTS_PAGE - здесь заглушка @TODO #1 и 3
- И он уже генерирует HTML-строку и вставляет её в appEl.innerHTML внутри оболочки index.html.
ИТАК ПЛАН РАБОТЫ
- Пока лента статична я не увижу динамику Оживить ленту в posts-page-component.js @TODO: реализовать рендер постов из api
Удаляем статичный HTML сохранив шаблон post. Добавляем map для связи с массивом posts который приходит из index.js и превращаем массив в строку HTML.
- Профиль пользователя: index.js
- @TODO: реализовать получение постов юзера из API
- @TODO: реализовать страницу с фотографиями отдельного пользвателя
Добявляем в api.js функцию getUserPosts для получения постов от конкретного пользователя и отправляем ее в index.js
Меняем логику получения постов для USER_POSTS_PAGE
- Интерфейс создания поста: add-post-page-component.js @TODO: Реализовать страницу добавления поста
- Добавляем разметку страницы добавления поста
- Добовляем шапку
- И форму выбора фото с валидацией
- И О Чудо активировались страницы входа и регистрации
- Теперь публикация. Возвращаемся в index.js - @TODO: реализовать добавление поста в API
В api добавляем функцию создания поста addPost В index добавляем импорт из нее и вызываем функцию в ADD_POSTS_PAGE
- И в конце когда все будет работать мы можем внести правку в posts-page-component.js @TODO: чтобы отформатировать дату создания поста в виде "19 минут назад" можно использовать https://date-fns.org/v2.29.3/docs/formatDistanceToNow
Подключил библиотеки для локолизации и форматирования даты публикации
ФИНАЛ Доп задание - Лайки Лайки можно ставить и удалять api добавим функции POST и DELETE
Импортируем функции в posts-page-component Добовляем обработчик кликов если не авторизован то ошибка в алерт
ГОТОВО