Решение заданияУпражнение: История действий — Декомпозиция React компонентов | Max Roslow | Space of React

Space of React

Декомпозиция React компонентов

0/12

Описание

Counter.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { useState } from 'react';
 
// Счётчик кликов
export function Counter() {
  const [count, setCount] = useState(0);
 
  return (
    <button onClick={() => setCount(count + 1)}>
      Кликов: {count}
    </button>
  );
}
 
// TODO: добавьте сброс счётчика
function reset() {
  setCount(0);
}

требуется вход

Войдите, чтобы решать задание

Онлайн-редактор кода, разбор решения и отметки о прогрессе доступны после входа.

Войти Создать аккаунт — бесплатно

Задание

История действий пользователя

Это лента активности — как в Google Drive, GitHub или личном кабинете.

Каждое действие содержит

Иконку (в зависимости от типа: lock, pencil, folder и т.д.)
Текст события
Время в человекочитаемом виде («Сегодня», «Вчера», «3 дня назад»)
Скрытое поле date — реальная Date для фильтрации

Функционал

Фильтр по времени: За все время, За сегодня, За неделю
Счётчик в заголовке — количество отфильтрованных действий
Если ничего не найдено — «Действия не найдены»

Логика фильтрации по датам — в App, через сравнение Date.

Задание

Разбить интерфейс на компоненты:

ActivityHeader — заголовок, счётчик, селект
ActivityItem — одно действие
ActivityList — список с проверкой на пустоту