Система комментариев - это интерфейс для публикации комментариев под постами, статьями или видео, как на YouTube, Reddit, в блогах. Пользователи могут оставлять комментарии, лайкать их и отвечать друг другу.
В нашей системе комментариев можно выделить несколько логических частей:
Шапка секции - заголовок с общим количеством комментариев
Список комментариев - контейнер для всех комментариев
Отдельный комментарий - карточка с автором, текстом и действиями
Информация об авторе - имя пользователя и время публикации
Панель действий - кнопки лайка и ответа
Форма добавления - текстовое поле и кнопка отправки
Лайки с переключением состояния - каждый комментарий имеет счётчик лайков и флаг liked. При клике на кнопку лайка счётчик увеличивается или уменьшается на 1, иконка меняется с 🤍 на ❤️.
Функция ответа - кнопка "Ответить" подставляет в поле ввода упоминание автора в формате @Имя, чтобы пользователь мог написать ответ.
Горячие клавиши - форма поддерживает отправку по Ctrl+Enter, это популярный паттерн в мессенджерах и соцсетях.
Блокировка кнопки - кнопка "Отправить" неактивна, пока поле ввода пустое или содержит только пробелы.
Вычисление количества комментариев - счётчик берётся из длины массива comments.length, это не отдельное состояние.
Задание
Необходимо разбить монолитную систему комментариев на независимые компоненты. Выделите шапку секции в компонент, который принимает количество комментариев. Выделите компонент для информации об авторе комментария, который принимает имя пользователя и время. Выделите компонент для панели действий комментария, который принимает данные о лайках (количество и статус) и функции-обработчики для лайка и ответа. Выделите компонент для отдельного комментария, который объединяет автора, текст и панель действий, принимает объект комментария и функции для действий. Выделите список комментариев в контейнерный компонент. Выделите форму добавления комментария в компонент, который принимает текущее значение, функции изменения и отправки, состояние блокировки кнопки. В главном компоненте оставьте управление состоянием массива комментариев и поля ввода, функции для добавления комментария, переключения лайка, подстановки ответа, обработки горячих клавиш и композицию всех компонентов.
functionApp(){const[comments, setComments]=useState([...]);const[newComment, setNewComment]=useState('');consthandleAddComment=()=>{// Добавить комментарий};consthandleLike=(id)=>{// Переключить лайк};consthandleReply=(id)=>{// Подставить @упоминание в поле ввода};consthandleKeyPress=(e)=>{// Обработка Ctrl+Enter};return(<divclassName="post-comments">{/* Шапка */}{/* Список комментариев */}{/* Форма добавления */}</div>);}
