Assign user to team

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

@@ -2,23 +2,16 @@ const BASE_URL = "http://localhost:8080/api/memberships";
 
 //Add a member to a team
 export const addMemberToTeam = async (teamMemberId, teamId) => {
-    try {
         const response = await fetch(`${BASE_URL}/${teamMemberId}/team/${teamId}`, {
             method: 'POST',
             headers: { "Content-Type": "application/json" }
         });
 
         if (!response.ok) {
-            console.error(`Failed to add member to team: ${response.status} ${response.statusText}`);
-            return false;
+            throw Error(`Failed to add member to team: ${response.status} ${response.statusText}`);
         }
 
         return true;
-    } 
-    catch (error) {
-        console.error("Error adding member to team: ", error);
-        return false;
-    }
 };
 
 //Remove a member from a team

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

@@ -0,0 +1,74 @@
+import Select from 'react-select'
+import {useForm, Controller} from 'react-hook-form'
+import { addMemberToTeam } from '../api/isMemberOfApi';
+export default function AddToTeam({teamId, allTeamMembers, currentMembers}){
+    console.log('allMembers', allTeamMembers)
+    const { register, handleSubmit, formState: {errors}, control} = useForm();
+    function formatTeamData(){
+        let returnArr = []
+        allTeamMembers.map((member)=>{
+            let isOnTeam = false;
+            currentMembers.map((currentMember)=>{
+                if(member.accountId === currentMember){
+                    isOnTeam = true;
+                }
+            })
+            if(!isOnTeam){
+                returnArr= [...returnArr, {value: member.accountId, label: member.userName}]
+            }
+
+        })
+        return returnArr;
+    }
+    const onSubmit = async (data)=>{
+        try {
+            await data.assignees.map(async(assignee)=>{
+                const response = await addMemberToTeam(assignee.value, teamId);
+            })
+            window.location.reload();
+        } catch (error) {
+            console.log(error)
+        }
+    }
+    const customStyles = {
+        control: (provided) => ({
+          ...provided,
+          width: '100%',
+        minWidth: '200px',
+        maxWidth: '100%',
+        minHeight: '30px',
+        maxHeight: '100%',
+          border: '2px solid grey',
+          borderRadius: '10px',
+          paddingLeft: '8px',
+          backgroundColor: '#BFCDE0',
+          margin: '10px 0px',
+          cursor: 'pointer'
+        }),
+        option: (provided, state) =>({
+            ...provided,
+            cursor: state.isSelected ? 'default' : 'pointer',
+        })
+      };
+
+      return(
+        <form onSubmit={handleSubmit(onSubmit)} className ='rowFlexbox 'style={{justifyContent: 'stretch', width: '50%'}}>
+            <Controller
+                control={control}
+                className='Select'
+                name="assignees"
+                rules={{required:true}}
+                defaultValue={[]}
+                render={({field}) => (
+                    <Select
+                        {...field}
+                        options={formatTeamData()}
+                        isMulti                  
+                        styles={customStyles}               
+                    />)}
+            />
+            <button type="submit" className='smallImportButton'>Add To Team</button>
+        </form>
+      )
+
+}

frontend/react-app/src/index.css

@@ -83,3 +83,17 @@ li.logo a{
   background-color: #3f5d8b;
   cursor: pointer;
 }
+.smallImportButton{
+  padding-left: 5px;
+  padding-right: 5px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  font-size: 1em;
+  margin-top: 5px;
+  margin-left: 5px;
+  margin-bottom: 5px;
+  border: none;
+  border-radius: 10px;
+  background-color: #3f5d8b;
+  cursor: pointer;
+}

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

@@ -7,9 +7,12 @@ import fakeData from "../FakeData/fakeTaskData.json"
 import { useCookies } from 'react-cookie';
 import { useState, useEffect } from 'react';
 import { getTeamMembers } from "../api/teamApi";
+import { getTeamMembers as getAllTeamMembers}from "../api/teamMemberAccountApi";
 import { useLocation } from 'react-router-dom';
 import { getTeamTasks } from "../api/teamApi";
 import DeleteTeamButton from "../components/DeleteTeamButton";
+import { getAdmins } from "../api/adminApi";
+import AddToTeam from "../components/AddToTeam";
 
 function getAssigneesNames(taskItem) {
   return taskItem.assignedMembers.map((member) => member.userName).join(", ");
@@ -106,10 +109,13 @@ function TeamTasks(){
   console.log("teamId:", teamId);
 
   const [tasksToDo, setTasksToDo ] = useState([]);
-
+  const [allUsers, setAllUsers] = useState();
 
   async function fetchData(){
       try{
+        if(cookies.userInfo.role === 'admin'){
+          await getAllUsers();
+        }
           const results = await getTeamTasks(teamId);
           console.log("Team Tasks Results:", results);
           setTasksToDo(results);
@@ -119,6 +125,18 @@ function TeamTasks(){
           setLoadingTasks(false)
       }
   }
+
+  async function getAllUsers() {
+    try {
+      const adminResponse = await getAdmins();
+      const teamMemberResposne = await getAllTeamMembers()
+      setAllUsers(adminResponse.concat(teamMemberResposne))
+      console.log(teamMemberResposne)
+    } catch (error) {
+      await alert("FAILED TO LOAD CONTACT NETWORK ADMIN")
+    }
+  }
+
 
 
   useEffect(()=>{
@@ -203,9 +221,22 @@ if(loadingNames || loadingTasks){
             </div>
             {cookies.userInfo.role === 'admin'&&
             (
-              <DeleteTeamButton
+              <div>
+                <div>
+                  <AddToTeam
+                  teamId={teamId}
+                  allTeamMembers={allUsers}
+                  currentMembers = {
+                    (teamMembers.map((member)=>member.accountId))
+                  }
+                  />
+                </div>
+                <div>
+                <DeleteTeamButton
               teamId={teamId}
               />
+                </div>
+              </div>
             )
             }