clean up and add Uncheck All todos

justthinguyen · Oct 18, 2023 · 1bbbe34 · 1bbbe34
1 parent 1b68e1e
commit 1bbbe34
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/src/App.css b/src/App.css
@@ -130,7 +130,8 @@ body {
     border: 1px solid rgba(255, 255, 255, 0);
 }
 
-.todo-list-stats {
+.todo-list-stats,
+.uncheck-all {
     display: flex;
     justify-content: center;
     padding-bottom: 10px;
@@ -182,4 +183,11 @@ body {
     top: 0;
     right: 1px;
     border-radius: 50%;
+}
+
+.uncheck-all button {
+    border: none;
+    cursor: pointer;
+    background: none;
+    font-size: 1rem;
 }
diff --git a/src/TodoList.tsx b/src/TodoList.tsx
@@ -20,8 +20,8 @@ interface TodoListStatsProps {
 const TodoListStats = (ps: TodoListStatsProps) => (
     <div className='todo-list-stats'>
         Completed {ps.completed} / {ps.total}
-        {ps.completed ? (<span className='completedCheck'>&#x2714;</span>) : (<></>)}
-        {(ps.completed === ps.total && ps.total > 0) ? <span className='allDone'> well done!!  👏 🤩</span> : (<></>)}
+        {ps.completed && (<span className='completedCheck'>&#x2714;</span>)}
+        {(ps.completed === ps.total && ps.total > 0) && <span className='allDone'> well done!!  👏 🤩</span>}
     </div>
 )
 const getTodoListStats = (todos: Todo[]): TodoListStatsProps => {
@@ -93,6 +93,12 @@ export const TodoList = (ps: TodoListProps) => {
         return result;
     };
 
+    const uncheckAllTodo = () => {
+        const newTodos = [...todos];
+        newTodos.forEach(todo => todo.isCompleted = false);
+        setTodos(newTodos);
+    }
+
     const onDragEnd = (result: DropResult) => {
         if (!result.destination) return;
         const items = reorder(todos, result.source.index, result.destination.index);
@@ -103,6 +109,8 @@ export const TodoList = (ps: TodoListProps) => {
         <>
             <TodoListName name={todoName} onNameChange={ps.onNameChange} />
             <TodoListStats completed={todoListStats.completed} total={todoListStats.total} />
+            {todoListStats.total && todoListStats.completed === todoListStats.total &&
+                (<div className='uncheck-all'><button onClick={() => uncheckAllTodo()}>Uncheck All ♻️</button></div>)}
             <DragDropContext onDragEnd={onDragEnd}>
 
                 <StrictModeDroppable droppableId='droppable'>