Merge pull request #1702 from Northeastern-Electric-Racing/wp-form-view-wrong-blockedby

#1623 - work package showing wrong blockedBy bug

Author: Peyton-McKee

src/backend/src/routes/work-packages.routes.ts

@@ -6,7 +6,7 @@ import { intMinZero, isDate, isWorkPackageStageOrNone, nonEmptyString } from '..
 const workPackagesRouter = express.Router();
 
 workPackagesRouter.get('/', WorkPackagesController.getAllWorkPackages);
-workPackagesRouter.get(
+workPackagesRouter.post(
   '/get-many',
   body('wbsNums').isArray(),
   intMinZero(body('wbsNums.*.carNumber')),

src/frontend/src/apis/work-packages.api.ts

@@ -90,6 +90,20 @@ export const getAllBlockingWorkPackages = (wbsNum: WbsNumber) => {
   });
 };
 
+/**
+ * Gets the work package corresponding with each wbsNum in the submitted array.
+ * @param wbsNums the WBS Numbers of the work packages being fetched.
+ */
+export const getManyWorkPackages = (wbsNums: WbsNumber[]) => {
+  return axios.post<WorkPackage[]>(
+    apiUrls.workPackagesMany(),
+    { wbsNums },
+    {
+      transformResponse: (data) => JSON.parse(data).map(workPackageTransformer)
+    }
+  );
+};
+
 /**
  * Slack upcoming deadlines.
  */

src/frontend/src/hooks/work-packages.hooks.ts

@@ -12,7 +12,8 @@ import {
   getAllBlockingWorkPackages,
   getAllWorkPackages,
   getSingleWorkPackage,
-  slackUpcomingDeadlines
+  slackUpcomingDeadlines,
+  getManyWorkPackages
 } from '../apis/work-packages.api';
 
 /**
@@ -99,6 +100,16 @@ export const useGetBlockingWorkPackages = (wbsNum: WbsNumber) => {
   });
 };
 
+/**
+ * Custom React Hook to get many work packages
+ */
+export const useGetManyWorkPackages = (wbsNums: WbsNumber[]) => {
+  return useQuery<WorkPackage[], Error>(['work packages', 'blocking', wbsNums], async () => {
+    const { data } = await getManyWorkPackages(wbsNums);
+    return data;
+  });
+};
+
 /**
  * Custom React Hook to slack upcoming deadlines.
  */

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/WorkPackageSummary.tsx

@@ -18,7 +18,7 @@ import Grid from '@mui/material/Grid';
 import { useTheme } from '@mui/material';
 import DetailDisplay from '../../../components/DetailDisplay';
 import WorkPackageStageChip from '../../../components/WorkPackageStageChip';
-import { useGetBlockingWorkPackages } from '../../../hooks/work-packages.hooks';
+import { useGetManyWorkPackages } from '../../../hooks/work-packages.hooks';
 import LoadingIndicator from '../../../components/LoadingIndicator';
 import ErrorPage from '../../ErrorPage';
 
@@ -37,7 +37,7 @@ const WorkPackageSummary: React.FC<WorkPackageSummaryProps> = ({ workPackage })
     </ul>
   );
 
-  const { data: dependencies, isError, isLoading, error } = useGetBlockingWorkPackages(workPackage.wbsNum);
+  const { data: dependencies, isError, isLoading, error } = useGetManyWorkPackages(workPackage.blockedBy);
   const theme = useTheme();
 
   if (!dependencies || isLoading) return <LoadingIndicator />;

src/frontend/src/pages/WorkPackageDetailPage/WorkPackageViewContainer/WorkPackageViewContainer.tsx

@@ -22,7 +22,7 @@ import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp
 import DoneOutlineIcon from '@mui/icons-material/DoneOutline';
 import Delete from '@mui/icons-material/Delete';
 import DeleteWorkPackage from '../DeleteWorkPackageModalContainer/DeleteWorkPackage';
-import { useGetBlockingWorkPackages } from '../../../hooks/work-packages.hooks';
+import { useGetManyWorkPackages } from '../../../hooks/work-packages.hooks';
 import PageLayout from '../../../components/PageLayout';
 import LoadingIndicator from '../../../components/LoadingIndicator';
 import ErrorPage from '../../ErrorPage';
