Final project

package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "lottie-react": "^2.4.0",
+    "moment": "^2.29.4",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/App.js

@@ -3,26 +3,13 @@ import TodoList from "./components/TodoList";
 import AddTodoForm from "./components/AddTodoForm";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import style from "./App.module.css";
+import TodoListOutdated from "./components/TodoListOutdated";
+import Navbar from "./components/Navbar";
+import Homepage from "./components/Homepage";
 
 function App() {
-  const [order, setOrder] = useState(-1);
   const [todoList, setTodoList] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
-  const sortTodoList = (newOrder) => {
-    return [...todoList].sort(function (one, two) {
-      const a = one.fields.Title;
-      const b = two.fields.Title;
-      if (a < b) return newOrder;
-      else if (a === b) return 0;
-      else return -1 * newOrder;
-    });
-  };
-  function handleClick() {
-    const newOrder = -1 * order;
-    setOrder(newOrder);
-    const newTodoList = sortTodoList(newOrder);
-    setTodoList(newTodoList);
-  }
 
   useEffect(() => {
     fetch(
@@ -77,6 +64,7 @@ function App() {
         {
           fields: {
             Title: newTodo["title"],
+            DueDate: newTodo["duedate"],
           },
         },
       ],
@@ -103,35 +91,89 @@ function App() {
 
   const addTodo = (newTodo) => {
     console.log("addTodo", [...todoList, newTodo]);
+
     postTodo(newTodo).then((result) =>
       setTodoList([...todoList, ...result.records])
     );
   };
 
+  const putTodo = async (id, payload) => {
+    let response;
+    try {
+      response = await fetch(
+        `https://api.airtable.com/v0/${process.env.REACT_APP_AIRTABLE_BASE_ID}/Default/${id}`,
+        {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${process.env.REACT_APP_AIRTABLE_API_KEY}`,
+          },
+          body: JSON.stringify(payload),
+        }
+      );
+      return response.json();
+    } catch (err) {
+      console.log("err:", err);
+    }
+  };
+
+  const updateTodo = (todo) => {
+    const todoClone = structuredClone(todo);
+    delete todoClone.id;
+    delete todoClone.createdTime;
+
+    putTodo(todo.id, todoClone).then((todoItem) => {
+      const newTodoList = todoList.map((obj) =>
+        obj.id === todoItem.id ? todoItem : obj
+      );
+      setTodoList([...newTodoList]);
+    });
+  };
+
   return (
     <BrowserRouter>
+      <Navbar />
+
       <Routes>
+        <Route path="/" element={<Homepage />} />
         <Route
           exact
-          path="/"
+          path="/todolist"
           element={
             <Fragment>
               <div className={style.container}>
                 <h1>Todo List</h1>
                 <AddTodoForm onAddTodo={addTodo} />
-                <button onClick={handleClick} className={style.changeOrder}>
-                  Sort by Title
-                </button>
+
                 {isLoading ? (
                   <p>Loading...</p>
                 ) : (
-                  <TodoList todoList={todoList} onRemoveTodo={removeTodo} />
+                  <TodoList
+                    todoList={todoList}
+                    setTodoList={setTodoList}
+                    onRemoveTodo={removeTodo}
+                    onImportantTodo={updateTodo}
+                  />
                 )}
               </div>
             </Fragment>
           }
         />
-        <Route path="/new" element={<h1>New Todo List</h1>} />
+        <Route
+          path="/outdated"
+          element={
+            <Fragment>
+              <div className={style.container}>
+                <h1>Outdated Todo</h1>
+                <TodoListOutdated
+                  todoList={todoList}
+                  onRemoveTodo={removeTodo}
+                  onImportantTodo={updateTodo}
+                />
+              </div>
+            </Fragment>
+          }
+        />
       </Routes>
     </BrowserRouter>
   );

src/App.module.css

@@ -15,13 +15,8 @@ h1 {
   letter-spacing: 1px;
   font-family: "Fredoka One", cursive;
 }
-
-p {
-  padding-left: 50px;
-}
-.changeOrder {
-  display: block;
-  margin: 50px;
-  border-radius: 10px;
-  line-height: 30px;
+h2 {
+  font-size: 25px;
+  font-weight: 100;
+  font-family: "Jua", sans-serif;
 }

src/components/AddTodoForm.js

@@ -2,27 +2,49 @@ import React, { useState } from "react";
 import InputWithLabel from "./InputWithLabel";
 import style from "./AddTodoForm.module.css";
 import PropTypes from "prop-types";
+import moment from "moment";
 
 const AddTodoForm = ({ onAddTodo }) => {
   const [todoTitle, setTodoTitle] = useState("");
+  const [dueDate, setDueDate] = useState("");
   const handleTitleChange = (event) => {
     const newTodoTitle = event.target.value;
     setTodoTitle(newTodoTitle);
   };
+  const handleDateChange = (event) => {
+    const newDueDate = event.target.value;
+    setDueDate(newDueDate);
+  };
   const handleAddTodo = (event) => {
     event.preventDefault();
-    onAddTodo({ id: Date.now(), title: todoTitle });
-
-    setTodoTitle("");
+    if (dueDate && todoTitle && moment(dueDate).diff(moment(), "days") >= 0) {
+      onAddTodo({ id: Date.now(), title: todoTitle, duedate: dueDate });
+      setTodoTitle("");
+      setDueDate("");
+    } else {
+      alert("Enter valid Title and Due Date");
+    }
   };
   return (
     <form onSubmit={handleAddTodo} className={style.submitForm}>
       <InputWithLabel
-        todoTitle={todoTitle}
-        handleTitleChange={handleTitleChange}
-      >
-        <strong>Title:</strong>
-      </InputWithLabel>
+        label="Title"
+        handleChange={handleTitleChange}
+        type="text"
+        id="todoTitle"
+        name="title"
+        value={todoTitle}
+        placeholder="Add a new Todo"
+        isFocused
+      />
+      <InputWithLabel
+        label="Due Date"
+        handleChange={handleDateChange}
+        type="date"
+        id="duedate"
+        name="Due Date"
+        value={dueDate}
+      />
       &nbsp;
       <input type="submit" className={style.buttonAdd} value="Add" />
     </form>

src/components/AddTodoForm.module.css

@@ -8,9 +8,9 @@
   border-radius: 10px;
 }
 .submitForm {
-  display: inline-flex;
+  /* display: inline-flex; */
   border-radius: 10px;
-  /* border: 2px solid #0a0a0a; */
   overflow: hidden;
   align-items: baseline;
+  margin: 40px;
 }

src/components/ButtonSortDate.js

@@ -0,0 +1,35 @@
+import React, { useState } from "react";
+import style from "./ButtonSortTitle.module.css";
+import { ReactComponent as ArrowBlack } from "./assets/arrow-black.svg";
+import PropTypes from "prop-types";
+
+const ButtonSortDate = ({ todoList, setTodoList }) => {
+  const [order, setOrder] = useState(-1);
+  const sortTodoList = (newOrder) => {
+    return [...todoList].sort(function (one, two) {
+      const a = one.fields.DueDate;
+      const b = two.fields.DueDate;
+      if (a < b) return newOrder;
+      else if (a === b) return 0;
+      else return -1 * newOrder;
+    });
+  };
+  function handleClick() {
+    const newOrder = -1 * order;
+    setOrder(newOrder);
+    const newTodoList = sortTodoList(newOrder);
+    setTodoList(newTodoList);
+  }
+  return (
+    <button onClick={handleClick} className={style.changeOrder}>
+      {<ArrowBlack height="15px" width="15px" />}
+    </button>
+  );
+};
+
+ButtonSortDate.propTypes = {
+  todoList: PropTypes.array,
+  setTodoList: PropTypes.func,
+};
+
+export default ButtonSortDate;

src/components/ButtonSortDays.js

@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+import style from "./ButtonSortTitle.module.css";
+import { ReactComponent as ArrowBlack } from "./assets/arrow-black.svg";
+import PropTypes from "prop-types";
+import moment from "moment";
+
+const ButtonSortDays = ({ todoList, setTodoList }) => {
+  const [order, setOrder] = useState(-1);
+  const sortTodoList = (newOrder) => {
+    return [...todoList].sort(function (one, two) {
+      const a = moment(one.fields.DueDate).diff(moment(), "days");
+      const b = moment(two.fields.DueDate).diff(moment(), "days");
+      if (a < b) return newOrder;
+      else if (a === b) return 0;
+      else return -1 * newOrder;
+    });
+  };
+  function handleClick() {
+    const newOrder = -1 * order;
+    setOrder(newOrder);
+    const newTodoList = sortTodoList(newOrder);
+    setTodoList(newTodoList);
+  }
+  return (
+    <button onClick={handleClick} className={style.changeOrder}>
+      {<ArrowBlack height="15px" width="15px" />}
+    </button>
+  );
+};
+
+ButtonSortDays.propTypes = {
+  todoList: PropTypes.array,
+  setTodoList: PropTypes.func,
+};
+
+export default ButtonSortDays;