diff --git a/src/app/todoSlice.ts b/src/app/todoSlice.ts index 5c95ad8..673194d 100644 --- a/src/app/todoSlice.ts +++ b/src/app/todoSlice.ts @@ -63,7 +63,12 @@ export const counterSlice = createSlice({ state.todos = state.todos.filter(todo => todo.id !== action.payload) }, toggleCheckTodo: (state, action: PayloadAction) => { - // Fix me please =\ + state.todos = state.todos.map((todo) => { + if (todo.id === action.payload) { + return {...todo, checked: !todo.checked} + } + return todo + }) }, }, }) diff --git a/src/components/Checkbox/index.tsx b/src/components/Checkbox/index.tsx index a04c101..d07112d 100644 --- a/src/components/Checkbox/index.tsx +++ b/src/components/Checkbox/index.tsx @@ -6,10 +6,9 @@ type CheckboxTypes = { checked: boolean onDelete: () => void text: string - onKeyUp: (e: React.KeyboardEvent) => void } -export const Checkbox = ({ checked, text, onClick, onDelete, onKeyUp }: CheckboxTypes) => ( +export const Checkbox = ({ checked, text, onClick, onDelete }: CheckboxTypes) => (
{text}
diff --git a/src/components/Form/index.tsx b/src/components/Form/index.tsx index 44d07d7..47929bb 100644 --- a/src/components/Form/index.tsx +++ b/src/components/Form/index.tsx @@ -1,11 +1,14 @@ import React, { KeyboardEvent, useState } from "react" +import { TodoActions } from "../../app/store" import "./form.scss" + export const TodoForm = () => { const [task, setTask] = useState("") const handleAddTodo = () => { - // Исправить добавления задания + TodoActions.createTodo(task) + setTask("") } const handleKeyUp = (e: KeyboardEvent) => { diff --git a/src/components/List/index.tsx b/src/components/List/index.tsx index a035524..6c72a0e 100644 --- a/src/components/List/index.tsx +++ b/src/components/List/index.tsx @@ -2,27 +2,23 @@ import * as React from "react" import { Checkbox } from "../Checkbox" import "./list.scss" import { useAppSelector } from "../../app/hooks" +import { TodoActions } from "../../app/store" export const TodoList = () => { const todos = useAppSelector(state => state.todo.todos) + const completeTodos = todos.filter(todo => todo.checked) const handleDelete = (id: number) => { - // Исправить удаление задания + TodoActions.deleteTodo(id) } const toggleCheck = (id: number) => { - // Исправить завершение задания - } - - const handleKeyUp = (e: React.KeyboardEvent, id: number) => { - if (e.keyCode === 13) { - toggleCheck(id) - } + TodoActions.toggleCheckTodo(id) } return (
- Список заданий + Список заданий {todos.length ? `(${completeTodos.length}/${todos.length})` : ''} {todos.length ? (
{todos.map((todoItem) => ( @@ -31,7 +27,6 @@ export const TodoList = () => { text={todoItem.text} checked={todoItem.checked} onClick={() => toggleCheck(todoItem.id)} - onKeyUp={(e) => handleKeyUp(e, todoItem.id)} onDelete={() => handleDelete(todoItem.id)} /> ))} diff --git a/src/components/List/list.scss b/src/components/List/list.scss index b7b6c73..8f36167 100644 --- a/src/components/List/list.scss +++ b/src/components/List/list.scss @@ -16,6 +16,7 @@ &-content { display: flex; justify-content: center; + flex-direction: column; } }