Update App.js ready

todo_list/src/App.js

@@ -1,28 +1,117 @@
-import React, {useState} from "react";
+import React from "react";
 import "./App.css";
+
 const App = () => {
-  const [todos, setTodos] = useState([]);
-
-  // Add the handlesubmit code here
-
-
-  // Add the deleteToDo code here
-
-
-  // Add the toggleComplete code here
-
-
-  // Add the submitEdits code here
-
-
-return(
-<div className ="App">
-<h1>Todo List</h1>
-<form>
-<input type ="text" align ="right" id= 'todoAdd'/>
-<button type ="submit">Add Todo</button>
-</form>
-</div>
-);
-};
+    const [todos, setTodos] = React.useState([]);
+
+    const [todoEditing, setTodoEditing] = React.useState(null);
+
+    useEffect(() => {
+    const json = localStorage.getItem("todos");
+    const loadedTodos = JSON.parse(json);
+    if (loadedTodos) {
+      setTodos(loadedTodos);
+    }
+  }, []);
+
+useEffect(() => {
+    if(todos.length > 0) {
+        const json = JSON.stringify(todos);
+        localStorage.setItem("todos", json);
+    }
+  }, [todos]);
+
+
+  function handleSubmit(e) {
+    e.preventDefault();
+
+    let todo = document.getElementById('todoAdd').value
+    const newTodo = {
+      id: new Date().getTime(),
+      text: todo.trim(),
+      completed: false,
+    };
+    if (newTodo.text.length > 0 ) {
+        setTodos([...todos].concat(newTodo));
+    } else {
+
+        alert("Enter Valid Task");
+    }
+    document.getElementById('todoAdd').value = ""
+  }
+  function deleteTodo(id) {
+    let updatedTodos = [...todos].filter((todo) => todo.id !== id);
+    setTodos(updatedTodos);
+  }
+
+  function toggleComplete(id) {
+    let updatedTodos = [...todos].map((todo) => {
+      if (todo.id === id) {
+        todo.completed = !todo.completed;
+      }
+      return todo;
+    });
+    setTodos(updatedTodos);
+  }
+
+  function submitEdits(newtodo) {
+    const updatedTodos = [...todos].map((todo) => {
+      if (todo.id === newtodo.id) {
+        todo.text = document.getElementById(newtodo.id).value;
+        }
+        return todo;
+      });
+      setTodos(updatedTodos);
+      setTodoEditing(null);
+    }
+
+    return (
+        <div id="todo-list">
+          <h1>Todo List</h1>
+          <form onSubmit={handleSubmit}>
+            <input
+              type="text"
+              id = 'todoAdd'
+            />
+            <button type="submit">Add Todo</button>
+          </form>
+        {todos.map((todo) => (
+
+          <div key={todo.id} className="todo">
+            <div className="todo-text">
+              {/* Add checkbox for toggle complete */}
+              <input
+                type="checkbox"
+                id="completed"
+                checked={todo.completed}
+                onChange={() => toggleComplete(todo.id)}
+              />
+              {/* if it is edit mode, display input box, else display text */}
+              {todo.id === todoEditing ?
+                (<input
+                  type="text"
+                  id = {todo.id}
+                  defaultValue={todo.text}
+                />) :
+                (<div>{todo.text}</div>)
+              }
+            </div>
+            <div className="todo-actions">
+              {/* if it is edit mode, allow submit edit, else allow edit */}
+              {todo.id === todoEditing ?
+              (
+                <button onClick={() => submitEdits(todo)}>Submit Edits</button>
+              ) :
+              (
+                <button onClick={() => setTodoEditing(todo.id)}>Edit</button>
+              )}
+
+              <button onClick={() => deleteTodo(todo.id)}>Delete</button>
+             </div>
+          </div>
+        ))}
+        </div>
+      );
+    };
+
 export default App;