Created frontend structure for selecting users to assign to a project task,...

Created frontend structure for selecting users to assign to a project task, hardcoded data for now [RS]

frontend/src/AddProjectTask.js

@@ -2,18 +2,38 @@ import { useState } from "react";
 import { useHistory } from "react-router-dom"
 import { useParams } from "react-router"
 import useFetch from "./useFetch";
+import Select from 'react-select';
 
 const AddProjectTask = () => {
+    const { id } = useParams();
+
     const [description, setDescription] = useState("");
     const [due_date, setDueDate] = useState(Date.now);
     const [priority, setPriority] = useState(1);
     const [completed, setCompleted] = useState(false);
-    const { id } = useParams();
-    const { data: project, error, isPending } = useFetch("/projects/" + id)
+    const [assignedUsers, setAssignedUsers] = useState([]);
 
+    const { data: project, error, isPending } = useFetch("/projects/" + id)
+    const participants = [
+        {
+            "value": "john34",
+            "label": "John Smith"
+        },
+        {
+            "value": "rs0408",
+            "label": "JRahil Shah"
+        },{
+            "value": "ew1234",
+            "label": "Ethan Weitzman"
+        }
+    ]
 
     const history = useHistory();
 
+    const handleChange = (e) => {
+        setAssignedUsers(Array.isArray(e) ? e.map(x => x.value) : []); 
+    }
+
     const handleSubmit = e => {
         e.preventDefault()
 
@@ -36,8 +56,8 @@ const AddProjectTask = () => {
     return (
         <div className="add-project-task">
             <h2>Add a new task</h2>
-            { isPending && <h2>Loading...</h2> }
-            { project && <form onSubmit={handleSubmit}>
+            {isPending && <h2>Loading...</h2>}
+            {project && <form onSubmit={handleSubmit}>
                 <label>Description</label>
                 <input
                     type="text"
@@ -66,13 +86,24 @@ const AddProjectTask = () => {
                     placeholder="Input priority here"
                 />
 
+                <label>Volunteers assigned to this task</label>
+                <Select
+                    className="dropdown"
+                    placeholder="Select Users"
+                    value={participants.filter(user => assignedUsers.includes(user.value))}
+                    options={participants}
+                    onChange={handleChange}
+                    isMulti
+                    isClearable
+                />
+
                 <label>Status</label>
                 <select value={completed} onChange={(e) => setCompleted(e.target.value)}>
                     <option value="Incomplete">Available</option>
                     <option value="Completed">Completed</option>
                 </select>
                 <button>Add task</button>
-            </form> }
+            </form>}
         </div>
     );
 }

frontend/src/CreateProject.js

@@ -48,9 +48,6 @@ const CreateProject = () => {
             });
         });
 
-        console.log(users);
-        console.log(usernames);
-        console.log(selectUsernames);
         history.push("/");
     }
 
@@ -100,9 +97,6 @@ const CreateProject = () => {
                     isMulti
                     isClearable
                 />
-                {/* <select multiple={true} onChange={(e) => setSelectUsernames(selectUsernames.concat(e.target.value))} value={selectUsernames} >
-                    {users.map(user => <option value={user.username}>{user.firstname} {user.surname}</option>)}
-                </select> */}
                 <label>Google Drive folder</label>
                 <textarea placeholder="Copy the link to the Google Drive folder for this project" value={files} onChange={(e) => setFiles(e.target.value)}></textarea>
                 <button>Add project</button>