Merge pull request #2220 from Northeastern-Electric-Racing/#2062-single-design-review-hook

#2062 created hook for single design review

Author: RChandler234

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

@@ -14,3 +14,14 @@ export const getAllDesignReviews = () => {
     transformResponse: (data) => JSON.parse(data).map(designReviewTransformer)
   });
 };
+
+/**
+ * Gets a single design review
+ * @param id the ID of the design review to return
+ * @returns the request design review
+ */
+export const getSingleDesignReview = async (id: string) => {
+  return axios.get(apiUrls.designReviewById(id), {
+    transformResponse: (data) => designReviewTransformer(JSON.parse(data))
+  });
+};

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

@@ -3,7 +3,7 @@
  * See the LICENSE file in the repository root folder for details.
  */
 import { useQuery } from 'react-query';
-import { getAllDesignReviews } from '../apis/design-reviews.api';
+import { getAllDesignReviews, getSingleDesignReview } from '../apis/design-reviews.api';
 import { DesignReview } from 'shared';
 
 /**
@@ -17,3 +17,15 @@ export const useAllDesignReviews = () => {
     return data;
   });
 };
+
+/**
+ * Custom react hook to get a single design review
+ *
+ * @returns a single design review
+ */
+export const useSingleDesignReview = (id: string) => {
+  return useQuery<DesignReview, Error>(['design-reviews', id], async () => {
+    const { data } = await getSingleDesignReview(id);
+    return data;
+  });
+};

src/frontend/src/pages/CalendarPage/Calendar.tsx

@@ -5,12 +5,12 @@
 import { Route, Switch } from 'react-router-dom';
 import { routes } from '../../utils/routes';
 import CalendarPage from './CalendarPage';
