From 2211f87100183078b1de4dcd7d94298c55e78035 Mon Sep 17 00:00:00 2001 From: James Birnie Date: Tue, 1 Apr 2025 11:52:38 -0700 Subject: [PATCH] You can now create teams added redirect to createtaskform --- frontend/react-app/src/App.js | 3 +- frontend/react-app/src/api/adminApi.js | 8 +-- frontend/react-app/src/api/teamApi.js | 17 +----- .../react-app/src/api/teamMemberAccountApi.js | 2 +- .../src/components/CreateTaskForm.jsx | 2 +- .../src/components/CreateTeamForm.jsx | 61 +++++++++++++++++++ frontend/react-app/src/pages/AdminPanel.jsx | 1 + .../react-app/src/pages/CreateTeamPage.jsx | 47 ++++++++++++++ 8 files changed, 117 insertions(+), 24 deletions(-) create mode 100644 frontend/react-app/src/components/CreateTeamForm.jsx create mode 100644 frontend/react-app/src/pages/CreateTeamPage.jsx diff --git a/frontend/react-app/src/App.js b/frontend/react-app/src/App.js index 87295d6..8307a60 100644 --- a/frontend/react-app/src/App.js +++ b/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() { } urlReirect={"/home"}>}/> } urlReirect={"/login"}>}/> } urlReirect={"/home"}>}/> - + } urlReirect={"/home"}>}/> {/*Default path should be login, unless specified */} } /> diff --git a/frontend/react-app/src/api/adminApi.js b/frontend/react-app/src/api/adminApi.js index 03ffdf0..f375631 100644 --- a/frontend/react-app/src/api/adminApi.js +++ b/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 diff --git a/frontend/react-app/src/api/teamApi.js b/frontend/react-app/src/api/teamApi.js index 722ae49..66b2244 100644 --- a/frontend/react-app/src/api/teamApi.js +++ b/frontend/react-app/src/api/teamApi.js @@ -2,7 +2,7 @@ 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" }, @@ -10,21 +10,14 @@ export const createTeam = async (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 diff --git a/frontend/react-app/src/api/teamMemberAccountApi.js b/frontend/react-app/src/api/teamMemberAccountApi.js index 4da017e..e403814 100644 --- a/frontend/react-app/src/api/teamMemberAccountApi.js +++ b/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' }); diff --git a/frontend/react-app/src/components/CreateTaskForm.jsx b/frontend/react-app/src/components/CreateTaskForm.jsx index 5b8ddaf..7eb0817 100644 --- a/frontend/react-app/src/components/CreateTaskForm.jsx +++ b/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"); diff --git a/frontend/react-app/src/components/CreateTeamForm.jsx b/frontend/react-app/src/components/CreateTeamForm.jsx new file mode 100644 index 0000000..6907e07 --- /dev/null +++ b/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( +
+ + + + ( + diff --git a/frontend/react-app/src/pages/CreateTeamPage.jsx b/frontend/react-app/src/pages/CreateTeamPage.jsx new file mode 100644 index 0000000..c15475c --- /dev/null +++ b/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 (
...Loading
) + } + return ( +
+
+
+ +
+
+ ) +}