diff --git a/src/components/toolbox/todo/todos/todos.tsx b/src/components/toolbox/todo/todos/todos.tsx index eec1ae6..cef242a 100644 --- a/src/components/toolbox/todo/todos/todos.tsx +++ b/src/components/toolbox/todo/todos/todos.tsx @@ -6,13 +6,16 @@ import styles from './todos.module.css'; export function Todos() { const todos = useTodoStore(state => state.todos); + const doneCount = useTodoStore(state => state.doneCount()); return (

Your Todos

-

0 / 0

+

+ {doneCount} / {todos.length} +

{todos.length > 0 ? ( diff --git a/src/stores/todo.ts b/src/stores/todo.ts index eb2101e..397fb20 100644 --- a/src/stores/todo.ts +++ b/src/stores/todo.ts @@ -6,6 +6,7 @@ import { v4 as uuid } from 'uuid'; interface TodoStore { addTodo: (todo: string) => void; deleteTodo: (id: string) => void; + doneCount: () => number; editTodo: (id: string, newTodo: string) => void; todos: Array<{ createdAt: number; @@ -32,13 +33,18 @@ export const useTodoStore = create()( ], }); }, - deleteTodo(id) { set({ todos: get().todos.filter(todo => todo.id !== id), }); }, + doneCount() { + const { todos } = get(); + + return todos.filter(todo => todo.done).length; + }, + editTodo(id, newTodo) { set({ todos: get().todos.map(todo => {