@@ -52,7 +52,7 @@ const WorkPackageViewContainer: React.FC<WorkPackageViewContainerProps> = ({
   const [showStageGateModal, setShowStageGateModal] = useState<boolean>(false);
   const [showDeleteModal, setShowDeleteModal] = useState<boolean>(false);
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const { data: dependencies, isError, isLoading, error } = useGetBlockingWorkPackages(workPackage.wbsNum);
+  const { data: dependencies, isError, isLoading, error } = useGetManyWorkPackages(workPackage.blockedBy);
   const dropdownOpen = Boolean(anchorEl);
   const wbsNum = wbsPipe(workPackage.wbsNum);
 

src/frontend/src/tests/pages/ProjectDetailPage/ProjectViewContainer.test.tsx

@@ -12,7 +12,7 @@ import { WorkPackageStage } from 'shared/src/types/work-package-types';
 import * as userHooks from '../../../hooks/users.hooks';
 import * as authHooks from '../../../hooks/auth.hooks';
 import * as wpHooks from '../../../hooks/work-packages.hooks';
-import { mockUseGetBlockingWorkPackagesReturnValue, mockUseUsersFavoriteProjects } from '../../test-support/mock-hooks';
+import { mockManyWorkPackages, mockUseUsersFavoriteProjects } from '../../test-support/mock-hooks';
 import { exampleAllWorkPackages } from '../../test-support/test-data/work-packages.stub';
 
 vi.mock('../../../utils/axios');
@@ -33,9 +33,7 @@ describe('Rendering Project View Container', () => {
     vi.spyOn(authHooks, 'useAuth').mockReturnValue(mockAuth(false, exampleAdminUser));
     vi.spyOn(userHooks, 'useCurrentUser').mockReturnValue(exampleAdminUser);
     vi.spyOn(userHooks, 'useUsersFavoriteProjects').mockReturnValue(mockUseUsersFavoriteProjects());
-    vi.spyOn(wpHooks, 'useGetBlockingWorkPackages').mockReturnValue(
-      mockUseGetBlockingWorkPackagesReturnValue(exampleAllWorkPackages)
-    );
+    vi.spyOn(wpHooks, 'useGetManyWorkPackages').mockReturnValue(mockManyWorkPackages(exampleAllWorkPackages));
     renderComponent();
   });
 

src/frontend/src/tests/pages/WorkPackageDetailPage/WorkPackagePage.test.tsx

@@ -7,7 +7,7 @@ import { UseQueryResult } from 'react-query';
 import { AuthenticatedUser, WorkPackage } from 'shared';
 import { render, screen, routerWrapperBuilder, act, fireEvent } from '../../test-support/test-utils';
 import { Auth } from '../../../utils/types';
-import { useGetBlockingWorkPackages, useSingleWorkPackage } from '../../../hooks/work-packages.hooks';
+import { useGetManyWorkPackages, useSingleWorkPackage } from '../../../hooks/work-packages.hooks';
 import { useAuth } from '../../../hooks/auth.hooks';
 import { mockAuth, mockUseQueryResult } from '../../test-support/test-data/test-utils.stub';
 import { exampleDesignWorkPackage, exampleResearchWorkPackage } from '../../test-support/test-data/work-packages.stub';
@@ -25,7 +25,7 @@ const mockSingleWPHook = (isLoading: boolean, isError: boolean, data?: WorkPacka
   mockedUseSingleWorkPackage.mockReturnValue(mockUseQueryResult<WorkPackage>(isLoading, isError, data, error));
 };
 
-const mockedGetBlockingWorkPackages = useGetBlockingWorkPackages as jest.Mock<UseQueryResult<WorkPackage[]>>;
+const mockedGetBlockingWorkPackages = useGetManyWorkPackages as jest.Mock<UseQueryResult<WorkPackage[]>>;
 
 const mockGetBlockingWorkPackagesHook = (isLoading: boolean, isError: boolean, data?: WorkPackage[], error?: Error) => {
   mockedGetBlockingWorkPackages.mockReturnValue(mockUseQueryResult<WorkPackage[]>(isLoading, isError, data, error));

src/frontend/src/tests/pages/WorkPackageDetailPage/WorkPackageViewContainer/WorkPackageViewContainer.test.tsx

@@ -10,7 +10,7 @@ import * as wpHooks from '../../../../hooks/work-packages.hooks';
 import { exampleAdminUser } from '../../../test-support/test-data/users.stub';
 import AppContextUser from '../../../../app/AppContextUser';
 import * as userHooks from '../../../../hooks/users.hooks';
-import { mockUseGetBlockingWorkPackagesReturnValue } from '../../../test-support/mock-hooks';
+import { mockManyWorkPackages } from '../../../test-support/mock-hooks';
 
 // Sets up the component under test with the desired values and renders it.
 const renderComponent = (
@@ -42,9 +42,7 @@ const renderComponent = (
 describe.skip('work package container view', () => {
   beforeEach(() => {
     vi.spyOn(userHooks, 'useCurrentUser').mockReturnValue(exampleAdminUser);
-    vi.spyOn(wpHooks, 'useGetBlockingWorkPackages').mockReturnValue(
-      mockUseGetBlockingWorkPackagesReturnValue([exampleResearchWorkPackage])
-    );
+    vi.spyOn(wpHooks, 'useGetManyWorkPackages').mockReturnValue(mockManyWorkPackages([exampleResearchWorkPackage]));
   });
 
   it('renders the project', () => {

src/frontend/src/tests/test-support/mock-hooks.ts

@@ -83,5 +83,5 @@ export const mockUseAllWorkPackagesReturnValue = (workPackages: WorkPackage[]) =
 export const mockUseAllProjectsReturnValue = (projects: Project[]) =>
   mockUseQueryResult<Project[]>(false, false, projects, new Error());
 
-export const mockUseGetBlockingWorkPackagesReturnValue = (workPackages: WorkPackage[]) =>
+export const mockManyWorkPackages = (workPackages: WorkPackage[]) =>
   mockUseQueryResult<WorkPackage[]>(false, false, workPackages, new Error());

src/frontend/src/utils/urls.ts

@@ -53,6 +53,7 @@ const workPackagesEdit = () => `${workPackages()}/edit`;
 const workPackagesDelete = (wbsNum: string) => `${workPackagesByWbsNum(wbsNum)}/delete`;
 const workPackagesBlocking = (wbsNum: string) => `${workPackagesByWbsNum(wbsNum)}/blocking`;
 const workPackagesSlackUpcomingDeadlines = () => `${workPackages()}/slack-upcoming-deadlines`;
+const workPackagesMany = () => `${workPackages()}/get-many`;
 
 /**************** Change Requests Endpoints ****************/
 const changeRequests = () => `${API_URL}/change-requests`;
@@ -142,6 +143,7 @@ export const apiUrls = {
   workPackagesDelete,
   workPackagesBlocking,
   workPackagesSlackUpcomingDeadlines,
+  workPackagesMany,
 
   changeRequests,
   changeRequestsById,