moved data query to parent to allow passing down to siblings

CMS-Enterprise · Dec 10, 2024 · af2c6c3 · af2c6c3
1 parent 94585c3
commit af2c6c3
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 18 deletions.
diff --git a/src/features/ModelPlan/ModelToOperations/Home/index.tsx b/src/features/ModelPlan/ModelToOperations/Home/index.tsx
@@ -34,7 +34,7 @@ const MTOHome = () => {
 
   const { modelName } = useContext(ModelInfoContext);
 
-  const { data, loading } = useGetModelToOperationsMatrixQuery({
+  const { data, loading, error, refetch } = useGetModelToOperationsMatrixQuery({
     variables: {
       id: modelID
     }
@@ -183,8 +183,8 @@ const MTOHome = () => {
 
         {currentView === 'milestones' && (
           <>
-            <MTOTableActions />
-            <MTOTable />
+            <MTOTableActions refetch={() => refetch({ id: modelID })} />
+            <MTOTable queryData={data} loading={loading} error={error} />
           </>
         )}
       </div>

diff --git a/src/features/ModelPlan/ModelToOperations/_components/Table/Actions/index.test.tsx b/src/features/ModelPlan/ModelToOperations/_components/Table/Actions/index.test.tsx
@@ -15,6 +15,8 @@ import MTOTableActions from '.';
 
 describe('MTO Table Actions Component', () => {
   it('renders correctly and matches snapshot', async () => {
+    const mockRefetch = vi.fn();
+
     const { asFragment } = render(
       <MockedProvider
         mocks={[...commonSolutionsMock, ...commonMilestonesMock]}
@@ -27,7 +29,7 @@ describe('MTO Table Actions Component', () => {
         >
           <MessageProvider>
             <Route path="/models/:modelID/collaboration-area/model-to-operations">
-              <MTOTableActions />
+              <MTOTableActions refetch={() => mockRefetch({ id: modelID })} />
             </Route>
           </MessageProvider>
         </MemoryRouter>

diff --git a/src/features/ModelPlan/ModelToOperations/_components/Table/Actions/index.tsx b/src/features/ModelPlan/ModelToOperations/_components/Table/Actions/index.tsx
@@ -1,8 +1,11 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory, useParams } from 'react-router-dom';
+import { ApolloQueryResult } from '@apollo/client';
 import { Button, Icon } from '@trussworks/react-uswds';
 import {
+  GetModelToOperationsMatrixQuery,
+  GetModelToOperationsMatrixQueryVariables,
   useCreateStandardCategoriesMutation,
   useGetMtoCommonSolutionsQuery,
   useGetMtoMilestonesQuery
@@ -14,7 +17,15 @@ import MTOModal from '../../FormModal';
 
 import './index.scss';
 
-const MTOTableActions = () => {
+const MTOTableActions = ({
+  refetch
+}: {
+  refetch: ({
+    variables
+  }: {
+    variables?: GetModelToOperationsMatrixQueryVariables;
+  }) => Promise<ApolloQueryResult<GetModelToOperationsMatrixQuery>>;
+}) => {
   const { t } = useTranslation('modelToOperationsMisc');
 
   const history = useHistory();
@@ -54,7 +65,10 @@ const MTOTableActions = () => {
     <>
       <MTOModal
         isOpen={isModalOpen}
-        closeModal={() => setIsModalOpen(false)}
+        closeModal={() => {
+          setIsModalOpen(false);
+          refetch({ variables: { id: modelID } });
+        }}
         modalType={modalType}
       />
       <div className="border-1px radius-md border-gray-10 padding-3">

diff --git a/src/features/ModelPlan/ModelToOperations/_components/Table/index.tsx b/src/features/ModelPlan/ModelToOperations/_components/Table/index.tsx
@@ -3,14 +3,14 @@ import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
+import { ApolloError } from '@apollo/client';
 import { Button } from '@trussworks/react-uswds';
 import classNames from 'classnames';
 import { NotFoundPartial } from 'features/NotFound';
 import {
   GetModelToOperationsMatrixDocument,
   GetModelToOperationsMatrixQuery,
   ReorderMtoCategoryMutationVariables,
-  useGetModelToOperationsMatrixQuery,
   useReorderMtoCategoryMutation
 } from 'gql/generated/graphql';
 import i18next from 'i18next';
@@ -42,7 +42,15 @@ export type GetModelToOperationsMatrixQueryType =
 type GetModelToOperationsMatrixCategoryType =
   GetModelToOperationsMatrixQueryType['categories'];
 
-const MTOTable = () => {
+const MTOTable = ({
+  queryData,
+  loading,
+  error
+}: {
+  queryData?: GetModelToOperationsMatrixQuery;
+  loading: boolean;
+  error?: ApolloError;
+}) => {
   const { t } = useTranslation('modelToOperationsMisc');
 
   const { modelID } = useParams<{ modelID: string }>();
@@ -58,16 +66,6 @@ const MTOTable = () => {
     ]
   });
 
-  const {
-    data: queryData,
-    loading,
-    error
-  } = useGetModelToOperationsMatrixQuery({
-    variables: {
-      id: modelID
-    }
-  });
-
   const formattedData = useMemo(
     () =>
       formatAndHomogenizeMilestoneData(