Lesson 4 1

package.json

@@ -3,8 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "dotenv": "^16.3.1",
+    "fs": "^0.0.1-security",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.0",
     "react-scripts": "5.0.1"
   },
   "scripts": {

src/App.js

@@ -1,47 +1,91 @@
-import React, { useEffect, useState } from 'react';
-import AddTodoForm from './AddTodoForm';
-import TodoList from './TodoList';
+import { useEffect, useState } from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import AddTodoForm from './components/AddTodoForm';
+import TodoList from './components/TodoList';
+
+function App() {
+
+  const [todoList, setTodoList] = useState([])
+  const [isLoading, setIsLoading] = useState(true)
 
-const useSemiPersistentState = () => {
-  const [todoList, setTodoList] = useState(JSON.parse(localStorage.getItem("savedTodoList"))??[])
-
-  useEffect(() => {
-    localStorage.setItem("savedTodoList", JSON.stringify(todoList))
-  }, [todoList])
 
-  return [todoList, setTodoList]
+  const fetchData = async () => {
+    const url = `https://api.airtable.com/v0/${process.env.REACT_APP_AIRTABLE_BASE_ID}/${process.env.REACT_APP_TABLE_NAME}`
+
+    const options = {
+      method: 'GET',
+      headers: {
+        Authorization:`Bearer ${process.env.REACT_APP_AIRTABLE_API_TOKEN}`
+    }
+    }
+
+    try {
+      const response = await fetch(url, options)
+      if(!response.ok) {
+        throw new Error(`Error: ${response.status}`)
+      }
+      const data = await response.json()
+
+      const todos = data.records.map((todo) => todo = {title: todo.fields.title, id: todo.id })
+      setTodoList(todos)
+      setIsLoading(false)
+    } catch (error) {
+      console.log(error)
+    }
+
 }
 
-function App() {
+  useEffect(() => {
+    fetchData();
+  }, [])
+
+
+  useEffect(() => {
+    if (!isLoading) {
+      localStorage.setItem("savedTodoList", JSON.stringify(todoList))
+    }
+  }, [isLoading, todoList])
 
-  const [value, setValue] = useSemiPersistentState()
 
   const addTodo = (newTodo) => {
-    setValue([...value, newTodo])
+    setTodoList([...todoList, newTodo])
   }
 
 
   const removeTodo = (id) => {
 
-    const index = value.findIndex(todo => todo.id === id)
+    const index = todoList.findIndex(todo => todo.id === id)
 
     if(index !== -1) {
-      const updatedList = [...value]
+      const updatedList = [...todoList]
       updatedList.splice(index, 1)
-      setValue(updatedList)
+      setTodoList(updatedList)
     }
   }
 
 
 
   return (
-    <>
-      <header>
-        <h1>Todo List</h1>
-      </header>
-      <AddTodoForm onAddTodo={addTodo}/>
-      <TodoList todoState={value} onRemoveTodo={removeTodo}/>
-    </>
+    <div style={{backgroundColor: 'pink', paddingBottom: '50%'}}>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<>
+          <header style={{ display: 'flex', justifyContent: 'center', fontFamily: 'monospace', color: 'blue', fontSize: '30px'}}>
+            <h1>Todo List</h1>
+          </header>
+          <AddTodoForm onAddTodo={addTodo} />
+          {isLoading ? (
+            <p>Loading...</p>
+          ) : (
+            <TodoList todoState={todoList} onRemoveTodo={removeTodo} />
+          )}
+        </>} />
+        <Route path='/new' element={<>
+          <h1>New Todo List</h1>
+        </>} />
+        </Routes>
+      </BrowserRouter>
+    </div>
   );
 }
 

src/AddTodoForm.js → src/components/AddTodoForm.js

@@ -1,5 +1,7 @@
 import React, { useState } from "react";
 import InputWithLabel from "./InputWithLabel";
+import style from './AddTodoForm.module.css'
+import PropTypes from 'prop-types'
 
 const AddTodoForm = ({ onAddTodo }) => {
 
@@ -20,13 +22,17 @@ const AddTodoForm = ({ onAddTodo }) => {
     }
 
     return (
-        <div>
+        <div className={style.divForm}>
             <form onSubmit={handleAddTodo}>
                 <InputWithLabel todoTitle={todoTitle} handleTitleChange={handleTitleChange}>Title</InputWithLabel>
-                <button type="submit">Add</button>
+                <button type="submit" className={style.addButton}>Add</button>
             </form>
         </div>
     )
 }
 
+AddTodoForm.prototype = {
+    onAddTodo: PropTypes.func
+}
+
 export default AddTodoForm;

src/components/AddTodoForm.module.css

@@ -0,0 +1,9 @@
+.divForm {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 1%;
+}
+
+.addButton {
+    background-color: white;
+}

src/components/InputWithLabel.js

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from "react";
+import PropTypes from 'prop-types'
+
+const InputWithLabel = (props) => {
+
+    const inputRef = useRef();
+
+    useEffect(() => {
+        inputRef.current.focus()
+    })
+
+    return (
+        <>
+                <label htmlFor="todoTitle" >{props.children}</label>
+                <input id="todoTitle" name="title" value={props.todoTitle} onChange={props.handleTitleChange} ref={inputRef}/>
+        </>
+    )
+}
+
+InputWithLabel.prototype = {
+    todoTitle: PropTypes.node,
+    handleTitleChange: PropTypes.node,
+    children: PropTypes.node
+
+}
+
+export default InputWithLabel

src/TodoList.js → src/components/TodoList.js

@@ -1,11 +1,13 @@
 import React from "react";
 import TodoListItem from "./TodoListItem";
+import style from './TodoList.module.css'
+import PropTypes from 'prop-types'
 
 const TodoList = ({ todoState, onRemoveTodo }) => {
 
 
     return (
-        <div>
+        <div className={style.divTodoList}>
             <ul>
                 {todoState?.map((todo) => {
                     return (
@@ -17,4 +19,9 @@ const TodoList = ({ todoState, onRemoveTodo }) => {
     )
 }
 
+TodoList.prototype = {
+    todoState: PropTypes.array,
+    onRemoveTodo: PropTypes.func
+}
+
 export default TodoList

src/components/TodoList.module.css

@@ -0,0 +1,4 @@
+.divTodoList {
+    display: flex;
+    justify-content: center;
+}

src/components/TodoListItem.js

@@ -0,0 +1,20 @@
+import React from "react";
+import style from "./TodoListItem.module.css"
+import PropTypes from 'prop-types'
+
+const TodoListItem = ({ todo, onRemoveTodo }) => {
+
+    return (
+        <li className={style.listItem}>
+            {todo.title + ' '}
+            <button type="button" className={style.removeButton} onClick={() => onRemoveTodo(todo.id)}>Remove</button>
+        </li>
+    )
+}
+
+TodoListItem.prototype = {
+    todo: PropTypes.string,
+    onRemoveTodo: PropTypes.func
+}
+
+export default TodoListItem