You can now create teams also added redirect to createtaskform

frontend/react-app/src/App.js

@@ -17,6 +17,7 @@ import AdminPanel from './pages/AdminPanel';
 import CreateTask from './pages/CreateTask';
 import ChangePassword from './pages/ChangePassword';
 import EditUserDetails from './pages/EditUserDetails';
+import CreatTeamPage from './pages/CreateTeamPage';
 
 
 function App() {
@@ -38,7 +39,7 @@ function App() {
           <Route path="/admin-panel" element={<ProtectedRoute allowedRoles={['admin']} protectedContent={<AdminPanel/>} urlReirect={"/home"}></ProtectedRoute>}/>
           <Route path="/change-password" element={<ProtectedRoute allowedRoles={['admin','teamMember']} protectedContent={<ChangePassword/>} urlReirect={"/login"}></ProtectedRoute>}/>
           <Route path="/edit-user-details" element={<ProtectedRoute allowedRoles={['admin']} protectedContent={<EditUserDetails/>} urlReirect={"/home"}></ProtectedRoute>}/>
-
+          <Route path="/create-team" element={<ProtectedRoute allowedRoles={['admin']} protectedContent={<CreatTeamPage/>} urlReirect={"/home"}></ProtectedRoute>}/>
           {/*Default path should be login, unless specified */}
           <Route path="/" exact element={<Login/>} />
 

frontend/react-app/src/api/adminApi.js

@@ -84,21 +84,15 @@ export const unlockTask = async (taskId) => {
 
 //Get all admins
 export const getAdmins = async () => {
-    try {
         const response = await fetch(`${BASE_URL}`, {
             method: 'GET'
         });
 
         if (!response.ok) {
-            console.error(`Failed to retrieve admins: ${response.status} ${response.statusText}`);
+            throw Error(response);
         }
 
         return await response.json();
-    }
-    catch (error) {
-        console.error(`Failed to retrieve all admins: `, error);
-        throw error;
-    } 
 };
 
 //reset password

frontend/react-app/src/api/teamApi.js

@@ -2,29 +2,22 @@ const BASE_URL = "http://localhost:8080/api/teams";
 
 //Create a team
 export const createTeam = async (teamLeadId, teamName) => {
-    try {
+    console.log(teamLeadId, teamName)
         const response = await fetch(`${BASE_URL}`, {
             method: 'POST',
             headers: { "Content-Type": "application/json" },
             body: JSON.stringify({teamLeadId, teamName})
         });
 
         if (!response.ok) {
-            console.error(`Failed to create team: ${response.status} ${response.statusText}`);
-            return null;
+            throw Error(response.statusText)
         }
 
         return await response.json();
-    }
-    catch (error) {
-        console.error("Error creating team: ", error);
-        return null;
-    }
 };
 
 //Delete a team
 export const deleteTeam = async (teamId) => {
-    try {
         const response = await fetch(`${BASE_URL}/${teamId}`, {
             method: 'DELETE'
         });
@@ -35,11 +28,7 @@ export const deleteTeam = async (teamId) => {
         }
 
         return true;
-    }
-    catch (error) {
-        console.error("Error deleting team: ", error);
-        return null;
-    }
+
 };
 
 //Change team lead

frontend/react-app/src/api/teamMemberAccountApi.js

@@ -107,7 +107,7 @@ export const getTeamMemberById = async (teamMemberId) => {
 //Get all team ememebrs
 export const getTeamMembers = async () => {
     try {
-        const response = await fetch(`${BASE_URL}/team-members`, {
+        const response = await fetch(`${BASE_URL}`, {
             method: 'GET'
         });
 

frontend/react-app/src/components/CreateTaskForm.jsx

@@ -88,7 +88,7 @@ function CreateTaskForm({userId}){
                      })
                     }  
             })
-            //window.location.href="/home";
+            window.location.href="/home";
         } catch (error) {
             console.log(error)
             alert("FAILED IN MAKING TASK");

frontend/react-app/src/components/CreateTeamForm.jsx

@@ -0,0 +1,61 @@
+import { useForm, Controller} from "react-hook-form"; 
+import Select from 'react-select'
+import { createTeam } from "../api/teamApi";
+import { assignTeamMemberToTeam } from "../api/adminApi";
+export default function CreateTeamForm({users}){
+    const {handleSubmit, register, control} = useForm();
+    async function onSumbit(data){
+        try {
+            const teamLead = data.teamMembers.shift();
+            const responseToCreateTeam = await createTeam(teamLead.value, data.teamName)
+            if(data.teamMembers.length >0){
+                data.teamMembers.map( async (teamMember)=>{
+                    const responseToAddToTeam = assignTeamMemberToTeam(teamMember.value, responseToCreateTeam.teamId)
+                })
+            }
+            await alert("Team Created with id"+ responseToCreateTeam.teamId)
+            window.location.href="/home";
+        } catch (error) {
+            console.log(error)
+        }
+    }
+    const customStyles = {
+        control: (provided) => ({
+          ...provided,
+          width: '65vw',
+        minWidth: '100px',
+        maxWidth: '100%',
+        minHeight: '30px',
+        maxHeight: '100%',
+          border: '2px solid grey',
+          borderRadius: '10px',
+          paddingLeft: '8px',
+          backgroundColor: '#BFCDE0',
+          margin: '10px 0px',
+        }),
+      };
+    return(
+        <form id="createAccountForm" onSubmit={handleSubmit(onSumbit)}>
+            <label>Team Name</label>
+            <input type="text" {...register("teamName", {required:true})}/>
+            <label>Team Members (One Required, First Selected Will Be Team Lead)</label>
+            <Controller
+                    control={control}
+                    defaultValue={[]}
+                    className='Select'
+                    id = 'selectTeamMembers'
+                    name="teamMembers"
+                    rules={{required:true}}
+                     render={({field}) => (
+                        <Select
+                        {...field}
+                        options={users}
+                        isMulti
+                        styles={customStyles}
+
+                        />)}
+                    />
+            <button type="submit">Create Team</button>
+        </form>
+    )
+}

frontend/react-app/src/pages/AdminPanel.jsx

@@ -43,6 +43,7 @@ export default function AdminPanel(){
             <div className="rowFlexbox buttonRow">
             <a href="create-account" ><button className='importButton'>Create New Account</button></a>
             <a href="/all-users"><button className="importButton">See/Edit All Users</button></a>
+            <a href="/create-team"><button className="importButton">Create Team</button></a>
             </div>
                 <form onSubmit={handleSubmit(onSubmit)} className="goToTeamTaskForm">
                     <select name="" id="" {...register("teamId")}>

frontend/react-app/src/pages/CreateTeamPage.jsx

@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from 'react';
+import '../css/CreateAccount.css';
+import Header from '../components/Header';
+import CreateTeamForm from '../components/CreateTeamForm';
+import { getTeamMembers } from '../api/teamMemberAccountApi';
+import { getAdmins } from '../api/adminApi';
+
+export default function CreatTeamPage(){
+    const [loading, setLoading]= useState(true);
+    const [allUsers, setTeamMemberData] = useState([]);
+
+    function FormatUserData(users){
+        let returnArr =[]
+        users.map((user)=>{
+            returnArr = [...returnArr, {value: user.accountId, label: user.userName, name: user.userName}]
+        })
+        return returnArr
+    }
+
+    useEffect(()=>{
+        async function getAllUsers(){
+            try {
+                const teamMembers = await getTeamMembers();
+                const admins = await getAdmins();
+                setTeamMemberData(()=>teamMembers.concat(admins))
+            } catch (error) {
+                console.log(error)
+            }finally{
+                setLoading(false)
+            }
+        }
+        getAllUsers();
+    },[])
+    if(loading){
+        return (<div>...Loading</div>)
+    }
+    return (
+    <div className='pageContainer'>
+        <Header/>
+        <div className='pageBody'>
+            <CreateTeamForm
+            users = {FormatUserData(allUsers)}
+            />
+        </div>
+    </div>
+    )
+}