completed project edit

client/src/components/forms/ProjectForm/index.tsx

-import { Project, ProjectColors } from 'adapters/project';
+import { Project, ProjectColors, Status } from 'adapters/project';
 import { FormEvent, useCallback, useEffect, useState } from 'react';
 import Callout from 'components/ui/Callout';
 import Button from 'components/ui/Button';
@@ -8,7 +8,7 @@ import { getTeam, getTeams, Team } from 'adapters/team';
 
 interface Props {
     project?: Project
-    onSubmit: (teams: string[], name: string, text: string, color: string, deadline?: Date) => void;
+    onSubmit: (teams: string[], name: string, text: string, color: string, status?: Status, deadline?: Date) => void;
 }
 
 function validateName(name: string): string | null {
@@ -35,10 +35,19 @@ function validateColor(color: string): string | null {
     }
 }
 
+function validateTeams(teams: string[]): string | null {
+    if (teams.length > 0) {
+        return null;
+    } else {
+        return 'Please choose at least one team';
+    }
+}
+
 export default function ProjectForm({ project, onSubmit }: Props) {
 
     const [name, setName] = useState(project?.name);
     const [text, setText] = useState(project?.text);
+    const [status, setStatus] = useState(project?.status);
     const [color, setColor] = useState(project?.color);
     const [deadline, setDeadline] = useState(project?.deadline);
     const [error, setError] = useState('');
@@ -66,15 +75,22 @@ export default function ProjectForm({ project, onSubmit }: Props) {
 
 
     const colors = Object.values(ProjectColors);
+    const allStatus = Object.values(Status);
+    console.log(allStatus);
+
 
     const handleSubmit = useCallback(async (e: FormEvent) => {
         e.preventDefault();
-        if (validateName(name ?? '') === null && validateText(text ?? '') === null && validateColor(color ?? '') === null) {
-            onSubmit?.(teams, name ?? '', text ?? '', color ?? '', deadline);
+        if (validateName(name ?? '') === null &&
+            validateText(text ?? '') === null &&
+            validateColor(color ?? '') === null &&
+            validateTeams(teams) === null
+        ) {
+            onSubmit?.(teams, name ?? '', text ?? '', color ?? '', status ?? Status.OPEN, deadline);
         } else {
             setError('Please fill in the mandatory fields.');
         }
-    }, [onSubmit, setError, name, text, color, deadline, teams]);
+    }, [onSubmit, setError, name, text, color, deadline, teams, status]);
 
     return (
         <form onSubmit={handleSubmit} className="project-form">
@@ -137,8 +153,23 @@ export default function ProjectForm({ project, onSubmit }: Props) {
                 }
             </div>
 
+            {
+                status &&
+                <select onChange={(e: any) => {
+                    let currentStatus = Object.values(Status).find(s => s === e.target.value) ?? Status.OPEN;
+                    setStatus(currentStatus);
+                }
+                }>
+                    {
+                        allStatus.map((s) => (
+                            <option selected={status === s} value={s} key={s}>{s}</option>
+                        ))
+                    }
+                </select>
+            }
+
             <Button type="submit">
-                Create
+                {project ? 'Update' : 'Create'}
             </Button>
         </form>
     )

client/src/pages/Projects/ProjectCreate/index.tsx

-import { createProject } from "adapters/project";
+import { createProject, Status } from "adapters/project";
 import ProjectForm from "components/forms/ProjectForm";
 import { useCallback, useState } from "react";
 import { useHistory } from "react-router";
@@ -7,7 +7,7 @@ import Callout from 'components/ui/Callout';
 export default function ProjectCreate() {
     const history = useHistory();
     const [error, setError] = useState('');
-    const handleSubmit = useCallback(async (teams: string[], name: string, text: string, color: string, deadline?: Date) => {
+    const handleSubmit = useCallback(async (teams: string[], name: string, text: string, color: string, status?: Status, deadline?: Date) => {
         try {
             if (await createProject({ teams, name, text, color, deadline })) {
                 history.push('/projects');

client/src/pages/Projects/ProjectEdit/index.tsx

-import { getProject, Project, updateProject } from 'adapters/project';
+import { getProject, Project, Status, updateProject } from 'adapters/project';
 import { useCallback, useEffect, useState } from 'react';
 import { useHistory, useParams } from 'react-router';
 import ProjectForm from 'components/forms/ProjectForm';
@@ -21,27 +21,34 @@ export default function ProjectEdit() {
             history.goBack();
         });
     }, []);
-    const handleSubmit = useCallback(async (teams: string[], name: string, text: string, color: string, deadline?: Date) => {
+    
+    const handleSubmit = useCallback(async (teams: string[], name: string, text: string, color: string, status?: Status, deadline?: Date) => {
         try {
-            /*if (await updateProject({ teams, name, text, color, deadline })) {
+
+            if (project) {
+                let removedTeams = project.teams, addedTeams = teams;
+                removedTeams.filter((teamId) => teams.indexOf(teamId) === -1);
+                addedTeams.filter((teamId) => project.teams.indexOf(teamId) === -1);
+
+                await updateProject(project.id, { remove_teams: removedTeams, add_teams: addedTeams, name, text, color, status, deadline: deadline?.toString() });
                 history.push('/projects');
-            } else {
-                setError('There was an error with your registration. Please try again!');
-            }*/
-        } catch (e) { }
-    }, [history]);
+            }
+        } catch (e) {
+            setError('There was an error with updating your project. Please try again!');
+        }
+    }, [history, project]);
 
     return (
         <div className="project-create-page">
-        {
-            project ?
-            <div className="content-container">
-                <h1>Edit the project {project?.name}</h1>
-                {error && <Callout message={error} />}
-                <ProjectForm onSubmit={handleSubmit} project={project} />
-            </div> :
-            <h2>Loading...</h2>
-        }
+            {
+                project ?
+                    <div className="content-container">
+                        <h1>Edit the project {project?.name}</h1>
+                        {error && <Callout message={error} />}
+                        <ProjectForm onSubmit={handleSubmit} project={project} />
+                    </div> :
+                    <h2>Loading...</h2>
+            }
         </div>
     )