В этом задании мы разобьём панель уведомлений на независимые компоненты.
Панель уведомлений - это интерфейс для отображения системных сообщений, как в социальных сетях, email-клиентах или мобильных приложениях. Каждое уведомление может быть прочитанным или непрочитанным, иметь разные типы (информация, предупреждение, ошибка).
В нашей панели уведомлений можно выделить несколько логических частей:
Шапка панели - заголовок с счётчиком непрочитанных и кнопка массового действия
Список уведомлений - контейнер для всех уведомлений
Отдельное уведомление - карточка с иконкой, контентом и кнопкой удаления
Иконка уведомления - визуальный индикатор типа (информация, предупреждение)
Контент уведомления - заголовок, текст и время
Состояние прочитанности - уведомления имеют флаг read, который влияет на визуальное отображение. Непрочитанные выделяются визуально, при клике помечаются как прочитанные.
Предотвращение всплытия события - кнопка удаления внутри уведомления должна использовать e.stopPropagation(), чтобы клик по ней не вызывал клик по всему уведомлению.
Вычисление количества непрочитанных - счётчик вычисляется на основе массива уведомлений с помощью filter, это не отдельное состояние.
Условное отображение - иконка зависит от типа уведомления, счётчик показывается только если есть непрочитанные.
Задание
Необходимо разбить монолитную панель уведомлений на независимые компоненты. Выделите шапку панели в компонент, который принимает количество непрочитанных уведомлений и функцию для массовой пометки как прочитанных. Выделите компонент для иконки уведомления, который принимает тип и отображает соответствующий эмодзи. Выделите компонент для контента уведомления, который принимает заголовок, текст и время. Выделите компонент для отдельного уведомления, который объединяет иконку, контент и кнопку удаления, принимает объект уведомления и функции для действий. Выделите список уведомлений в контейнерный компонент. В главном компоненте оставьте управление состоянием массива уведомлений, функции для пометки как прочитанного и удаления, вычисление счётчика непрочитанных и композицию всех компонентов.
functionApp(){const[notifications, setNotifications]=useState([...]);constmarkAllAsRead=()=>{// Пометить все как прочитанные};constmarkAsRead=(id)=>{// Пометить одно как прочитанное};constremoveNotification=(id)=>{// Удалить уведомление};const unreadCount = notifications.filter((n)=>!n.read).length;return(<divclassName="notifications">{/* Шапка */}{/* Список уведомлений */}</div>);}
