#2131 - hook up getAllTeamTypes

Author: RChandler234

src/backend/src/controllers/design-reviews.controllers.ts

@@ -13,6 +13,15 @@ export default class DesignReviewsController {
     }
   }
 
+  static async getAllTeamTypes(req: Request, res: Response, next: NextFunction) {
+    try {
+      const teamTypes = await DesignReviewsService.getAllTeamTypes();
+      return res.status(200).json(teamTypes);
+    } catch (error: unknown) {
+      next(error);
+    }
+  }
+
   static async deleteDesignReview(req: Request, res: Response, next: NextFunction) {
     try {
       const drId: string = req.params.designReviewId;

src/backend/src/routes/design-reviews.routes.ts

@@ -7,6 +7,8 @@ const designReviewsRouter = express.Router();
 
 designReviewsRouter.get('/', DesignReviewsController.getAllDesignReviews);
 
+designReviewsRouter.get('/teamType/all', DesignReviewsController.getAllTeamTypes);
+
 designReviewsRouter.delete('/:designReviewId/delete', DesignReviewsController.deleteDesignReview);
 designReviewsRouter.get('/:designReviewId', DesignReviewsController.getSingleDesignReview);
 

src/backend/src/services/design-reviews.services.ts

@@ -1,5 +1,5 @@
 import { Design_Review_Status, User } from '@prisma/client';
-import { DesignReview, WbsNumber, isAdmin, isLeadership, isNotLeadership } from 'shared';
+import { DesignReview, TeamType, WbsNumber, isAdmin, isLeadership, isNotLeadership } from 'shared';
 import prisma from '../prisma/prisma';
 import {
   NotFoundException,
@@ -27,6 +27,11 @@ export default class DesignReviewsService {
     return designReviews.map(designReviewTransformer);
   }
 
+  static async getAllTeamTypes(): Promise<TeamType[]> {
+    const teamTypes = await prisma.teamType.findMany();
+    return teamTypes;
+  }
+
   /**
    * Deletes a design review
    * @param submitter the user who deleted the design review

src/frontend/src/apis/design-reviews.api.ts

@@ -1,4 +1,8 @@
-import axios from 'axios';
+/*
+ * This file is part of NER's FinishLine and licensed under GNU AGPLv3.
+ * See the LICENSE file in the repository root folder for details.
+ */
+import axios from '../utils/axios';
 import { DesignReview } from 'shared';
 import { apiUrls } from '../utils/urls';
 import { CreateDesignReviewsPayload } from '../hooks/design-reviews.hooks';
@@ -19,3 +23,12 @@ export const getAllDesignReviews = () => {
     transformResponse: (data) => JSON.parse(data)
   });
 };
+
+/**
+ * Gets all the team types
+ */
+export const getAllTeamTypes = () => {
+  return axios.get(apiUrls.teamTypes(), {
+    transformResponse: (data) => JSON.parse(data)
+  });
+};

src/frontend/src/components/DesignReviewCreateModal.tsx

@@ -1,6 +1,10 @@
+/*
+ * This file is part of NER's FinishLine and licensed under GNU AGPLv3.
+ * See the LICENSE file in the repository root folder for details.
+ */
 import { useMutation, useQuery, useQueryClient } from 'react-query';
-import { DesignReview, WbsNumber } from 'shared';
-import { createDesignReviews, getAllDesignReviews } from '../apis/design-reviews.api';
+import { DesignReview, TeamType, WbsNumber } from 'shared';
+import { createDesignReviews, getAllDesignReviews, getAllTeamTypes } from '../apis/design-reviews.api';
 
 export interface CreateDesignReviewsPayload {
   dateScheduled: Date;
@@ -43,3 +47,15 @@ export const useAllDesignReviews = () => {
     return data;
   });
 };
+
+/**
+ * Custom react hook to get all team types
+ *
+ * @returns all the team types
+ */
+export const useAllTeamTypes = () => {
+  return useQuery<TeamType[], Error>(['teamTypes'], async () => {
+    const { data } = await getAllTeamTypes();
+    return data;
+  });
+};

