task todo

src/App.css

@@ -36,17 +36,19 @@ img {
 .item {
   min-width: 100%;
   height: 50px;
-  border: 2px solid black;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 2rem .8rem;
+  box-shadow: 4px 4px 2px rgba(0, 0, 0, .05);
+  background: white;
 }
 
 .item .item-content {
   font-size: 20px;
   padding: 0px 10px;
   text-transform: capitalize;
+  background-color: transparent;
 }
 
 .item .item-content>* {
@@ -62,3 +64,42 @@ img {
   width: 20px;
   height: 20px;
 }
+
+.todo-name {
+  outline: none;
+  border: none;
+  padding: 0rem 0;
+  font-size: 20px;
+  background-color: white;
+}
+
+.todo-name:focus {
+  border: none;
+}
+
+.input-item {
+  width: 100%;
+  background-color: white;
+  padding: 1.7rem;
+  box-shadow: 4px 4px 2px rgba(0, 0, 0, .05);
+}
+
+.input-item form>input {
+  padding: .3rem 1rem;
+  border: .5px solid black;
+  background-color: white;
+  width: 70%;
+  border-radius: 2px;
+}
+
+.input-item form>button {
+  border: none;
+  padding: .4rem .6rem;
+  width: 20%;
+  color: white;
+  border-radius: 3px;
+  background-color: black;
+  margin-inline-start: 10%;
+  box-shadow: 4px 4px 2px rgba(0, 0, 0, .05);
+  font-weight: 600;
+}
\ No newline at end of file

src/Components/Todo.tsx

-import React, { useContext, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import { todo } from '../types.dt'
 import TodoCount from './TodoCount'
 import List from './TodoList/List'
@@ -6,12 +6,12 @@ import { Provider } from '../Context Api/Todos'
 import TodoCreate from './TodoCreate'
 const Todo = () => {
     const [Todos, setTodos] = useState<todo[]>([])
-    const { state, handleCreate, handleDelete } = useContext(Provider)
-    console.log(handleCreate)
+    const { state, handleCreate, handleDelete, handleUpdate } = useContext(Provider)
+
     return (
         <>
             <TodoCount count={state.length} />
-            <List Todo={state} handleDelete={handleDelete} />
+            <List Todo={state} handleDelete={handleDelete} handleUpdate={handleUpdate} />
             <TodoCreate handleCreate={handleCreate} />
         </>
     )

src/Components/TodoList/Item.tsx

@@ -7,17 +7,25 @@ import { Provider } from "../../Context Api/Todos";
 interface item extends todo {
     index: Number,
     handleDelete?: () => void
+    handleUpdate: () => void
 }
-const Item = ({ name, index, completed, handleDelete }: item) => {
+const Item = ({ name, index, completed, handleDelete, handleUpdate }: item) => {
     const handleClick = (e: React.ChangeEvent<HTMLImageElement>) => {
         // console.log(index)
         handleDelete({ index })
     }
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        handleUpdate({ name: e.target.value, index })
+    }
+    const handleTick = () => {
+        console.log("handletick")
+        handleUpdate({ index })
+    }
     return (
         <div className="item">
             <div className='item-content'>
-                <input type='checkbox' id={`item-${index}`} />
-                <label htmlFor={`item-${index}`}>{name}</label>
+                <input type='checkbox' id={`item-${index}`} defaultChecked={completed} onChange={handleTick} />
+                <input className="todo-name" defaultValue={name} type="text" placeholder="Enter the Name of the List" onChange={handleChange} />
             </div>
             <div className='actions'>
                 {

src/Components/TodoList/List.tsx

@@ -2,13 +2,13 @@ import React from 'react'
 import { todo } from '../../types.dt'
 import Item from './Item'
 
-const List = ({ Todo, handleDelete }: { Todo: todo[], handleDelete: () => void }) => {
+const List = ({ Todo, handleDelete, handleUpdate }: { Todo: todo[], handleDelete: () => void, handleUpdate: () => void }) => {
     return (
         <>
             {
                 Todo.map((item, index) => {
                     return (
-                        <Item {...item} index={index} key={index} handleDelete={handleDelete} />
+                        <Item {...item} index={index} key={index} handleDelete={handleDelete} handleUpdate={handleUpdate} />
                     )
                 })
             }

src/Context Api/Todos.tsx

@@ -7,11 +7,19 @@ const Todos = ({ children }: {
     const reducer = (state: todo[], action: action) => {
         switch (action.type) {
             case 'Create':
-                console.log(action)
-                return [...state, { name: action.name, completed: false }]
+                // console.log(action)
+                const set = new Set([...state, { id: state.length + 1, name: action.name, completed: false }])
+                const newstate = Array.from(set)
+                return newstate;
             case "Update":
-                state[action.index].name = action.name
-                return state
+                if (action.name) {
+
+                    state[action.index].name = action.name;
+                } else {
+                    state[action.index].completed = !state[action.index].completed;
+
+                }
+                return [...state];
             case "Delete":
                 return state.filter((data, i) => {
                     return action.index !== i
@@ -22,13 +30,15 @@ const Todos = ({ children }: {
     }
 
     const initialValues: todo[] = [{
+        id: 1,
         name: 'Eren Yeager',
         completed: false,
     }, {
+        id: 2,
         name: "Hange Zoe",
         completed: false
     }]
-    const [state, dispatch] = useReducer(reducer, initialValues)
+    const [state, dispatch] = useReducer<todo[]>(reducer, initialValues)
 
     const handleCreate = (data: params): void => {
         // console.log({ ...data }, "handleCreate")
@@ -40,6 +50,7 @@ const Todos = ({ children }: {
     const handleDelete = (data: params) => {
         dispatch({ type: "Delete", ...data })
     }
+    console.log(state)
     return (
         <Provider.Provider value={{ state, handleCreate, handleDelete, handleUpdate }}>
             {children}

src/types.dt.ts

 export interface todo {
+    id: Number,
     name: String,
     completed: Boolean
 }