/
dbataeva
/
tasksApp
Обзор
Документация
Войти
/
dbataeva
/
tasksApp
Код
Запросы
2
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
task9
appProject/src/features/taskList/ui/TaskList.tsx
58 строк
2 KB
Daria Bataeva
feat(task7): build lib
27 окт 2025, 20:56
27 окт 2025, 20:56
f5e821b
Код
Авторство
О чём код?
import { TaskCard } from 'entities/task'; import React, { FC, useCallback, useState } from 'react'; import { FilterButton } from 'uilib'; import styles from './TaskList.module.css'; import { Filter, useTasks } from '../model/useTasks'; const filters: Filter[] = ['all', 'completed', 'incomplete']; export const TaskList: FC = () => { const [inputValue, setInputValue] = useState(''); const { filter, setFilter, addTask, removeTask, setTaskCompleted, tasks } = useTasks(); const filterButtonClickHandler = useCallback( (item?: string) => setFilter(item as Filter), [setFilter] ); return ( <div className={styles.container}> <div className={styles.filters}> {filters.map((item) => ( <FilterButton key={item} state={item === filter ? 'chosen' : 'default'} onClick={filterButtonClickHandler}> {item} </FilterButton> ))} </div> <div> {tasks.map((task) => ( <div key={task.id} className={styles.item}> <TaskCard task={task} setTaskCompleted={setTaskCompleted} /> <button onClick={() => removeTask(task.id)}>❌ delete</button> </div> ))} </div> <div className={styles.form}> <label htmlFor='taskTitle'>Task description:</label> <input value={inputValue} type='text' id='taskTitle' name='taskTitle' required onChange={(event: React.ChangeEvent<HTMLInputElement>) => setInputValue(event.target.value) } /> <button onClick={() => inputValue && addTask(inputValue)}> Add task </button> </div> </div> ); };