todoapp done

Week-13-Intro_to_React_Webpack_Components_and_JSX/src/App.jsx

@@ -1,12 +1,30 @@
 import { NewTodoForm } from "./NewTodoForm"
+import { ToDoList } from "./ToDoList"
 import "./styles.css"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 
 export default function App(){
 
-  const [todos, setTodos] = useState([])
+const [todos, setTodos] = useState(() => {
+  const localValue = localStorage.getItem("ITEMS")
+  if (localValue == null) return []
 
+  return JSON.parse(localValue)
+})
 
+useEffect(() => {
+localStorage.setItem("ITEMS", JSON.stringify(todos))
+}, [todos])
+
+
+function addTodo(title){
+  setTodos(currentTodos =>{
+    return [
+      ...currentTodos,
+      {id: crypto.randomUUID(), title, completed: false},
+    ]
+  })
+}
 
   function toggleTodo(id, completed){
     setTodos(currentTodos => {
@@ -28,24 +46,8 @@ export default function App(){
 
   return (
   <>
-  <NewTodoForm />
+  <NewTodoForm onSubmit={addTodo} />
   <h1 className="header">Todo List</h1>
-    <ul className="list">
-      {todos.length === 0 && "No Todos"}
-      {todos.map(todo =>{
-        return (
-        <li key={todo.id}>
-        <label>
-          <input type="checkbox" checked={todo.completed}
-          onChange={e => toggleTodo(todo.id, e.target.checked)}/>
-          {todo.title}
-        </label>
-        <button onClick={() => deleteTodo(todo.id)}
-        className="btn btn-danger">Delete</button>
-      </li>
-        )
-      })}
-
-    </ul>
+  <ToDoList todos={todos} toggleTodo={toggleTodo} deleteTodo={deleteTodo}/>  
   </>
 )}

Week-13-Intro_to_React_Webpack_Components_and_JSX/src/NewTodoForm.jsx

@@ -1,18 +1,14 @@
-import { useState } from "reactnp"
-
-export function NewTodoForm(){
+import { useState } from "react"
 
+export function NewTodoForm({ onSubmit }){
+
     const [newItem, setNewItem] = useState("")
 
     function handleSubmit(e) {
         e.preventDefault()
-
-        setTodos(currentTodos =>{
-          return [
-            ...currentTodos,
-            {id: crypto.randomUUID(), title: newItem, completed: false},
-          ]
-        })
+        if(newItem === "") return
+
+        onSubmit(newItem)
 
         setNewItem("")
       }

Week-13-Intro_to_React_Webpack_Components_and_JSX/src/ToDoItem.jsx

@@ -0,0 +1,15 @@
+export function ToDoItem({completed, id, title, toggleTodo, deleteTodo}){
+    return(
+        <li>
+        <label>
+          <input type="checkbox" checked={completed}
+          onChange={e => toggleTodo(id, e.target.checked)}
+          />
+          {title}
+        </label>
+        <button 
+        onClick={() => deleteTodo(id)}
+        className="btn btn-danger">Delete</button>
+      </li>
+    )
+}

Week-13-Intro_to_React_Webpack_Components_and_JSX/src/ToDoList.jsx

@@ -0,0 +1,14 @@
+import { ToDoItem } from "./ToDoItem"
+
+export function ToDoList({ todos, toggleTodo, deleteTodo }) {
+    return(
+    <ul className="list">
+      {todos.length === 0 && "No Todos"}
+      {todos.map(todo =>{
+        return (
+        <ToDoItem {...todo} key={todo.id} toggleTodo={toggleTodo} deleteTodo={deleteTodo} />
+        )
+      })}
+    </ul>
+    )
+}