Merge pull request #14 from CMU-17-356/master

[Sprint 2] Added "edit" feature as well as "priority" and "due date" features
CMU-17-356 · Apr 20, 2023 · e383a44 · e383a44
2 parents 6ab74e2 + c8a8eca
commit e383a44
Show file tree

Hide file tree

Showing 10 changed files with 17,484 additions and 36 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -14,6 +14,7 @@
     "bootstrap": "^5.2.3",
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.2",
+    "react-datepicker": "^4.11.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.8.1",
     "react-scripts": "5.0.1",

diff --git a/frontend/src/components/AddTodo.tsx b/frontend/src/components/AddTodo.tsx
@@ -1,16 +1,27 @@
 import { unwatchFile } from 'fs'
 import React, { useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
 
-type Props = { 
+type Props = TodoProps & {
   saveTodo: (e: React.FormEvent, formData: ITodo | any) => void 
 }
 
-const AddTodo: React.FC<Props> = ({ saveTodo }) => {
+const AddTodo: React.FC<Props> = ({todo, saveTodo }) => {
   const [formData, setFormData] = useState<ITodo | {}>()
-  const [name, setName] = useState("")
-  const [description, setDescription] = useState("")
+  const [name, setName] = useState(todo.name)
+  const [description, setDescription] = useState(todo.description)
+  const [label, setLabel] = useState(todo.label)
+  const [priority, setPriority] = useState(todo.priority)
+  const [dueDate, setDueDate] = useState(todo.dueDate)
   const [show, setShow] = useState(false)
 
+  let priorities = [
+        { label: "Low", value: "Low" },
+        { label: "Medium", value: "Medium" },
+        { label: "High", value: "High" }
+    ]
+
 //   const handleForm = (e: React.FormEvent<HTMLInputElement>): void => {
 //     setFormData({
 //       ...formData,
@@ -20,10 +31,15 @@ const AddTodo: React.FC<Props> = ({ saveTodo }) => {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
 
+    e.preventDefault();
+
     const todo: ITodo = {
         _id: "",
         name: name,
         description: description,
+        label: label,
+        priority: priority,
+        dueDate: dueDate,
         status: false,
       }
 
@@ -32,19 +48,53 @@ const AddTodo: React.FC<Props> = ({ saveTodo }) => {
     saveTodo(e, todo); 
     setName("");
     setDescription("");
+    setLabel("");
+    setPriority("");
+    setDueDate(null);
   }
 
   return ( show && (
     <div> 
     <form className='Form' onSubmit={handleSubmit}>
-
         <div className="form-group mt-3">
             <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"/>
         </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 
+            onChange={(e) => setPriority(e.currentTarget.value)} 
+            type='text' 
+            id='priority' 
+            value={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>)}
+            </select>
+
+        </div>
+        <div className="form-group mt-3">
+            <DatePicker 
+                selected={dueDate} 
+                onChange={date => setDueDate(date)} 
+                showTimeSelect 
+                dateFormat="MMMM d, yyyy h:mmaa" 
+                placeholderText="Due Date"
+                isClearable
+                filterDate={d => {
+                    return new Date() <= d;
+                }}
+             />
+        </div>
+        <div className="form-group mt-3" >
             <button disabled={name == "" || description == "" ? true: false} >Add Todo</button>
         </div>
         <div className="form-group mt-3">

diff --git a/frontend/src/components/EditTodo.tsx b/frontend/src/components/EditTodo.tsx
@@ -0,0 +1,103 @@
+import { unwatchFile } from 'fs'
+import React, { useState } from 'react'
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+
+type Props = TodoProps & {
+  saveTodo: (e: React.FormEvent, formData: ITodo | any) => void 
+  clearForm: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+const EditTodo: React.FC<Props> = ({todo, saveTodo, clearForm}) => {
+  const [id, setId] = useState(todo._id)
+  const [name, setName] = useState(todo.name)
+  const [description, setDescription] = useState(todo.description)
+  const [label, setLabel] = useState(todo.label)
+  const [priority, setPriority] = useState(todo.priority)
+  const [dueDate, setDueDate] = useState(todo.dueDate)
+  const [show, setShow] = useState(false)
+
+  let priorities = [
+        { label: "Low", value: "Low" },
+        { label: "Medium", value: "Medium" },
+        { label: "High", value: "High" }
+    ]
+
+//   const handleForm = (e: React.FormEvent<HTMLInputElement>): void => {
+//     setFormData({
+//       ...formData,
+//       [e.currentTarget.id]: e.currentTarget.value,
+//     })
+//   }
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
+
+    e.preventDefault();
+
+    const todo: ITodo = {
+        _id: id,
+        name: name,
+        description: description,
+        label: label,
+        priority: priority,
+        dueDate: dueDate,
+        status: false,
+      }
+
+    console.log("EDITED TODO: ", todo)
+
+    saveTodo(e, todo); 
+
+    clearForm(false);
+  }
+
+  return (
+    <div> 
+    <form className='Form' onSubmit={handleSubmit}>
+        <div className="form-group mt-3">
+            <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"/>
+        </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 
+            onChange={(e) => setPriority(e.currentTarget.value)} 
+            type='text' 
+            id='priority' 
+            value={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>)}
+            </select>
+
+        </div>
+        <div className="form-group mt-3">
+            <DatePicker 
+                selected={dueDate} 
+                onChange={date => setDueDate(date)} 
+                showTimeSelect 
+                dateFormat="MMMM d, yyyy h:mmaa" 
+                placeholderText="Due Date"
+                isClearable
+                filterDate={d => {
+                    return new Date() <= d;
+                }}
+             />
+        </div>
+        <div className="form-group mt-3" >
+            <button disabled={name == "" || description == "" ? true: false} >Save Todo</button>
+        </div>
+    </form>
+    </div>
+  )
+}
+
+export default EditTodo