Final project completion

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "dotenv": "^16.3.1",
+    "lodash": "^4.17.21",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/App.js

@@ -1,38 +1,216 @@
 import React from 'react';
+import { useState } from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import styles from  './components/TodoListItem.module.css';
+import { Link } from 'react-router-dom';
+// import styles from  './components/TodoListItem.module.css';
 import HomePage from './HomePage';
-import { useState } from 'react';
 import TodoContainer from './components/TodoContainer.js'
-import { Link } from 'react-router-dom';
+import styles from './components/TablesList.module.css'
+import NewTodoList from './components/NewTodoList.js'
+
+
+
+// const TableChooser = () => {
+//   const [tableName, setTableName] = useState(process.env.REACT_APP_TABLE_NAME);
+//   const [isLoading, setIsLoading] = React.useState(true);
+//   const [isError, setIsError] = React.useState(false);
+//   const [tableList, setTableList] = useState([]);
+
+//   // console.log("tableChooser")
+
+
+
+//     // GET 
+//   const fetchData = async () => {
+//     setIsLoading(true);
+
+//     const options = {
+//       method: "GET",
+//       headers: {
+//         'Authorization': `Bearer ${process.env.REACT_APP_AIRTABLE_API_TOKEN}`
+//       }
+//     }
+
+//       //const sordtedData = "?view=Grid%20view";
+
+//       // const sordtedData2 = `?sort[0][field]=title&sort[0][direction]=asc&sort[2][field]=completeAd&sort[2][direction]=asc`;
+
+//       const url = `https://api.airtable.com/v0/meta/bases/${process.env.REACT_APP_AIRTABLE_BASE_ID}/tables`;
+
+//     try {
+//       const response = await fetch(url, options);
+
+//       if (!response.ok) {
+//         const message = `Error: ${response.status}`;
+//         throw new Error(message);
+//       }
+
+//       const data = await response.json();
+//       // console.log("data ==> ",data)
+//       const todos = data.tables.map((tableName) => {
+
+//         const newTodos = {
+//           name: tableName.name
+//         }
+
+//         return newTodos;
+//       });
+
+//       // console.log("todos ==>>",todos)
+
+//       // setTodoList(todos)
+//       setTableList(todos)
+
+
+//     } catch (error) {
+//       setIsError(error);
+//       console.log(error.message)
+//     } finally {
+//       setIsLoading(false);
+//     }
+//   };
+
+//   // console.log("tableList ==>> ", tableList)
+//   // console.log("tableName ==>> ", tableName)
+
+
+//   React.useEffect(() => {
+//     fetchData();
+//   }, [tableName])
+
+
+//   const test = (event) => {
+//     console.log("event.target.value =>>", event.target.value)
+//     setTableName(event.target.value)
+//   }
+
+
+//   return (
+//     <div>
+//       <select
+//         id="selectField"
+//         value={tableName}
+//         onChange={(event) => test(event)}
+//       >
+
+//       {
+//         tableList.map((item) => {
+//           return(
+//             <option value={item.name}>{item.name}</option>
+//           )
+//         })
+//       }
+//         {/* <option value={process.env.REACT_APP_TABLE_NAME}>Todo List</option>
+//         <option value={process.env.REACT_APP_TABLE_NAME2} >Table 2</option> */}
+//       </select>
+//       <TodoContainer tableName={tableName} />
+//     </div>
+//   );
+// };
 
 
-const TableChooser = () => {
-  const [tableName, setTableName] = useState(process.env.REACT_APP_TABLE_NAME);
+const ChooseTable = () => {
+
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [isError, setIsError] = React.useState(false);
+  const [tableList, setTableList] = useState([]);
+
+    // GET 
+  const fetchData = async () => {
+    setIsLoading(true);
+
+    const options = {
+      method: "GET",
+      headers: {
+        'Authorization': `Bearer ${process.env.REACT_APP_AIRTABLE_API_TOKEN}`
+      }
+    }
+
+      //const sordtedData = "?view=Grid%20view";
+
+      // const sordtedData2 = `?sort[0][field]=title&sort[0][direction]=asc&sort[2][field]=completeAd&sort[2][direction]=asc`;
+
+      const url = `https://api.airtable.com/v0/meta/bases/${process.env.REACT_APP_AIRTABLE_BASE_ID}/tables`;
+
+    try {
+      const response = await fetch(url, options);
+
+      if (!response.ok) {
+        const message = `Error: ${response.status}`;
+        throw new Error(message);
+      }
+
+      const data = await response.json();
+      // console.log("data ==> ",data)
+      const todos = data.tables.map((tableName) => {
+
+        const newTodos = {
+          name: tableName.name
+        }
+
+        return newTodos;
+      });
+
+      // console.log("todos ==>>",todos)
+
+      // setTodoList(todos)
+      setTableList(todos)
+
+
+    } catch (error) {
+      setIsError(error);
+      console.log(error.message)
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // console.log("tableList ==>> ", tableList)
+  // console.log("tableName ==>> ", tableName)
+
+
+  React.useEffect(() => {
+    fetchData();
+  }, [tableList])
+
   return (
-    <div>
-      <select
-        id="selectField"
-        value={tableName}
-        onChange={(event) => setTableName(event.target.value)}
-      >
-        <option value={process.env.REACT_APP_TABLE_NAME}>Todo List</option>
-
-      </select>
-      <TodoContainer tableName={tableName} />
+    <div className={styles.container}>
+    <h1 className={styles.hederContainer}>Choose your Table</h1>
+    <hr />
+    {isError && <p>Something went wrong ...</p>}
+      <ul >
+        {
+          tableList.map((item) => {
+            return(
+              <Link key={item.name} to={`/TablesList/${item.name}`} className={styles.button} value={item.name}>
+                {item.name}
+              </Link>
+            )
+          })
+        }
+      </ul>
     </div>
   );
 };
 
 
 // View part of react
 const App = () => {
-
   return (
     <BrowserRouter>
+      <nav>
+        <ul style={{listStyle: "none"}}>
+          <li>
+            <Link to="/">Home</Link>
+          </li>
+          <li>
+            <Link to="/TablesList" >Tables</Link>
+          </li>
+        </ul>
+      </nav>
       <Routes>
         <Route path="/" element={<HomePage />} />
-        <Route path="/TodoList" element={<TableChooser />} />
+        {/* <Route path="/TodoList" element={<TableChooser />} /> */}
         <Route
           path="/NewTodoList"
           element={
@@ -42,15 +220,31 @@ const App = () => {
                   Back
                 </Link>
               </button>
-              <h1>New Todo List</h1>
+
+              {<NewTodoList/>}
             </>
           }
         />
+        <Route 
+          path="/TablesList"
+          element={
+
+            <div>
+              <button>
+                <Link to="/" style={{ color: "black", textDecoration: "none" }}>
+                  Back
+                </Link>
+              </button>
+
+              <ChooseTable />
+            </div>
+          }
+
+        />
+        <Route path="/TablesList/:tableName" element={<TodoContainer />}/>
       </Routes>
     </BrowserRouter>
   );
-}
-
-
+};
 
 export default App;

src/HomePage.js

@@ -6,20 +6,20 @@ const LandingPage = () => {
     <>
       <main className={styles.container}>
         <div className={styles.hederContainer}>
-          <h1>Todo App</h1>
+          <h1>Todo List App</h1>
           <p>Create and manage your tasks</p>
         </div>
         <div className={styles.container}>
-          <Link to="/TodoList" className={styles.button}>
-            View Todo List
+          <Link to="/TablesList" className={styles.button}>
+            Your Todo List Tables
           </Link>
           <Link to="/NewTodoList" className={styles.button}>
             Create New Todo List
           </Link>
         </div>
       </main>
       <footer className={styles.footer}>
-        <p>© 2024 Todo App. All rights reserved.</p>
+        <p>© 2024 Todo List App. All rights reserved.</p>
       </footer>
     </>
   );

src/components/AddTodoForm.js

@@ -14,10 +14,20 @@ const AddTodoForm = ({onAddTodo}) => {
         setTodoTitle(newTodoTitle);
     }
 
+    // completeTime = 10 days plus
+    const newDate = new Date();  
+    newDate.setDate(newDate.getDate() + 10);
+    const completeTime = newDate.toISOString().slice(0, 10);
+
     const handleAddTodo = (event) =>{
         event.preventDefault();
         const records = [{
-            fields:{title: todoTitle},
+            fields:{
+                title: todoTitle,
+                completeAd: new Date().toISOString().slice(0, 10),
+                createdTime: completeTime,
+                completed: false,
+            },
         }];
         onAddTodo(records);
         setTodoTitle("");

src/components/InputWithLabel.js

@@ -10,19 +10,19 @@ const InputWithLabel = (props) => {
     })
 
         return(
-    <>
-        <label data-testid="labelid" className={styles.label} htmlFor="todoTitle">{props.children} </label>
-        <input 
-
-            id="todoTitle" 
-            type="text" 
-            name="title" 
-            value={props.todoTitle} 
-            onChange={props.onChange}
-            ref={inputRef}
-            className={styles.input}
-            />
-    </>
+            <>
+                <label data-testid="labelid" className={styles.label} htmlFor="todoTitle">{props.children} </label>
+                <input 
+                    
+                    id="todoTitle" 
+                    type="text" 
+                    name="title" 
+                    value={props.todoTitle} 
+                    onChange={props.onChange}
+                    ref={inputRef}
+                    className={styles.input}
+                    />
+            </>
     );
 }