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);
@@ -62,7 +57,7 @@ export const Input = () => {
       if (editableRef.current) {
         const range = document.createRange();
         const selection = window.getSelection();
-        
+
         let found = false;
         const findPosition = (node, remainingPos) => {
           if (node.nodeType === Node.TEXT_NODE) {
@@ -108,43 +103,42 @@ 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 {
       saveCursorPosition();
       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) {
@@ -190,7 +186,7 @@ export const Input = () => {
         completed: !newStore[index].completed 
       };
       setStore(newStore);
-      
+
       await uptTodo(newStore[index].id, newStore[index]);
     } catch (error) {
       console.error("Error toggling complete:", error);
@@ -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>
@@ -222,8 +223,7 @@ export const Input = () => {
       console.error("Error rendering editable content:", error);
       return (
         <span 
-       className={`${styles.task} ${store[editIndex]?.completed ? styles.completed : ''}`}
-
+          className={`${styles.task} ${store[editIndex]?.completed ? styles.completed : ''}`}
           onClick={() => startEdit(editIndex)}
         >
           {typeof store[editIndex]?.task === 'string'
@@ -237,15 +237,16 @@ export const Input = () => {
   return (
     <MyTask.Provider value={{ store, setStore }}>
       <div className="todo-container">
-      <Header/>
-      <List
-  store={store}
-  editIndex={editIndex}
-  renderEditableContent={renderEditableContent}
-  startEdit={startEdit}
-  toggleComplete={toggleComplete}
-  Delete={Delete}
-/>
+        <Header />
+        <List
+          store={store}
+          editIndex={editIndex}
+          renderEditableContent={renderEditableContent}
+          startEdit={startEdit}
+          toggleComplete={toggleComplete}
+          Delete={Delete}
+          isNewTodoAdded={isNewTodoAdded}
+        />
         <form onSubmit={(e) => e.preventDefault()}>
           <div className={styles.merge}>
             <input
@@ -256,12 +257,12 @@ export const Input = () => {
               onChange={handleChange}
               disabled={loading}
             />
-            <button 
+            <button
               onClick={Add}
               className={styles.button}
               disabled={loading || !task.trim()}
             >
-             Submit
+              Submit
             </button>
           </div>
         </form>