feat: delete, mark as completed and update ui on real time

Author: coderSuresh

app/page.tsx

@@ -3,37 +3,40 @@ import DarkModeToggler from "@/components/DarkModeToggler"
 import Form from "@/components/Form"
 import TodosContents from "@/components/TodosContents"
 import ThemeProvider from "@/provider/ThemeProvider"
+import TodoProvider from "@/provider/TodoProvider"
 
 const Home = () => {
 
   return (
     <ThemeProvider>
-      <main className="bg-bg h-screen">
+      <TodoProvider>
+        <main className="bg-bg h-screen">
 
-        <BackgroundImage />
+          <BackgroundImage />
 
-        <section className="container relative max-w-2xl mx-auto p-5">
+          <section className="container relative max-w-2xl mx-auto p-5">
 
-          <div className="flex items-center justify-between sm:pt-16 pt-8">
-            <h1 className="uppercase tracking-widest md:text-4xl text-2xl font-bold text-white">
-              Todo
-            </h1>
+            <div className="flex items-center justify-between sm:pt-16 pt-8">
+              <h1 className="uppercase tracking-widest md:text-4xl text-2xl font-bold text-white">
+                Todo
+              </h1>
 
-            <DarkModeToggler />
+              <DarkModeToggler />
 
-          </div>
+            </div>
 
-          <div className="bg-card-bg rounded-md shadow-lg px-5 py-2 mt-8">
-            <Form />
-          </div>
+            <div className="bg-card-bg rounded-md shadow-lg px-5 py-2 mt-8">
+              <Form />
+            </div>
 
-          <TodosContents />
+            <TodosContents />
 
-        </section>
+          </section>
 
-        <p className="text-grayish-text text-center md:mt-0 pb-10 mt-20">Drag and drop yo reorder list</p>
+          <p className="text-grayish-text text-center md:mt-0 pb-10 mt-20">Drag and drop yo reorder list</p>
 
-      </main>
+        </main>
+      </TodoProvider>
     </ThemeProvider>
   )
 }

components/Form.tsx

@@ -1,15 +1,19 @@
 'use client'
+import { TodoContext } from '@/context/TodoContext'
 import React from 'react'
 
 const Form = () => {
 
     const [todo, setTodo] = React.useState('')
     const [todos, setTodos] = React.useState<TodoType[]>([])
 
+    const { isManipulated, setIsManipulated } = React.useContext(TodoContext)
+
     React.useEffect(() => {
+        setIsManipulated(false)
         const todos = JSON.parse(localStorage.getItem('todos') || '[]')
         setTodos(todos)
-    }, [])
+    }, [isManipulated])
 
     const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault()
@@ -24,6 +28,7 @@ const Form = () => {
 
         todos.unshift(newTodo)
         localStorage.setItem('todos', JSON.stringify(todos))
+        setIsManipulated(true)
 
         setTodo('')
     }

components/ListItem.tsx

@@ -1,13 +1,34 @@
+'use client'
+import React from 'react'
 import Image from 'next/image'
+import { TodoContext } from '@/context/TodoContext'
+
+const ListItem = ({ id, content, completed, todos }: ListItemProps) => {
+
+  const { setIsManipulated } = React.useContext(TodoContext)
+
+  const handleChange = () => {
+    const todo = todos.find(todo => todo.id === Number(id))
+    todo!.completed = !todo?.completed
+    localStorage.setItem('todos', JSON.stringify(todos))
+    setIsManipulated(true)
+  }
+
+  const deleteItem = () => {
+    const newTodos = todos.filter(todo => todo.id !== Number(id))
+    localStorage.setItem('todos', JSON.stringify(newTodos))
+    setIsManipulated(true)
+  }
 
-const ListItem = ({ id, content }: ListItemProps) => {
   return (
     <>
       <div className="todo_item flex items-center justify-between w-full group px-5 py-2 relative">
         <div>
           <input
+            onChange={handleChange}
             id={id}
             type="checkbox"
+            checked={completed}
             className="todo_checkbox appearance-none h-0 cursor-pointer
                 before:h-6 before:w-6 before:rounded-full
                 before:border before:border-divider
@@ -35,7 +56,7 @@ const ListItem = ({ id, content }: ListItemProps) => {
           </label>
         </div>
 
-        <button className="group-hover:block hidden" aria-label="delete todo item">
+        <button onClick={deleteItem} className="group-hover:block hidden" aria-label="delete todo item">
           <Image src='/images/icon-cross.svg' height={15} width={15} alt="" />
         </button>
 

components/TodosContents.tsx

@@ -2,17 +2,21 @@
 import React from 'react'
 import ListItem from './ListItem'
 import ListControls from './ListControls'
+import { TodoContext } from '@/context/TodoContext'
 
 const TodosContainer = () => {
 
     const [todos, setTodos] = React.useState<TodoType[]>([])
     const [loading, setLoading] = React.useState(true)
 
+    const { isManipulated, setIsManipulated } = React.useContext(TodoContext)
+
     React.useEffect(() => {
+        setIsManipulated(false)
         const todos = JSON.parse(localStorage.getItem('todos') || '[]')
         setTodos(todos)
         setLoading(false)
-    }, [])
+    }, [isManipulated])
 
     const renderTodos = () => {
 
@@ -27,6 +31,7 @@ const TodosContainer = () => {
                     id={todo.id.toString()}
                     content={todo.content}
                     completed={todo.completed}
+                    todos={todos}
                 />
             )
         })

context/TodoContext.ts

@@ -0,0 +1,7 @@
+'use client'
+import React from 'react'
+
+export const TodoContext = React.createContext({
+    isManipulated: false,
+    setIsManipulated: (isManipulated: boolean) => { },
+})

provider/TodoProvider.tsx

@@ -0,0 +1,16 @@
+'use client'
+import React from 'react'
+import { TodoContext } from '@/context/TodoContext'
+
+const TodoProvider = ({ children }: ChildrenProps) => {
+
+    const [isManipulated, setIsManipulated] = React.useState(false)
+
+    return (
+        <TodoContext.Provider value={{ isManipulated, setIsManipulated }}>
+            {children}
+        </TodoContext.Provider>
+    )
+}
+
+export default TodoProvider

types/types.d.ts

@@ -6,6 +6,7 @@ type ListItemProps = {
     id: string,
     content: string,
     completed: boolean,
+    todos: TodoType[],
 }
 
 type TodoType = {