Assignment-9

src/TodoComponent/Todo.js

@@ -1,18 +1,27 @@
-import React, { useState } from 'react'
+import React, { useReducer} from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTrash } from '@fortawesome/free-solid-svg-icons'
 //import { faCheckSquare } from '@fortawesome/free-solid-svg-icons'
 
+const reducer=(state,action)=>{
+      switch(action.type){
+        case "Checked": return {...state,checked:state.checked=true}
+        case "UnChecked": return {...state,checked:state.checked=false}
+
+        default: return state
+      }
+}
 const Todo = ({task,HandleDelete}) => {
-
-    const[ischecked,SetisChecked]=useState(false)
+
+    const [state,dispatch]= useReducer(reducer,{checked:false})
+    // const[ischecked,SetisChecked]=useState(false)
     function ChangeColor(){
-        SetisChecked(!ischecked)
+        dispatch({type:"Checked"})
     }
 
     return ( 
-        <form className={`todo ${ischecked ? 'checked' : ''}`}>
-            <input type="checkbox" id={task.id} onClick={ChangeColor}/>
+        <form className={`todo ${state.checked===true ? 'checked' : ''}`}>
+            <input type="checkbox" id={task.id} onClick={ChangeColor} />
             <p>{task.task}</p>
             <div>
             <FontAwesomeIcon icon={faTrash} onClick={()=>{

src/TodoComponent/TodoForm.js

@@ -1,22 +1,37 @@
-import {  useState } from "react";
+import {useReducer} from "react";
 
-const TodoForm = ({addTodo}) => {
-    const[value,setValue]= useState(" ")
 
-    const handleSubmit=(e)=>{
-        e.preventDefault();
-        if(value){
-            addTodo(value)
-            setValue("")
+const TodoFormReducer=(state,action)=>{
+
+    switch(action.type){
+        case "SET_VALUE":
+            return { ...state, value: action.payload };
+          case "RESET_FORM":
+            return { ...state, value: "" };
+          default:
+            return state;
+    }
+   }
+
+const TodoForm = ({dispatch}) => {
+
+const[state,formdispatch]=useReducer(TodoFormReducer,{value:""})
+
+const handleSubmit=(e)=>{
+        e.preventDefault( );
+        if(state.value){
+        dispatch({ type: "ADD_TODO", payload: state.value })
+        formdispatch({type:"RESET_FORM"})
+
         }
 
 
     }
     return ( 
         <form  onSubmit={handleSubmit} className="TodoForm">
-            <input type="text" className="todo-input" value={value} placeholder="What is the task?" onChange={
+            <input type="text" className="todo-input" value={state.value} placeholder="What is the task?" onChange={
                 (e)=>{
-                   setValue(e.target.value)
+                   formdispatch({type:"SET_VALUE",payload: e.target.value })
                 }
             }/>
             <button type="submit" className="todo-btn" >Add Task</button>

src/TodoComponent/TodoWrapper.js

@@ -1,35 +1,46 @@
-import { useState } from "react";
+import { useReducer} from "react";
 import TodoForm from "./TodoForm";
 import { v4 as uuidv4 } from "uuid";
 import Todo from "./Todo";
 
+const todoReducer = (state, action) => {
+    switch (action.type) {
+        case "ADD_TODO":
+            return [...state, { id: uuidv4(), task: action.payload, completed: false }];
+        case "DELETE_TODO":
+            return state.filter((todo) => todo.id !== action.payload);
+        default:
+            return state;
+    }
+};
 
 
 const TodoWrapper = () => {
-
+    const [todoList, dispatch] = useReducer(todoReducer, []);
 
-    const [todoList, setTodoList] = useState([])
+    //const [todoList, setTodoList] = useState([])
 
-    function addTodo(todo) {
-        setTodoList([...todoList,{ id: uuidv4(), task: todo, completed: false}])
-
-    }
-    function HandleDelete(id){
-       let updatedTasks=todoList.filter(todo=>todo.id!==id)
-        setTodoList(updatedTasks)
-    }
+    // function addTodo(todo) {
+    //     setTodoList([...todoList,{ id: uuidv4(), task: todo, completed: false}])
+
+    // }
+    const handleDelete = (id) => {
+        dispatch({ type: "DELETE_TODO", payload: id });
+    };
     return (
         <div className="todowrapper">
-
-            <h1>Get Things Done !</h1><TodoForm addTodo={addTodo}></TodoForm>
-            {todoList.map((todo,index)=>
-                <Todo  task={todo} key={index} HandleDelete={HandleDelete}/>
-
-
+
+            <h1>Get Things Done !</h1>
+            <TodoForm dispatch={dispatch}></TodoForm>
+
+            {todoList.map((todo, index) =>
+            <Todo task={todo} key={index} HandleDelete={handleDelete} />
+
+
             )}
-        
+
         </div>
     );
 
-            }
+}
 export default TodoWrapper;