repair complete

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<TodoItem['id']>) => {
-      // Fix me please =\
+      state.todos = state.todos.map((todo) => {
+        if (todo.id === action.payload) {
+          return {...todo, checked: !todo.checked}
+        }
+        return todo
+      })
     },
   },
 })

src/components/Checkbox/index.tsx

@@ -6,24 +6,21 @@ type CheckboxTypes = {
   checked: boolean
   onDelete: () => void
   text: string
-  onKeyUp: (e: React.KeyboardEvent<HTMLDivElement>) => void
 }
 
-export const Checkbox = ({ checked, text, onClick, onDelete, onKeyUp }: CheckboxTypes) => (
+export const Checkbox = ({ checked, text, onClick, onDelete }: CheckboxTypes) => (
   <div className="checkbox">
     <div
       tabIndex={0}
       role="checkbox"
       aria-checked
       className="checkbox-content"
       onClick={onClick}
-      onKeyUp={onKeyUp}
     >
       <input
         tabIndex={-1}
         type="checkbox"
-        checked={checked}
-        onChange={onClick}
+        defaultChecked={checked}
       />
       <span className={checked ? "checkbox-checked" : ""}>{text}</span>
     </div>

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) => {

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<HTMLDivElement>, id: number) => {
-    if (e.keyCode === 13) {
-      toggleCheck(id)
-    }
+    TodoActions.toggleCheckTodo(id)
   }
 
   return (
     <div className="todo-list">
-      <span className="todo-list-title">Список заданий</span>
+      <span className="todo-list-title">Список заданий {todos.length ? `(${completeTodos.length}/${todos.length})` : ''}</span>
       {todos.length ? (
         <div className="todo-list-content">
           {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)}
             />
           ))}

src/components/List/list.scss

@@ -16,6 +16,7 @@
   &-content {
     display: flex;
     justify-content: center;
+    flex-direction: column;
   }
 }