Update Input.jsx

Todo/src/Components/Input.jsx

-import React, { createContext, useState, useRef, useEffect } from 'react';
+import React, { createContext, useState, useRef, useEffect, useCallback } from 'react';
 import './Input.css';
 import { getTodo, addTodo, delTodo, uptTodo } from '../API/Api';
 import { MdCancel } from "react-icons/md";
 import { Header } from '../Header/Header';
 import { Checkbox } from './Checkbox';
-import { ErrorBoundary } from '../ErrorBoundary';
+
 export const MyTask = createContext();
 
+const debounce = (func, delay) => {
+  let timeoutId;
+  return function(...args) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      func.apply(this, args);
+    }, delay);
+  };
+};
+
 export const Input = () => {
   const [task, setTask] = useState("");
   const [store, setStore] = useState([]);
   const [editIndex, setEditIndex] = useState(null);
   const [editedTask, setEditedTask] = useState("");
+  const [loading, setLoading] = useState(false);
   const editableRef = useRef(null);
   const lastCursorPos = useRef(0);
 
-  useEffect(() => {
-    getTodo().then(res => setStore(res.data));
+  const fetchTodos = useCallback(async () => {
+    try {
+      setLoading(true);
+      const res = await getTodo();
+      setStore(res.data || []);
+    } catch (error) {
+      console.error("Failed to fetch todos:", error);
+    } finally {
+      setLoading(false);
+    }
   }, []);
 
+  useEffect(() => {
+    fetchTodos();
+  }, [fetchTodos]);
+
   const saveCursorPosition = () => {
-    if (editableRef.current) {
-      const selection = window.getSelection();
-      if (selection.rangeCount > 0) {
-        const range = selection.getRangeAt(0);
-        const preCaretRange = range.cloneRange();
-        preCaretRange.selectNodeContents(editableRef.current);
-        preCaretRange.setEnd(range.endContainer, range.endOffset);
-        lastCursorPos.current = preCaretRange.toString().length;
+    try {
+      if (editableRef.current) {
+        const selection = window.getSelection();
+        if (selection.rangeCount > 0) {
+          const range = selection.getRangeAt(0);
+          const preCaretRange = range.cloneRange();
+          preCaretRange.selectNodeContents(editableRef.current);
+          preCaretRange.setEnd(range.endContainer, range.endOffset);
+          lastCursorPos.current = preCaretRange.toString().length;
+        }
       }
+    } catch (error) {
+      console.error("Error saving cursor position:", error);
     }
   };
 
   const restoreCursorPosition = () => {
-    if (editableRef.current) {
-      const textNode = editableRef.current.firstChild || editableRef.current;
-      const range = document.createRange();
-      const selection = window.getSelection();
-
-      let pos = 0;
-      let found = false;
-      const findPosition = (node, remainingPos) => {
-        if (node.nodeType === Node.TEXT_NODE) {
-          const length = node.nodeValue.length;
-          if (remainingPos <= length) {
-            range.setStart(node, remainingPos);
-            found = true;
-            return;
+    try {
+      if (editableRef.current) {
+        const range = document.createRange();
+        const selection = window.getSelection();
+        
+        let found = false;
+        const findPosition = (node, remainingPos) => {
+          if (node.nodeType === Node.TEXT_NODE) {
+            const length = node.nodeValue.length;
+            if (remainingPos <= length) {
+              range.setStart(node, remainingPos);
+              found = true;
+              return;
+            }
+            remainingPos -= length;
+          } else {
+            for (let i = 0; i < node.childNodes.length && !found; i++) {
+              findPosition(node.childNodes[i], remainingPos);
+            }
           }
-          remainingPos -= length;
+        };
+
+        findPosition(editableRef.current, lastCursorPos.current);
+        if (!found) {
+          range.selectNodeContents(editableRef.current);
+          range.collapse(false);
         } else {
-          for (let i = 0; i < node.childNodes.length && !found; i++) {
-            findPosition(node.childNodes[i], remainingPos);
-          }
+          range.collapse(true);
         }
-      };
 
-      findPosition(editableRef.current, lastCursorPos.current);
-      if (!found) {
-        range.selectNodeContents(editableRef.current);
-        range.collapse(false);
-      } else {
-        range.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(range);
       }
-
-      selection.removeAllRanges();
-      selection.addRange(range);
+    } catch (error) {
+      console.error("Error restoring cursor position:", error);
     }
   };
 
   useEffect(() => {
     if (editableRef.current && editIndex !== null) {
-      editableRef.current.focus();
-      setTimeout(restoreCursorPosition, 0);
+      try {
+        editableRef.current.focus();
+        setTimeout(restoreCursorPosition, 0);
+      } catch (error) {
+        console.error("Error focusing editable element:", error);
+        setEditIndex(null);
+      }
     }
   }, [editIndex, editedTask]);
 
-  const Change = (e) => setTask(e.target.value);
+  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 Add = async () => {
-    if (task.trim() === '') return;
-    const res = await addTodo(task);
-    setStore([...store, res.data]);
-    setTask("");
-  };
+  const handleChange = (e) => setTask(e.target.value);
 
-  const Delete = async (id) => {
-    const confirmDelete = window.confirm("Are you sure you want to delete?");
-    if (confirmDelete) {
-      await delTodo(id);
-      setStore(store.filter(item => item.id !== id));
+  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);
+    } catch (error) {
+      console.error("Error during edit:", error);
+      setEditIndex(null);
     }
   };
 
@@ -98,80 +152,123 @@ export const Input = () => {
       setEditIndex(index);
       setEditedTask(store[index].task);
     } catch (error) {
-      console.error("Error in startEdit:", error);
+      console.error("Error starting edit:", error);
       setEditIndex(null);
     }
   };
 
-  const saveEdit = async (index) => {
+  const endEdit = () => {
+    setEditIndex(null);
+  };
+
+  const Add = async () => {
+    if (task.trim() === '') return;
+    try {
+      const res = await addTodo(task);
+      setStore([...store, res.data]);
+      setTask("");
+    } catch (error) {
+      console.error("Error adding todo:", error);
+    }
+  };
+
+  const Delete = async (id) => {
+    const confirmDelete = window.confirm("Are you sure you want to delete?");
+    if (confirmDelete) {
+      try {
+        await delTodo(id);
+        setStore(store.filter(item => item.id !== id));
+      } catch (error) {
+        console.error("Error deleting todo:", error);
+      }
+    }
+  };
+
+  const toggleComplete = async (index) => {
     try {
-      if (!editedTask.trim()) return;
-      const todo = store[index];
-      const updated = { ...todo, task: editedTask };
-      await uptTodo(todo.id, updated);
       const newStore = [...store];
-      newStore[index] = updated;
+      newStore[index] = { 
+        ...newStore[index], 
+        completed: !newStore[index].completed 
+      };
       setStore(newStore);
-      setEditIndex(null);
+      
+      await uptTodo(newStore[index].id, newStore[index]);
     } catch (error) {
-      console.error("Error saving edit:", error);
+      console.error("Error toggling complete:", error);
+      fetchTodos();
     }
   };
 
-  const handleEditInput = (e) => {
-    saveCursorPosition();
-    setEditedTask(e.currentTarget.textContent);
-  };
-  const toggleComplete = (index) => {
-    const newStore = [...store];
-    newStore[index].completed = !newStore[index].completed;
-    setStore(newStore);
+  const renderEditableContent = () => {
+    try {
+      return (
+        <div
+          ref={editableRef}
+          contentEditable
+          suppressContentEditableWarning
+          onBlur={endEdit}
+          onInput={handleEdit}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              e.currentTarget.blur();
+            }
+          }}
+          className={`task ${store[editIndex]?.completed ? 'completed' : ''}`}
+        >
+          {editedTask}
+        </div>
+      );
+    } catch (error) {
+      console.error("Error rendering editable content:", error);
+      return (
+        <span 
+          className={`task ${store[editIndex]?.completed ? 'completed' : ''}`}
+          onClick={() => startEdit(editIndex)}
+        >
+          {typeof store[editIndex]?.task === 'string'
+            ? store[editIndex].task
+            : JSON.stringify(store[editIndex]?.task)}
+        </span>
+      );
+    }
   };
+
   return (
     <MyTask.Provider value={{ store, setStore }}>
-      <>
+      <div className="todo-container">
         <Header />
         <ul className='scroll'>
-        {store.map((item, index) => (
-  <li key={item.id} className={`todo ${item.completed ? "completed" : ""}`}>
-    <div className="check">
-    <Checkbox
-  checked={item.completed}
-  onChange={() => toggleComplete(index)}
-  id={item.id}
-/>
-      <ErrorBoundary>
-        {editIndex === index ? (
-          <span
-            ref={editableRef}
-            contentEditable
-            suppressContentEditableWarning
-            onBlur={() => saveEdit(index)}
-            onInput={(e) => setEditedTask(e.currentTarget.textContent)}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') {
-                e.preventDefault();
-                e.currentTarget.blur();
-              }
-            }}
-            className={`task ${item.completed ? 'completed' : ''}`}
-            dangerouslySetInnerHTML={{ __html: editedTask }}
-          />
-        ) : (
-          <span 
-            className={`task ${item.completed ? 'completed' : ''}`}
-            onClick={() => startEdit(index)}
-          >
-            {item.task}
-          </span>
-        )}
-      </ErrorBoundary>
-    </div>
-    <button className="delete" onClick={() => Delete(item.id)}>
-      <MdCancel />
-    </button>
-  </li>
-))}
+          {store.map((item, index) => {
+            console.log("Rendering task:", item.task);
+            return (
+              <li key={item.id} className={`todo ${item.completed ? "completed" : ""}`}>
+                <div className="check">
+                  <Checkbox
+                    checked={item.completed}
+                    onChange={() => toggleComplete(index)}
+                    id={item.id}
+                  />
+                  {editIndex === index ? (
+                    renderEditableContent()
+                  ) : (
+                    <span 
+                      className={`task ${item.completed ? 'completed' : ''}`}
+                      onClick={() => startEdit(index)}
+                    >
+                      {typeof item.task === 'string'
+                        ? item.task
+                        : JSON.stringify(item.task)}
+                    </span>
+                  )}
+                </div>
+                <button className="delete" onClick={() => Delete(item.id)}>
+                  <MdCancel />
+                </button>
+              </li>
+            );
+          })}
         </ul>
 
         <form onSubmit={(e) => e.preventDefault()}>
@@ -181,14 +278,19 @@ export const Input = () => {
               className="input"
               placeholder="Enter Items"
               value={task}
-              onChange={Change}
+              onChange={handleChange}
+              disabled={loading}
             />
-            <button onClick={Add} className="button">
-              Submit
+            <button 
+              onClick={Add}
+              className="button"
+              disabled={loading || !task.trim()}
+            >
+              {loading ? 'Adding...' : 'Submit'}
             </button>
           </div>
         </form>
-      </>
+      </div>
     </MyTask.Provider>
   );
-};
+};
\ No newline at end of file