-import DesignReviewDetailPage from './DesignReviewDetailPage/DesignReviewDetailPage';
+import DesignReviewDetails from './DesignReviewDetailPage/DesignReviewDetails';
 
 const Calendar: React.FC = () => {
   return (
     <Switch>
-      <Route path={routes.DESIGN_REVIEW_BY_ID} component={DesignReviewDetailPage} />
+      <Route path={routes.DESIGN_REVIEW_BY_ID} component={DesignReviewDetails} />
       <Route path={routes.CALENDAR} component={CalendarPage} />
     </Switch>
   );

src/frontend/src/pages/CalendarPage/DesignReviewDetailPage/DesignReviewDetailPage.tsx

@@ -10,19 +10,20 @@ import { useState } from 'react';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 import { routes } from '../../../utils/routes';
+import { DesignReview, wbsPipe } from 'shared';
 
 interface DesignReviewDetailPageProps {
-  name: string;
+  designReview: DesignReview;
 }
 
-const DesignReviewDetailPage: React.FC<DesignReviewDetailPageProps> = ({ name }) => {
+const DesignReviewDetailPage: React.FC<DesignReviewDetailPageProps> = ({ designReview, designReview: { teamType } }) => {
   const theme = useTheme();
   const { isLoading: allUsersIsLoading, isError: allUsersIsError, error: allUsersError, data: allUsers } = useAllUsers();
   const [requiredUsers, setRequiredUsers] = useState([].map(userToAutocompleteOption));
   const [optionalUsers, setOptionalUsers] = useState([].map(userToAutocompleteOption));
   if (allUsersIsError) return <ErrorPage message={allUsersError?.message} />;
   if (allUsersIsLoading || !allUsers) return <LoadingIndicator />;
-
+  const designReviewName = `${wbsPipe(designReview.wbsNum)} - ${designReview.wbsName}`;
   const users = allUsers.map(userToAutocompleteOption);
 
   return (
@@ -52,7 +53,7 @@ const DesignReviewDetailPage: React.FC<DesignReviewDetailPageProps> = ({ name })
         </Grid>
         <Grid item xs={3}>
           <Box sx={{ padding: 1.5, fontSize: '1.2em', backgroundColor: 'grey', borderRadius: 3, textAlign: 'center' }}>
-            {name}
+            {designReviewName}
           </Box>
         </Grid>
         <Grid item xs={1}>
@@ -74,7 +75,7 @@ const DesignReviewDetailPage: React.FC<DesignReviewDetailPageProps> = ({ name })
         <Grid item xs={3}>
           <Box sx={{ padding: 1, backgroundColor: 'grey', borderRadius: 3, textAlign: 'center' }}>
             <Autocomplete
-              isOptionEqualToValue={(option, value) => option.id === value.id} // What is this for
+              isOptionEqualToValue={(option, value) => option.id === value.id}
               multiple
               disableCloseOnSelect
               limitTags={1}
@@ -120,7 +121,7 @@ const DesignReviewDetailPage: React.FC<DesignReviewDetailPageProps> = ({ name })
         <Grid item xs={3}>
           <Box sx={{ padding: 1, backgroundColor: 'grey', borderRadius: 3, textAlign: 'center' }}>
             <Autocomplete
-              isOptionEqualToValue={(option, value) => option.id === value.id} // What is this for
+              isOptionEqualToValue={(option, value) => option.id === value.id}
               multiple
               disableCloseOnSelect
               limitTags={1}

src/frontend/src/pages/CalendarPage/DesignReviewDetailPage/DesignReviewDetails.tsx

@@ -0,0 +1,21 @@
+/*
+ * 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 LoadingIndicator from '../../../components/LoadingIndicator';
+import { useParams } from 'react-router-dom';
+import ErrorPage from '../../ErrorPage';
+import DesignReviewDetailPage from './DesignReviewDetailPage';
+import { useSingleDesignReview } from '../../../hooks/design-reviews.hooks';
+
+const DesignReviewDetails: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+  const { data: designReview, isError, error, isLoading } = useSingleDesignReview(id);
+
+  if (isError) return <ErrorPage error={error} />;
+  if (!designReview || isLoading) return <LoadingIndicator />;
+
+  return <DesignReviewDetailPage designReview={designReview} />;
+};
+
+export default DesignReviewDetails;

src/frontend/src/pages/CalendarPage/SummaryComponents/DesignReviewSummaryModalButtons.tsx

@@ -74,7 +74,7 @@ const DesignReviewSummaryModalButtons: React.FC<DesignReviewSummaryModalButtonsP
             textDecoration: 'none'
           }}
           component={RouterLink}
-          to={`${routes.CALENDAR}/1`}
+          to={`${routes.CALENDAR}/${designReview.designReviewId}`}
         >
           <NERFailButton
             sx={{

src/frontend/src/tests/hooks/DesignReviews.hooks.test.tsx

@@ -8,9 +8,9 @@ import { AxiosResponse } from 'axios';
 import { DesignReview } from 'shared';
 import wrapper from '../../app/AppContextQuery';
 import { mockPromiseAxiosResponse } from '../test-support/test-data/test-utils.stub';
-import { exampleAllDesignReviews } from '../test-support/test-data/design-reviews.stub';
-import { getAllDesignReviews } from '../../apis/design-reviews.api';
-import { useAllDesignReviews } from '../../hooks/design-reviews.hooks';
+import { exampleAllDesignReviews, exampleDesignReview1 } from '../test-support/test-data/design-reviews.stub';
+import { getAllDesignReviews, getSingleDesignReview } from '../../apis/design-reviews.api';
+import { useAllDesignReviews, useSingleDesignReview } from '../../hooks/design-reviews.hooks';
 
 vi.mock('../../apis/design-reviews.api');
 
@@ -23,4 +23,13 @@ describe('design review hooks', () => {
     await waitFor(() => result.current.isSuccess);
     expect(result.current.data).toEqual(exampleAllDesignReviews);
   });
+
+  it('handles getting a single design review', async () => {
+    const mockedGetSingleDesignReview = getSingleDesignReview as jest.Mock<Promise<AxiosResponse<DesignReview>>>;
+    mockedGetSingleDesignReview.mockReturnValue(mockPromiseAxiosResponse<DesignReview>(exampleDesignReview1));
+
+    const { result, waitFor } = renderHook(() => useSingleDesignReview('1'), { wrapper });
+    await waitFor(() => result.current.isSuccess);
+    expect(result.current.data).toEqual(exampleDesignReview1);
+  });
 });

src/frontend/src/utils/urls.ts

@@ -133,6 +133,7 @@ const bomCreateUnit = () => `${bomEndpoints()}/units/create`;
 
 /**************** Design Reviews Endpoints ****************/
 const designReviews = () => `${API_URL}/design-reviews`;
+const designReviewById = (id: string) => `${designReviews()}/${id}`;
 
 /**************** Other Endpoints ****************/
 const version = () => `https://api.github.com/repos/Northeastern-Electric-Racing/FinishLine/releases/latest`;
@@ -189,6 +190,7 @@ export const apiUrls = {
   changeRequestRequestReviewer,
 
   designReviews,
+  designReviewById,
 
   teams,
   teamsById,