Create editToDo function

conceptbtw · Jul 12, 2024 · 2ce6fc1 · 2ce6fc1
1 parent adc315d
commit 2ce6fc1
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 19 deletions.
diff --git a/src/components/Main.jsx b/src/components/Main.jsx
@@ -23,6 +23,14 @@ export default function Main() {
     );
   };
 
+  const editToDo = (id, newToDoText) => {
+    setToDoItems(
+      toDoItems.map((item) =>
+        item.id === id ? { ...item, text: newToDoText } : item
+      )
+    );
+  };
+
   const deleteToDo = (id) => {
     setToDoItems(toDoItems.filter((item) => item.id !== id));
   };
@@ -33,6 +41,7 @@ export default function Main() {
       <ToDoList
         toDoItems={toDoItems}
         checkToDo={checkToDo}
+        editToDo={editToDo}
         deleteToDo={deleteToDo}
       />
     </main>

diff --git a/src/components/ToDoItem.jsx b/src/components/ToDoItem.jsx
@@ -1,12 +1,26 @@
-export default function ToDoItem({ item, checkToDo, deleteToDo }) {
+import { useState } from "react";
+
+export default function ToDoItem({ item, checkToDo, deleteToDo, editToDo }) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [newToDoText, setNewToDoText] = useState(item.text);
+
+  const handleEdit = () => {
+    setIsEditing(true);
+  };
+
+  const handleSave = () => {
+    editToDo(item.id, newToDoText);
+    setIsEditing(false);
+  };
+
   return (
     <li
       className={`w-full p-px rounded bg-gradient-to-r from-primary to-secondary ${
         item.completed ? "opacity-50" : ""
       }`}
     >
-      <div className="w-full p-4 flex justify-between items-center rounded bg-bg bg-opacity-90">
-        <div className="flex justify-between items-center">
+      <div className="w-full p-4 flex justify-around items-center gap-2 rounded bg-bg bg-opacity-90">
+        <div className="flex justify-center items-center">
           <button
             className="w-8 h-8 border border-text border-opacity-50 rounded bg-primary bg-opacity-50"
             aria-label="check"
@@ -17,26 +31,51 @@ export default function ToDoItem({ item, checkToDo, deleteToDo }) {
             ) : null}
           </button>
         </div>
-        <span
-          className={`text-text text-opacity-90 ${
-            item.completed ? "line-through" : ""
-          }`}
-        >
-          {item.text}
-        </span>
-        <div className="flex justify-center items-center gap-4">
-          <button
-            className="w-8 h-8 border border-text border-opacity-50 rounded bg-secondary bg-opacity-50"
-            aria-label="edit"
-          >
-            <i class="fa-solid fa-pen opacity-90"></i>
-          </button>
+        {isEditing ? (
+          <>
+            <input
+              type="text"
+              value={newToDoText}
+              onChange={(e) => setNewToDoText(e.target.value)}
+              className="w-full flex justify-center items-center rounded outline-none text-text text-opacity-90 bg-transparent placeholder:text-text placeholder:text-opacity-50"
+            />
+            <div className="flex justify-center items-center">
+              <button
+                className="w-8 h-8 border border-text border-opacity-50 rounded bg-secondary bg-opacity-50"
+                aria-label="save"
+                onClick={handleSave}
+              >
+                <i className="fa-solid fa-save opacity-90"></i>
+              </button>
+            </div>
+          </>
+        ) : (
+          <>
+            <span
+              className={`w-full flex justify-center items-center text-text text-opacity-90 ${
+                item.completed ? "line-through" : ""
+              }`}
+            >
+              {item.text}
+            </span>
+            <div className="flex justify-center items-center">
+              <button
+                className="w-8 h-8 border border-text border-opacity-50 rounded bg-secondary bg-opacity-50"
+                aria-label="edit"
+                onClick={handleEdit}
+              >
+                <i className="fa-solid fa-pen opacity-90"></i>
+              </button>
+            </div>
+          </>
+        )}
+        <div className="flex justify-center items-center">
           <button
             className="w-8 h-8 border border-text border-opacity-50 rounded bg-delete bg-opacity-50"
             aria-label="delete"
             onClick={() => deleteToDo(item.id)}
           >
-            <i class="fa-solid fa-trash opacity-90"></i>
+            <i className="fa-solid fa-trash opacity-90"></i>
           </button>
         </div>
       </div>

diff --git a/src/components/ToDoList.jsx b/src/components/ToDoList.jsx
@@ -1,13 +1,19 @@
 import ToDoItem from "./ToDoItem";
 
-export default function ToDoList({ toDoItems, checkToDo, deleteToDo }) {
+export default function ToDoList({
+  toDoItems,
+  checkToDo,
+  editToDo,
+  deleteToDo,
+}) {
   return (
     <ul className="w-full flex flex-col justify-center items-center gap-4">
       {toDoItems.map((item) => (
         <ToDoItem
           key={item.id}
           item={item}
           checkToDo={checkToDo}
+          editToDo={editToDo}
           deleteToDo={deleteToDo}
         />
       ))}