В этом задании мы разобьём ленту постов (как в социальной сети) на независимые компоненты.
Социальная лента - это один из самых сложных интерфейсов. Каждый пост содержит множество элементов: автора, контент, кнопки действий, комментарии с возможностью добавления новых. Когда всё это находится в одном компоненте, код становится огромным и запутанным.
В нашей ленте можно выделить несколько уровней компонентов:
Форма создания поста - текстовое поле и кнопка публикации
Пост - отдельная публикация со всеми её элементами
Шапка поста - аватар, имя автора, время
Действия поста - кнопки лайка и комментариев
- список комментариев и форма добавления
Секция комментариев
Комментарий - отдельный комментарий
Форма комментария - поле ввода и кнопка отправки
Управление состоянием для множества постов - сложная задача. У каждого поста есть своё состояние (лайкнут или нет, показаны ли комментарии), но всё это хранится в одном массиве в родительском компоненте. Дочерние компоненты получают данные и функции через props.
Объект состояния для комментариев - newComment хранит текст комментария для каждого поста в виде объекта { postId: text }. Это позволяет одновременно писать комментарии к разным постам.
Задание
Необходимо разбить монолитную социальную ленту на независимые компоненты.
Создайте компонент CreatePostForm, который принимает value (текст поста), onChange (обработчик изменения) и onSubmit (функция публикации).
Создайте компонент PostHeader, который принимает author (объект с именем и аватаром) и time (время публикации), и отображает шапку поста.
Создайте компонент PostActions, который принимает likes (количество лайков), liked (лайкнут ли пост), commentsCount (количество комментариев), onLike (функция лайка) и onToggleComments (функция показа/скрытия комментариев).
Создайте компонент Comment, который принимает comment (объект комментария) и отображает его.
Создайте компонент AddCommentForm, который принимает value (текст комментария), onChange (обработчик изменения) и onSubmit (функция отправки).
Создайте компонент CommentsSection, который принимает comments (массив комментариев), commentValue (текст нового комментария) и функции для управления комментариями. Создайте компонент Post, который принимает post (объект поста), commentValue, и функции onLike, onToggleComments, onCommentChange, onAddComment. Он использует все предыдущие компоненты для отображения одного поста.
В компоненте App оставьте состояние (posts, newPost, newComment) и все обработчики, используйте CreatePostForm и список Post.
