[Sprint 3/4] Added sorting functionalities + due date and recurring schedule functionality + a navbar

frontend/package.json

@@ -18,6 +18,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.8.1",
     "react-scripts": "5.0.1",
+    "react-select": "^5.7.2",
     "styled-components": "^5.2.3",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"

frontend/src/App.tsx

@@ -9,12 +9,16 @@ import { Route, Routes } from "react-router-dom"
 import { Container } from "react-bootstrap"
 import './App.css'
 import "bootstrap/dist/css/bootstrap.min.css"
+import Navbar from "./components/Navbar";
 
 function App() {
   return (
     <Container className="mb-4">
+    <div>
+      <Navbar />
+    </div>
     <Routes>
-      <Route path="/login" element={<Login />} />
+      <Route path="/" element={<Login />} />
       <Route path="/signup" element={<SignUp />} />
       <Route path="/todo" element={<TodoList />} />
       <Route path="/upload" element={<ImageUpload />} />

frontend/src/components/AddTodo.tsx

@@ -14,14 +14,33 @@ const AddTodo: React.FC<Props> = ({todo, saveTodo }) => {
   const [label, setLabel] = useState(todo.label)
   const [priority, setPriority] = useState(todo.priority)
   const [dueDate, setDueDate] = useState(todo.dueDate)
+  const [recurring, setRecurring] = useState(todo.recurring)
+  const [day, setDay] = useState("Monday")
   const [show, setShow] = useState(false)
 
   let priorities = [
+        { label: "Select a priority", value: "" },
         { label: "Low", value: "Low" },
         { label: "Medium", value: "Medium" },
         { label: "High", value: "High" }
     ]
 
+  let recurrings = [
+        { label: "Select a recurring schedule", value: "" },
+        { label: "Daily", value: "Daily" },
+        { label: "Weekly", value: "Weekly" }
+    ]
+
+  let days = [
+        { label: "Monday", value: "Monday" },
+        { label: "Tuesday", value: "Tuesday" },
+        { label: "Wednesday", value: "Wednesday" },
+        { label: "Thursday", value: "Thursday" },
+        { label: "Friday", value: "Friday" },
+        { label: "Saturday", value: "Saturday" },
+        { label: "Sunday", value: "Sunday" },
+    ]
+
 //   const handleForm = (e: React.FormEvent<HTMLInputElement>): void => {
 //     setFormData({
 //       ...formData,
@@ -40,17 +59,21 @@ const AddTodo: React.FC<Props> = ({todo, saveTodo }) => {
         label: label,
         priority: priority,
         dueDate: dueDate,
+        recurring: recurring,
+        day: day,
         status: false,
+        createdAt: new Date(),
       }
 
-    console.log("SLDFKJLSDKFJLDSKFJ")
+    console.log("Added todo:", todo)
 
     saveTodo(e, todo); 
     setName("");
     setDescription("");
     setLabel("");
     setPriority("");
     setDueDate(null);
+    setRecurring("");
   }
 
   return ( show && (
@@ -60,24 +83,23 @@ const AddTodo: React.FC<Props> = ({todo, saveTodo }) => {
             <input onChange={(e) => setName(e.currentTarget.value)} type='text' id='name' value={name} placeholder="Name"/>
         </div>
         <div className="form-group mt-3">
-            <input onChange={(e) => setDescription(e.currentTarget.value)} type='text' id='description' value={description} placeholder="Description"/>
+            <textarea onChange={(e) => setDescription(e.currentTarget.value)} id='description' value={description} placeholder="Description"/>
         </div>
         <div className="form-group mt-3">
             <input onChange={(e) => setLabel(e.currentTarget.value)} type='text' id='label' value={label} placeholder="Label"/>
         </div>
 
         <div className="form-group mt-3">
-            <input 
+            {/* <input 
             onChange={(e) => setPriority(e.currentTarget.value)} 
             type='text' 
             id='priority' 
             value={priority} 
-            placeholder="Priority"/>
+            placeholder="Priority"/> */}
 
             <select onChange={(e) => setPriority(e.currentTarget.value)} > 
-                {/* <option value={priority}> Priority </option> */}
-                <option value={priority}> -- Select a priority -- </option>
-                {priorities.map((fruit) => <option value={fruit.value}>{fruit.label}</option>)}
+                {/* <option value={priority}> -- Select a priority -- </option> */}
+                {priorities.map((p) => (p.value == priority && (<option value={p.value} selected>{p.label}</option>)) || (p.value != priority && (<option value={p.value}>{p.label}</option>)))}
             </select>
 
         </div>
@@ -94,6 +116,20 @@ const AddTodo: React.FC<Props> = ({todo, saveTodo }) => {
                 }}
              />
         </div>
+        <div className="form-group mt-3">
+            <select onChange={(e) => setRecurring(e.currentTarget.value)} > 
+            {recurrings.map((x) => (x.value == recurring && (<option value={x.value} selected>{x.label}</option>)) || (x.value != recurring && (<option value={x.value}>{x.label}</option>)))}
+            </select>
+        </div>
+
+        {recurring == "Weekly" &&
+            <div className="form-group mt-3">
+                <select onChange={(e) => setDay(e.currentTarget.value)}> 
+                {days.map((x) => (x.value == day && (<option value={x.value} selected>{x.label}</option>)) || (x.value != day && (<option value={x.value}>{x.label}</option>)))}
+                </select>
+            </div>
+        }
+
         <div className="form-group mt-3" >
             <button disabled={name == "" || description == "" ? true: false} >Add Todo</button>
         </div>