Список контактов - это интерфейс для отображения и управления контактами, как в мессенджерах (Telegram, WhatsApp, VK), email-клиентах или CRM-системах. Пользователи могут просматривать список, искать контакты по имени и инициировать общение.
В нашем списке контактов можно выделить несколько логических частей:
Шапка списка - заголовок со счётчиком и поле поиска
Список контактов - контейнер для всех контактов с обработкой пустого состояния
Отдельный контакт - карточка с аватаром, информацией и кнопкой действия
Аватар контакта - эмодзи-аватар с индикатором статуса (online/offline)
Информация о контакте - имя и текст статуса
Пустое состояние - сообщение, когда результаты поиска пусты
Поиск и фильтрация - поле поиска фильтрует контакты в реальном времени по имени. Фильтрация производится без учёта регистра через toLowerCase(). Счётчик в заголовке показывает количество отфильтрованных контактов, а не всех.
Статусы контактов - каждый контакт имеет статус online или offline. Для online отображается просто "online", для offline - текст "был(а) X назад" с информацией о последнем визите.
Визуальный индикатор статуса - цветная точка рядом с аватаром показывает статус контакта. Класс динамический - status online или status offline, что позволяет применять разные стили.
Условное отображение пустого состояния - если после фильтрации массив пустой, вместо списка показывается сообщение "Контакты не найдены".
Вычисляемое значение фильтрации - отфильтрованный массив filteredContacts не хранится в состоянии, а вычисляется при каждом рендере на основе contacts и search.
Задание
Необходимо разбить монолитный список контактов на независимые компоненты. Выделите шапку списка в компонент, который принимает количество контактов, значение поиска и функцию изменения поиска. Выделите компонент для аватара контакта, который принимает эмодзи и статус, отображает аватар с цветным индикатором статуса. Выделите компонент для информации о контакте, который принимает имя, статус и время последнего визита, формирует правильный текст статуса. Выделите компонент для отдельного контакта, который объединяет аватар, информацию и кнопку действия, принимает объект контакта и функцию-обработчик. Выделите компонент для пустого состояния, который отображается при отсутствии результатов. Выделите список контактов в контейнерный компонент, который принимает массив контактов, обрабатывает пустое состояние и отображает список или сообщение. В главном компоненте оставьте управление состоянием массива контактов и строки поиска, вычисление отфильтрованного массива, функцию-обработчик для открытия чата и композицию всех компонентов.
functionApp(){const[contacts, setContacts]=useState([...]);const[search, setSearch]=useState('');const filteredContacts = contacts.filter((contact)=>// Фильтрация по имени);consthandleMessage=(contactId)=>{// Открыть чат с контактом};return(<divclassName="contacts">{/* Шапка с поиском */}{/* Список контактов */}</div>);}
