Index.jsx

todo/src/Form/form/Index.jsx

 import React, { createContext, useState, useRef, useEffect, useCallback } from 'react';
-import { getTodo, addTodo, delTodo, uptTodo } from '../../API/Api'
+import { getTodo, addTodo, delTodo, uptTodo } from '../../API/Api';
 import { Header } from '../../Layout/card/Index';
-import styles from'./styles.module.css';
+import styles from './styles.module.css';
 import List from '../../todo/List/Index';
-export const MyTask = createContext();
 
-const debounce = (func, delay) => {
-  let timeoutId;
-  return function(...args) {
-    clearTimeout(timeoutId);
-    timeoutId = setTimeout(() => {
-      func.apply(this, args);
-    }, delay);
-  };
-};
+export const MyTask = createContext();
 
 export const Input = () => {
   const [task, setTask] = useState("");
@@ -21,9 +12,13 @@ export const Input = () => {
   const [editIndex, setEditIndex] = useState(null);
   const [editedTask, setEditedTask] = useState("");
   const [loading, setLoading] = useState(false);
+  const [isNewTodoAdded, setIsNewTodoAdded] = useState(false);
   const editableRef = useRef(null);
   const lastCursorPos = useRef(0);
 
+
+  const debounceTimeout = useRef(null);
+
   const fetchTodos = useCallback(async () => {
     try {
       setLoading(true);
@@ -108,25 +103,6 @@ export const Input = () => {
     }
   }, [editIndex, editedTask]);
 
-  const debouncedSave = useCallback(
-    debounce(async (id, newTask) => {
-      try {
-        const todo = store.find(item => item.id === id);
-        if (todo && todo.task !== newTask) {
-          await uptTodo(id, {
-            id: todo.id,
-            task: newTask,
-            completed: todo.completed
-          });
-        }
-      } catch (error) {
-        console.error("Error saving todo:", error);
-      }
-    }, 500),
-    [store]
-  );
-
-  const handleChange = (e) => setTask(e.target.value);
  
   const handleEdit = (e) => {
     try {
@@ -134,17 +110,35 @@ export const Input = () => {
       const newValue = e.currentTarget.textContent;
       setEditedTask(newValue);
 
-      const newStore = [...store];
-      newStore[editIndex] = { ...newStore[editIndex], task: newValue };
-      setStore(newStore);
       
-      debouncedSave(store[editIndex].id, newValue);
+      const updatedStore = [...store];
+      const original = updatedStore[editIndex];
+      updatedStore[editIndex] = { ...original, task: newValue };
+      setStore(updatedStore);
+
+     
+      if (debounceTimeout.current) {
+        clearTimeout(debounceTimeout.current);
+      }
+
+    
+      debounceTimeout.current = setTimeout(() => {
+        uptTodo(original.id, {
+          id: original.id,
+          task: newValue,
+          completed: original.completed,
+        }).catch((error) => {
+          console.error("Error saving todo:", error);
+        });
+      }, 1000);
     } catch (error) {
       console.error("Error during edit:", error);
       setEditIndex(null);
     }
   };
 
+  const handleChange = (e) => setTask(e.target.value);
+
   const startEdit = (index) => {
     try {
       setEditIndex(index);
@@ -162,14 +156,16 @@ export const Input = () => {
   const Add = async () => {
     if (task.trim() === '') return;
     try {
+      setIsNewTodoAdded(true);
       const res = await addTodo(task);
       setStore([...store, res.data]);
       setTask("");
     } catch (error) {
       console.error("Error adding todo:", error);
+    } finally {
+      setTimeout(() => setIsNewTodoAdded(false), 500);
     }
   };
-
   const Delete = async (id) => {
     const confirmDelete = window.confirm("Are you sure you want to delete?");
     if (confirmDelete) {
@@ -214,6 +210,11 @@ export const Input = () => {
             }
           }}
           className={`${styles.task} ${store[editIndex]?.completed ? 'completed' : ''}`}
+          style={{
+            display: 'inline-block',
+            width:'100%',
+            boxSizing:'border-box'
+          }}
         >
           {editedTask}
         </div>
@@ -223,7 +224,6 @@ export const Input = () => {
       return (
         <span 
           className={`${styles.task} ${store[editIndex]?.completed ? styles.completed : ''}`}
-
           onClick={() => startEdit(editIndex)}
         >
           {typeof store[editIndex]?.task === 'string'
@@ -237,7 +237,7 @@ export const Input = () => {
   return (
     <MyTask.Provider value={{ store, setStore }}>
       <div className="todo-container">
-      <Header/>
+        <Header />
         <List
           store={store}
           editIndex={editIndex}
@@ -245,7 +245,8 @@ export const Input = () => {
           startEdit={startEdit}
           toggleComplete={toggleComplete}
           Delete={Delete}
-/>
+          isNewTodoAdded={isNewTodoAdded}
+        />
         <form onSubmit={(e) => e.preventDefault()}>
           <div className={styles.merge}>
             <input