#1183 hook done

Author: walker-sean

src/frontend/src/apis/teams.api.ts

@@ -36,3 +36,7 @@ export const setTeamHead = (id: string, userId: number) => {
     userId
   });
 };
+
+export const deleteTeam = (id: string) => {
+  return axios.post<{ message: string }>(apiUrls.teamsDelete(id));
+};

src/frontend/src/hooks/teams.hooks.ts

@@ -5,7 +5,7 @@
 
 import { useQuery, useQueryClient, useMutation } from 'react-query';
 import { Team } from 'shared';
-import { getAllTeams, getSingleTeam, setTeamMembers, setTeamDescription, setTeamHead } from '../apis/teams.api';
+import { getAllTeams, getSingleTeam, setTeamMembers, setTeamDescription, setTeamHead, deleteTeam } from '../apis/teams.api';
 
 export const useAllTeams = () => {
   return useQuery<Team[], Error>(['teams'], async () => {
@@ -67,3 +67,19 @@ export const useEditTeamDescription = (teamId: string) => {
     }
   );
 };
+
+export const useDeleteTeam = () => {
+  const queryClient = useQueryClient();
+  return useMutation<{ message: string }, Error, any>(
+    ['teams', 'delete'],
+    async (teamId: string) => {
+      const { data } = await deleteTeam(teamId);
+      return data;
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(['teams']);
+      }
+    }
+  );
+};

src/frontend/src/pages/TeamDetailPage/DeleteTeamModalContainer/DeleteTeam.tsx

@@ -0,0 +1,42 @@
+import { useHistory } from 'react-router-dom';
+import { useToast } from '../../../hooks/toasts.hooks';
+import { useDeleteWorkPackage } from '../../../hooks/work-packages.hooks';
+import { useDeleteTeam } from '../../../hooks/teams.hooks';
+import LoadingIndicator from '../../../components/LoadingIndicator';
+import ErrorPage from '../../ErrorPage';
+
+interface DeleteTeamProps {
+  teamId: string;
+  showModal: boolean;
+  handleClose: () => void;
+}
+
+export interface DeleteTeamInputs {
+  teamId: string;
+}
+
+const DeleteTeam: React.FC<DeleteTeamProps> = ({ teamId, showModal, handleClose }: DeleteTeamProps) => {
+  const history = useHistory();
+  const toast = useToast();
+  const { isLoading, isError, error, mutateAsync } = useDeleteTeam();
+
+  const handleConfirm = async ({ teamId }: DeleteTeamInputs) => {
+    try {
+      await mutateAsync(teamId);
+      handleClose();
+      history.goBack();
+      toast.success('Team deleted successfully!');
+    } catch (e) {
+      if (e instanceof Error) {
+        toast.error(e.message);
+      }
+    }
+  };
+
+  if (isLoading) return <LoadingIndicator />;
+  if (isError) return <ErrorPage message={error?.message} />;
+
+  return <DeleteTeamView team={teamId} showModal={showModal} onHide={handleClose} onSubmit={handleConfirm} />;
+};
+
+export default DeleteTeam;

src/frontend/src/pages/TeamDetailPage/DeleteTeamModalContainer/DeleteTeamView.tsx

@@ -1,12 +1,12 @@
 import { Grid } from '@mui/material';
 import { useSingleTeam } from '../../hooks/teams.hooks';
 import { useParams } from 'react-router-dom';
-import TeamMembersPageBlock from '../TeamsPage/TeamMembersPageBlock';
+import TeamMembersPageBlock from './TeamMembersPageBlock';
 import LoadingIndicator from '../../components/LoadingIndicator';
 import ErrorPage from '../ErrorPage';
 import PageBlock from '../../layouts/PageBlock';
-import ActiveProjectCardView from '../TeamsPage/ProjectCardsView';
-import DescriptionPageBlock from '../TeamsPage/DescriptionPageBlock';
+import ActiveProjectCardView from './ProjectCardsView';
+import DescriptionPageBlock from './DescriptionPageBlock';
 import { routes } from '../../utils/routes';
 import PageLayout from '../../components/PageLayout';
 

src/frontend/src/pages/TeamDetailPage/TeamDetailPage.tsx

@@ -68,6 +68,7 @@ const changeRequestCreateProposeSolution = () => `${changeRequestsCreate()}/prop
 /**************** Teams Endpoints ****************/
 const teams = () => `${API_URL}/teams`;
 const teamsById = (id: string) => `${teams()}/${id}`;
+const teamsDelete = (id: string) => `${teams()}/${id}`;
 const teamsSetMembers = (id: string) => `${teamsById(id)}/set-members`;
 const teamsSetHead = (id: string) => `${teamsById(id)}/set-head`;
 const teamsSetDescription = (id: string) => `${teamsById(id)}/edit-description`;
@@ -151,6 +152,7 @@ export const apiUrls = {
 
   teams,
   teamsById,
+  teamsDelete,
   teamsSetMembers,
   teamsSetHead,
   teamsSetDescription,