src/frontend/src/hooks/design-reviews.hooks.ts

@@ -1,13 +1,14 @@
 import { Box, Card, CardContent, Grid, IconButton, Stack, Typography } from '@mui/material';
 import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
-import { DesignReview } from 'shared';
+import { DesignReview, TeamType } from 'shared';
 import { meetingStartTimePipe } from '../../../utils/pipes';
 import ConstructionIcon from '@mui/icons-material/Construction';
 import WorkOutlineIcon from '@mui/icons-material/WorkOutline';
 import ElectricalServicesIcon from '@mui/icons-material/ElectricalServices';
 import TerminalIcon from '@mui/icons-material/Terminal';
 import { useState } from 'react';
 import DRCSummaryModal from '../DesignReviewSummaryModal';
+import { DesignReviewCreateModal } from '../DesignReviewCreateModal';
 
 export const getTeamTypeIcon = (teamTypeId: string, isLarge?: boolean) => {
   const teamIcons: Map<string, JSX.Element> = new Map([
@@ -22,13 +23,16 @@ export const getTeamTypeIcon = (teamTypeId: string, isLarge?: boolean) => {
 interface CalendarDayCardProps {
   cardDate: Date;
   events: DesignReview[];
+  teamTypes: TeamType[];
 }
 
-const CalendarDayCard: React.FC<CalendarDayCardProps> = ({ cardDate, events }) => {
+const CalendarDayCard: React.FC<CalendarDayCardProps> = ({ cardDate, events, teamTypes }) => {
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+
   const DayCardTitle = () => (
     <Grid container alignItems="center" margin={0} padding={0}>
       <Grid item>
-        <IconButton>
+        <IconButton onClick={() => setIsCreateModalOpen(true)}>
           <AddCircleOutlineIcon fontSize="small" />
         </IconButton>
       </Grid>
@@ -74,6 +78,13 @@ const CalendarDayCard: React.FC<CalendarDayCardProps> = ({ cardDate, events }) =
 
   return (
     <Card sx={{ borderRadius: 2, minWidth: 150, maxWidth: 150, minHeight: 90, maxHeight: 90 }}>
+      <DesignReviewCreateModal
+        showModal={isCreateModalOpen}
+        handleClose={() => {
+          setIsCreateModalOpen(false);
+        }}
+        teamTypes={teamTypes}
+      />
       <CardContent sx={{ padding: 0 }}>
         <DayCardTitle />
         {events.length < 3 ? (

src/frontend/src/pages/CalendarPage/CalendarComponents/CalendarDayCard.tsx

@@ -18,9 +18,13 @@ import {
   testDesignReview1
 } from '../../utils/design-review.utils';
 import ActionsMenu from '../../components/ActionsMenu';
+import { useAllTeamTypes } from '../../hooks/design-reviews.hooks';
+import LoadingIndicator from '../../components/LoadingIndicator';
+import ErrorPage from '../ErrorPage';
 
 const CalendarPage = () => {
   const theme = useTheme();
+  const { data, isLoading, isError, error } = useAllTeamTypes();
 
   const [displayMonthYear, setDisplayMonthYear] = useState<Date>(new Date());
 
@@ -67,6 +71,9 @@ const CalendarPage = () => {
     </ActionsMenu>
   );
 
+  if (!data || isLoading) return <LoadingIndicator />;
+  if (isError) return <ErrorPage error={error} message={error?.message} />;
+
   return (
     <PageLayout
       title="Design Review Calendar"
@@ -98,7 +105,11 @@ const CalendarPage = () => {
                       {isDayInDifferentMonth(day, week) ? (
                         <FillerCalendarDayCard day={day} />
                       ) : (
-                        <CalendarDayCard cardDate={cardDate} events={EventDict.get(cardDate.getDate()) ?? []} />
+                        <CalendarDayCard
+                          cardDate={cardDate}
+                          events={EventDict.get(cardDate.getDate()) ?? []}
+                          teamTypes={data}
+                        />
                       )}
                     </Box>
                   </Grid>