From 6162a5fdf920dba41e1709ddbb57bc8e50f6923d Mon Sep 17 00:00:00 2001 From: rebecavg Date: Tue, 5 Dec 2023 14:17:20 -0500 Subject: [PATCH 1/8] finished exercise --- src/App.js | 49 ++++++++++++++++++++++++++++++++------------- src/TodoListItem.js | 3 +-- 2 files changed, 36 insertions(+), 16 deletions(-) diff --git a/src/App.js b/src/App.js index db95f95..d7ea436 100644 --- a/src/App.js +++ b/src/App.js @@ -2,33 +2,49 @@ import React, { useEffect, useState } from 'react'; import AddTodoForm from './AddTodoForm'; import TodoList from './TodoList'; -const useSemiPersistentState = () => { - const [todoList, setTodoList] = useState(JSON.parse(localStorage.getItem("savedTodoList"))??[]) - + +function App() { + + const [todoList, setTodoList] = useState([]) + const [isLoading, setIsLoading] = useState(true) + useEffect(() => { - localStorage.setItem("savedTodoList", JSON.stringify(todoList)) - }, [todoList]) + const fetchData = async () => { + const result = await new Promise((resolve, reject) => { + setTimeout(() => { + const data = { todoList: [] }; - return [todoList, setTodoList] -} + resolve(data); + }, 2000); + }).then((result) => {setTodoList(result.todoList) + setIsLoading(false) + }) + return result + } -function App() { + fetchData(); + }, [todoList]) + + 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) } } @@ -40,7 +56,12 @@ function App() {

Todo List

- + { + isLoading ? +

Loading...

+ : + + } ); } diff --git a/src/TodoListItem.js b/src/TodoListItem.js index 8c9b347..79ef827 100644 --- a/src/TodoListItem.js +++ b/src/TodoListItem.js @@ -4,8 +4,7 @@ const TodoListItem = ({ todo, onRemoveTodo }) => { return (
  • - {todo.title} - + {todo.title + ' '}
    • ) From a7ffc7ec64dd07c56a2f5ee910aa72927ebcaaeb Mon Sep 17 00:00:00 2001 From: rebecavg Date: Wed, 13 Dec 2023 15:32:27 -0500 Subject: [PATCH 2/8] fixing issue --- src/App.js | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/src/App.js b/src/App.js index d7ea436..f274147 100644 --- a/src/App.js +++ b/src/App.js @@ -8,22 +8,17 @@ function App() { const [todoList, setTodoList] = useState([]) const [isLoading, setIsLoading] = useState(true) - useEffect(() => { const fetchData = async () => { const result = await new Promise((resolve, reject) => { setTimeout(() => { - const data = { todoList: [] }; - - resolve(data); + setIsLoading(false) }, 2000); - }).then((result) => {setTodoList(result.todoList) - setIsLoading(false) - }) + }).then((result) => {setTodoList(result.todoList)}) return result } fetchData(); - }, [todoList]) + useEffect(() => { if (!isLoading) { From e813000ad3e0c316bd795e55dc23fefdf94054e2 Mon Sep 17 00:00:00 2001 From: rebecavg Date: Thu, 14 Dec 2023 14:29:25 -0500 Subject: [PATCH 3/8] finished exercise --- package-lock.json | 53 +++++++++++++++++++++++++++++++++++++++++++---- package.json | 2 ++ src/App.js | 39 +++++++++++++++++++++++++--------- 3 files changed, 80 insertions(+), 14 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1ac1f0d..3b96904 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,8 @@ "name": "todo-react", "version": "0.1.0", "dependencies": { + "dotenv": "^16.3.1", + "fs": "^0.0.1-security", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1" @@ -6351,11 +6353,14 @@ } }, "node_modules/dotenv": { - "version": "10.0.0", - "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz", - "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==", + "version": "16.3.1", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz", + "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==", "engines": { - "node": ">=10" + "node": ">=12" + }, + "funding": { + "url": "https://github.com/motdotla/dotenv?sponsor=1" } }, "node_modules/dotenv-expand": { @@ -7867,6 +7872,11 @@ "node": ">= 0.6" } }, + "node_modules/fs": { + "version": "0.0.1-security", + "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz", + "integrity": "sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w==" + }, "node_modules/fs-extra": { "version": "10.1.0", "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz", @@ -11122,6 +11132,17 @@ "jiti": "bin/jiti.js" } }, + "node_modules/js": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/js/-/js-0.1.0.tgz", + "integrity": "sha512-ZBbGYOpact8QAH9RprFWL4RAESYwbDodxiuDjOnzwzzk9pBzKycoifGuUrHHcDixE/eLMKPHRaXenTgu1qXBqA==", + "dependencies": { + "commander": "~1.1.1" + }, + "bin": { + "js": "bin/js" + } + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -11139,6 +11160,17 @@ "js-yaml": "bin/js-yaml.js" } }, + "node_modules/js/node_modules/commander": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-1.1.1.tgz", + "integrity": "sha512-71Rod2AhcH3JhkBikVpNd0pA+fWsmAaVoti6OR38T76chA7vE3pSerS0Jor4wDw+tOueD2zLVvFOw5H0Rcj7rA==", + "dependencies": { + "keypress": "0.1.x" + }, + "engines": { + "node": ">= 0.6.x" + } + }, "node_modules/jsdom": { "version": "16.7.0", "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-16.7.0.tgz", @@ -11286,6 +11318,11 @@ "node": ">=4.0" } }, + "node_modules/keypress": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/keypress/-/keypress-0.1.0.tgz", + "integrity": "sha512-x0yf9PL/nx9Nw9oLL8ZVErFAk85/lslwEP7Vz7s5SI1ODXZIgit3C5qyWjw4DxOuO/3Hb4866SQh28a1V1d+WA==" + }, "node_modules/keyv": { "version": "4.5.3", "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.3.tgz", @@ -14037,6 +14074,14 @@ } } }, + "node_modules/react-scripts/node_modules/dotenv": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz", + "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==", + "engines": { + "node": ">=10" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index 1420890..0d20a76 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,8 @@ "version": "0.1.0", "private": true, "dependencies": { + "dotenv": "^16.3.1", + "fs": "^0.0.1-security", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1" diff --git a/src/App.js b/src/App.js index f274147..ee91723 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,42 @@ -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import AddTodoForm from './AddTodoForm'; import TodoList from './TodoList'; - function App() { const [todoList, setTodoList] = useState([]) const [isLoading, setIsLoading] = useState(true) - const fetchData = async () => { - const result = await new Promise((resolve, reject) => { - setTimeout(() => { - setIsLoading(false) - }, 2000); - }).then((result) => {setTodoList(result.todoList)}) - return result - } + 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) + } + +} + + useEffect(() => { fetchData(); + }, []) useEffect(() => { From 64f35711b7982c6efce012593ec7c87bcdb13aff Mon Sep 17 00:00:00 2001 From: rebecavg Date: Thu, 14 Dec 2023 15:35:03 -0500 Subject: [PATCH 4/8] finished exercise --- package-lock.json | 66 ++++++++++++++++++++++++++++------------------- package.json | 1 + src/App.js | 31 +++++++++++++--------- 3 files changed, 59 insertions(+), 39 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3b96904..fa7231f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "fs": "^0.0.1-security", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.21.0", "react-scripts": "5.0.1" } }, @@ -3220,6 +3221,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.14.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.14.0.tgz", + "integrity": "sha512-WOHih+ClN7N8oHk9N4JUiMxQJmRVaOxcg8w7F/oHUXzJt920ekASLI/7cYX8XkntDWRhLZtsk6LbGrkgOAvi5A==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -11132,17 +11141,6 @@ "jiti": "bin/jiti.js" } }, - "node_modules/js": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/js/-/js-0.1.0.tgz", - "integrity": "sha512-ZBbGYOpact8QAH9RprFWL4RAESYwbDodxiuDjOnzwzzk9pBzKycoifGuUrHHcDixE/eLMKPHRaXenTgu1qXBqA==", - "dependencies": { - "commander": "~1.1.1" - }, - "bin": { - "js": "bin/js" - } - }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -11160,17 +11158,6 @@ "js-yaml": "bin/js-yaml.js" } }, - "node_modules/js/node_modules/commander": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/commander/-/commander-1.1.1.tgz", - "integrity": "sha512-71Rod2AhcH3JhkBikVpNd0pA+fWsmAaVoti6OR38T76chA7vE3pSerS0Jor4wDw+tOueD2zLVvFOw5H0Rcj7rA==", - "dependencies": { - "keypress": "0.1.x" - }, - "engines": { - "node": ">= 0.6.x" - } - }, "node_modules/jsdom": { "version": "16.7.0", "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-16.7.0.tgz", @@ -11318,11 +11305,6 @@ "node": ">=4.0" } }, - "node_modules/keypress": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/keypress/-/keypress-0.1.0.tgz", - "integrity": "sha512-x0yf9PL/nx9Nw9oLL8ZVErFAk85/lslwEP7Vz7s5SI1ODXZIgit3C5qyWjw4DxOuO/3Hb4866SQh28a1V1d+WA==" - }, "node_modules/keyv": { "version": "4.5.3", "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.3.tgz", @@ -14002,6 +13984,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.0.tgz", + "integrity": "sha512-hGZ0HXbwz3zw52pLZV3j3+ec+m/PQ9cTpBvqjFQmy2XVUWGn5MD+31oXHb6dVTxYzmAeaiUBYjkoNz66n3RGCg==", + "dependencies": { + "@remix-run/router": "1.14.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.21.0.tgz", + "integrity": "sha512-1dUdVj3cwc1npzJaf23gulB562ESNvxf7E4x8upNJycqyUm5BRRZ6dd3LrlzhtLaMrwOCO8R0zoiYxdaJx4LlQ==", + "dependencies": { + "@remix-run/router": "1.14.0", + "react-router": "6.21.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/package.json b/package.json index 0d20a76..fe8596f 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "fs": "^0.0.1-security", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.21.0", "react-scripts": "5.0.1" }, "scripts": { diff --git a/src/App.js b/src/App.js index ee91723..ab4b379 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,5 @@ import { useEffect, useState } from 'react'; +import { BrowserRouter, Routes, Route } from 'react-router-dom'; import AddTodoForm from './AddTodoForm'; import TodoList from './TodoList'; @@ -65,18 +66,24 @@ function App() { return ( - <> -
    -

    Todo List

    -
    - - { - isLoading ? -

    Loading...

    - : - - } - + + + +
    +

    Todo List

    +
    + + {isLoading ? ( +

    Loading...

    + ) : ( + + )} + } /> + +

    New Todo List

    + } /> +     +     ); } From 3c37a56b1ff9d93d16fadc10e43980c3403afb63 Mon Sep 17 00:00:00 2001 From: rebecavg Date: Tue, 16 Jan 2024 20:48:38 -0500 Subject: [PATCH 5/8] finished exercise --- src/AddTodoForm.js | 5 +++-- src/AddTodoForm.module.css | 9 +++++++++ src/App.js | 38 +++++++++++++++++++------------------ src/InputWithLabel.js | 4 ++-- src/TodoList.js | 3 ++- src/TodoList.module.css | 4 ++++ src/TodoListItem.js | 5 +++-- src/TodoListItem.module.css | 8 ++++++++ 8 files changed, 51 insertions(+), 25 deletions(-) create mode 100644 src/AddTodoForm.module.css create mode 100644 src/TodoList.module.css create mode 100644 src/TodoListItem.module.css diff --git a/src/AddTodoForm.js b/src/AddTodoForm.js index b1fc031..644ae2b 100644 --- a/src/AddTodoForm.js +++ b/src/AddTodoForm.js @@ -1,5 +1,6 @@ import React, { useState } from "react"; import InputWithLabel from "./InputWithLabel"; +import style from './AddTodoForm.module.css' const AddTodoForm = ({ onAddTodo }) => { @@ -20,10 +21,10 @@ const AddTodoForm = ({ onAddTodo }) => { } return ( -
    +
    Title - +
    ) diff --git a/src/AddTodoForm.module.css b/src/AddTodoForm.module.css new file mode 100644 index 0000000..9165ce4 --- /dev/null +++ b/src/AddTodoForm.module.css @@ -0,0 +1,9 @@ +.div { + display: flex; + justify-content: center; + margin-bottom: 1%; +} + +.button { + background-color: white; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index ab4b379..d44feee 100644 --- a/src/App.js +++ b/src/App.js @@ -66,24 +66,26 @@ function App() { return ( - - - -
    -

    Todo List

    -
    - - {isLoading ? ( -

    Loading...

    - ) : ( - - )} - } /> - -

    New Todo List

    - } /> -     -     +
    + + + +
    +

    Todo List

    +
    + + {isLoading ? ( +

    Loading...

    + ) : ( + + )} + } /> + +

    New Todo List

    + } /> +     +     +
    ); } diff --git a/src/InputWithLabel.js b/src/InputWithLabel.js index d5149d6..e9df21d 100644 --- a/src/InputWithLabel.js +++ b/src/InputWithLabel.js @@ -10,8 +10,8 @@ const InputWithLabel = (props) => { return ( <> - - + + ) } diff --git a/src/TodoList.js b/src/TodoList.js index 32428ad..f77ba6f 100644 --- a/src/TodoList.js +++ b/src/TodoList.js @@ -1,11 +1,12 @@ import React from "react"; import TodoListItem from "./TodoListItem"; +import style from './TodoList.module.css' const TodoList = ({ todoState, onRemoveTodo }) => { return ( -
    +
      {todoState?.map((todo) => { return ( diff --git a/src/TodoList.module.css b/src/TodoList.module.css new file mode 100644 index 0000000..0b86009 --- /dev/null +++ b/src/TodoList.module.css @@ -0,0 +1,4 @@ +.div { + display: flex; + justify-content: center; +} \ No newline at end of file diff --git a/src/TodoListItem.js b/src/TodoListItem.js index 79ef827..07ccf83 100644 --- a/src/TodoListItem.js +++ b/src/TodoListItem.js @@ -1,11 +1,12 @@ import React from "react"; +import style from "./TodoListItem.module.css" const TodoListItem = ({ todo, onRemoveTodo }) => { return ( -
    • +
    • {todo.title + ' '} - +
      • ) } diff --git a/src/TodoListItem.module.css b/src/TodoListItem.module.css new file mode 100644 index 0000000..bce1b81 --- /dev/null +++ b/src/TodoListItem.module.css @@ -0,0 +1,8 @@ +.listItem { + color: blue !important; + margin-bottom: 10%; +} + +.button { + background-color: white; +} \ No newline at end of file From b5aaafda48b6130d59fceeeab654ff5eaadeb826 Mon Sep 17 00:00:00 2001 From: rebecavg Date: Wed, 17 Jan 2024 10:09:26 -0500 Subject: [PATCH 6/8] correct changes --- src/AddTodoForm.js | 4 ++-- src/AddTodoForm.module.css | 4 ++-- src/TodoList.js | 2 +- src/TodoList.module.css | 2 +- src/TodoListItem.js | 2 +- src/TodoListItem.module.css | 2 +- 6 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/AddTodoForm.js b/src/AddTodoForm.js index 644ae2b..1916aaf 100644 --- a/src/AddTodoForm.js +++ b/src/AddTodoForm.js @@ -21,10 +21,10 @@ const AddTodoForm = ({ onAddTodo }) => { } return ( -
      +
      Title - +
      ) diff --git a/src/AddTodoForm.module.css b/src/AddTodoForm.module.css index 9165ce4..4fd2fd5 100644 --- a/src/AddTodoForm.module.css +++ b/src/AddTodoForm.module.css @@ -1,9 +1,9 @@ -.div { +.divForm { display: flex; justify-content: center; margin-bottom: 1%; } -.button { +.addButton { background-color: white; } \ No newline at end of file diff --git a/src/TodoList.js b/src/TodoList.js index f77ba6f..38693ed 100644 --- a/src/TodoList.js +++ b/src/TodoList.js @@ -6,7 +6,7 @@ const TodoList = ({ todoState, onRemoveTodo }) => { return ( -
      +
        {todoState?.map((todo) => { return ( diff --git a/src/TodoList.module.css b/src/TodoList.module.css index 0b86009..282b5ef 100644 --- a/src/TodoList.module.css +++ b/src/TodoList.module.css @@ -1,4 +1,4 @@ -.div { +.divTodoList { display: flex; justify-content: center; } \ No newline at end of file diff --git a/src/TodoListItem.js b/src/TodoListItem.js index 07ccf83..0c9ea0e 100644 --- a/src/TodoListItem.js +++ b/src/TodoListItem.js @@ -6,7 +6,7 @@ const TodoListItem = ({ todo, onRemoveTodo }) => { return (
      • {todo.title + ' '} - +
        • ) } diff --git a/src/TodoListItem.module.css b/src/TodoListItem.module.css index bce1b81..fff1a92 100644 --- a/src/TodoListItem.module.css +++ b/src/TodoListItem.module.css @@ -3,6 +3,6 @@ margin-bottom: 10%; } -.button { +.removeButton { background-color: white; } \ No newline at end of file From 43883446cb9c24ffb362255e3fe784f2e3725fc3 Mon Sep 17 00:00:00 2001 From: rebecavg Date: Thu, 25 Jan 2024 16:59:30 -0500 Subject: [PATCH 7/8] finished exercise --- package-lock.json | 1 + package.json | 1 + src/App.js | 4 ++-- src/{ => components}/AddTodoForm.js | 5 +++++ src/{ => components}/AddTodoForm.module.css | 0 src/{ => components}/InputWithLabel.js | 5 +++++ src/{ => components}/TodoList.js | 6 ++++++ src/{ => components}/TodoList.module.css | 0 src/{ => components}/TodoListItem.js | 6 ++++++ src/{ => components}/TodoListItem.module.css | 0 10 files changed, 26 insertions(+), 2 deletions(-) rename src/{ => components}/AddTodoForm.js (90%) rename src/{ => components}/AddTodoForm.module.css (100%) rename src/{ => components}/InputWithLabel.js (82%) rename src/{ => components}/TodoList.js (80%) rename src/{ => components}/TodoList.module.css (100%) rename src/{ => components}/TodoListItem.js (75%) rename src/{ => components}/TodoListItem.module.css (100%) diff --git a/package-lock.json b/package-lock.json index fa7231f..30fa57f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "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", diff --git a/package.json b/package.json index fe8596f..5cbc295 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "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", diff --git a/src/App.js b/src/App.js index d44feee..841d10c 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react'; import { BrowserRouter, Routes, Route } from 'react-router-dom'; -import AddTodoForm from './AddTodoForm'; -import TodoList from './TodoList'; +import AddTodoForm from './components/AddTodoForm'; +import TodoList from './components/TodoList'; function App() { diff --git a/src/AddTodoForm.js b/src/components/AddTodoForm.js similarity index 90% rename from src/AddTodoForm.js rename to src/components/AddTodoForm.js index 1916aaf..5880d3c 100644 --- a/src/AddTodoForm.js +++ b/src/components/AddTodoForm.js @@ -1,6 +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 }) => { @@ -30,4 +31,8 @@ const AddTodoForm = ({ onAddTodo }) => { ) } +AddTodoForm.prototype = { + onAddTodo: PropTypes.func +} + export default AddTodoForm; \ No newline at end of file diff --git a/src/AddTodoForm.module.css b/src/components/AddTodoForm.module.css similarity index 100% rename from src/AddTodoForm.module.css rename to src/components/AddTodoForm.module.css diff --git a/src/InputWithLabel.js b/src/components/InputWithLabel.js similarity index 82% rename from src/InputWithLabel.js rename to src/components/InputWithLabel.js index e9df21d..d54050c 100644 --- a/src/InputWithLabel.js +++ b/src/components/InputWithLabel.js @@ -1,4 +1,5 @@ import { useEffect, useRef } from "react"; +import PropTypes from 'prop-types' const InputWithLabel = (props) => { @@ -16,4 +17,8 @@ const InputWithLabel = (props) => { ) } +InputWithLabel.prototype = { + props: PropTypes.node +} + export default InputWithLabel diff --git a/src/TodoList.js b/src/components/TodoList.js similarity index 80% rename from src/TodoList.js rename to src/components/TodoList.js index 38693ed..40732cc 100644 --- a/src/TodoList.js +++ b/src/components/TodoList.js @@ -1,6 +1,7 @@ import React from "react"; import TodoListItem from "./TodoListItem"; import style from './TodoList.module.css' +import PropTypes from 'prop-types' const TodoList = ({ todoState, onRemoveTodo }) => { @@ -18,4 +19,9 @@ const TodoList = ({ todoState, onRemoveTodo }) => { ) } +TodoList.prototype = { + todoState: PropTypes.array, + onRemoveTodo: PropTypes.func +} + export default TodoList \ No newline at end of file diff --git a/src/TodoList.module.css b/src/components/TodoList.module.css similarity index 100% rename from src/TodoList.module.css rename to src/components/TodoList.module.css diff --git a/src/TodoListItem.js b/src/components/TodoListItem.js similarity index 75% rename from src/TodoListItem.js rename to src/components/TodoListItem.js index 0c9ea0e..013311a 100644 --- a/src/TodoListItem.js +++ b/src/components/TodoListItem.js @@ -1,5 +1,6 @@ import React from "react"; import style from "./TodoListItem.module.css" +import PropTypes from 'prop-types' const TodoListItem = ({ todo, onRemoveTodo }) => { @@ -11,4 +12,9 @@ const TodoListItem = ({ todo, onRemoveTodo }) => { ) } +TodoListItem.prototype = { + todo: PropTypes.string, + onRemoveTodo: PropTypes.func +} + export default TodoListItem diff --git a/src/TodoListItem.module.css b/src/components/TodoListItem.module.css similarity index 100% rename from src/TodoListItem.module.css rename to src/components/TodoListItem.module.css From 10d0ea24f78cf93739b738fb55c8d1bdbb49cd0c Mon Sep 17 00:00:00 2001 From: rebecavg Date: Mon, 5 Feb 2024 14:20:07 -0500 Subject: [PATCH 8/8] fixing errors --- src/components/InputWithLabel.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/InputWithLabel.js b/src/components/InputWithLabel.js index d54050c..6432145 100644 --- a/src/components/InputWithLabel.js +++ b/src/components/InputWithLabel.js @@ -18,7 +18,10 @@ const InputWithLabel = (props) => { } InputWithLabel.prototype = { - props: PropTypes.node + todoTitle: PropTypes.node, + handleTitleChange: PropTypes.node, + children: PropTypes.node + } export default InputWithLabel