table now refetches and displays data

transcom · Jan 29, 2025 · bc78def · bc78def
2 parents 70540fd + bb970df
commit bc78def
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 28 deletions.
diff --git a/src/components/Table/TableQueue.jsx b/src/components/Table/TableQueue.jsx
@@ -109,7 +109,6 @@ const TableQueue = ({
     setIsBulkAssignModalVisible(true);
   };
 
-  const [tableData, setTableData] = useState([]);
   const {
     queueResult: {
       totalCount = 0,
@@ -127,10 +126,8 @@ const TableQueue = ({
     currentPage,
     currentPageSize,
     viewAsGBLOC: selectedGbloc,
-    onSuccess: (res) => {
-      if (tableData.length < 1) setTableData(res.queueMoves);
-    },
   });
+  const tableData = useMemo(() => data, [data]);
 
   // react-table setup below
   const defaultColumn = useMemo(
@@ -140,14 +137,12 @@ const TableQueue = ({
     }),
     [],
   );
-  // const cachedTableData = useMemo(() => data, [data]);
 
   const { mutate: mutateBulkAssignment } = useMutation(saveBulkAssignmentData, {
     onSuccess: () => {
-      // reload page to refetch queue
-      // window.location.reload();
-      refetch().then((res) => {
-        setTableData([...res.data.queueMoves]);
+      // refetch queue
+      refetch().then(() => {
+        setIsBulkAssignModalVisible(false);
       });
     },
   });
@@ -332,10 +327,7 @@ const TableQueue = ({
   };
 
   const handleCloseBulkAssignModal = () => {
-    refetch().then((res) => {
-      setTableData([...res.data.queueMoves]);
-      setIsBulkAssignModalVisible(false);
-    });
+    setIsBulkAssignModalVisible(false);
   };
 
   const onSubmitBulk = (bulkAssignmentSavePayload) => {

diff --git a/src/hooks/queries.js b/src/hooks/queries.js
@@ -572,9 +572,12 @@ export const useMovesQueueQueries = ({
   currentPageSize = PAGINATION_PAGE_SIZE_DEFAULT,
   viewAsGBLOC,
 }) => {
-  const { data = {}, ...movesQueueQuery } = useQuery(
-    [MOVES_QUEUE, { sort, order, filters, currentPage, currentPageSize, viewAsGBLOC }],
-    ({ queryKey }) => getMovesQueue(...queryKey),
+  const {
+    refetch,
+    data = {},
+    ...movesQueueQuery
+  } = useQuery([MOVES_QUEUE, { sort, order, filters, currentPage, currentPageSize, viewAsGBLOC }], ({ queryKey }) =>
+    getMovesQueue(...queryKey),
   );
   const { isLoading, isError, isSuccess } = movesQueueQuery;
   const { queueMoves, ...dataProps } = data;
@@ -583,6 +586,7 @@ export const useMovesQueueQueries = ({
     isLoading,
     isError,
     isSuccess,
+    refetch,
   };
 };
 
@@ -594,7 +598,11 @@ export const useServicesCounselingQueuePPMQueries = ({
   currentPageSize = PAGINATION_PAGE_SIZE_DEFAULT,
   viewAsGBLOC,
 }) => {
-  const { data = {}, ...servicesCounselingQueueQuery } = useQuery(
+  const {
+    refetch,
+    data = {},
+    ...servicesCounselingQueueQuery
+  } = useQuery(
     [
       SERVICES_COUNSELING_QUEUE,
       { sort, order, filters, currentPage, currentPageSize, needsPPMCloseout: true, viewAsGBLOC },
@@ -609,6 +617,7 @@ export const useServicesCounselingQueuePPMQueries = ({
     isLoading,
     isError,
     isSuccess,
+    refetch,
   };
 };
 
@@ -619,7 +628,6 @@ export const useServicesCounselingQueueQueries = ({
   currentPage = PAGINATION_PAGE_DEFAULT,
   currentPageSize = PAGINATION_PAGE_SIZE_DEFAULT,
   viewAsGBLOC,
-  onSuccess,
 }) => {
   const {
     refetch,
@@ -631,7 +639,6 @@ export const useServicesCounselingQueueQueries = ({
       { sort, order, filters, currentPage, currentPageSize, needsPPMCloseout: false, viewAsGBLOC },
     ],
     ({ queryKey }) => getServicesCounselingQueue(...queryKey),
-    { onSuccess },
   );
 
   const { isLoading, isError, isSuccess } = servicesCounselingQueueQuery;

diff --git a/src/pages/Office/MoveQueue/MoveQueue.jsx b/src/pages/Office/MoveQueue/MoveQueue.jsx
@@ -2,13 +2,12 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { useNavigate, NavLink, useParams, Navigate, generatePath } from 'react-router-dom';
 import { Dropdown } from '@trussworks/react-uswds';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useMutation } from '@tanstack/react-query';
 
 import styles from './MoveQueue.module.scss';
 
 import { createHeader } from 'components/Table/utils';
 import { useMovesQueueQueries, useUserQueries, useMoveSearchQueries } from 'hooks/queries';
-import { getMovesQueue, saveBulkAssignmentData } from 'services/ghcApi';
+import { getMovesQueue } from 'services/ghcApi';
 import { formatDateFromIso, serviceMemberAgencyLabel } from 'utils/formatters';
 import MultiSelectCheckBoxFilter from 'components/Table/Filters/MultiSelectCheckBoxFilter';
 import SelectFilter from 'components/Table/Filters/SelectFilter';
@@ -168,7 +167,11 @@ export const columns = (moveLockFlag, isQueueManagementEnabled, showBranchFilter
               >
                 <option value={null}>{DEFAULT_EMPTY_VALUE}</option>
                 {row.availableOfficeUsers?.map(({ lastName, firstName, officeUserId }) => (
-                  <option value={officeUserId} key={`filterOption_${officeUserId}`}>
+                  <option
+                    value={officeUserId}
+                    key={officeUserId}
+                    selected={row.assignedTo?.officeUserId === officeUserId}
+                  >
                     {`${lastName}, ${firstName}`}
                   </option>
                 ))}

diff --git a/src/pages/Office/PaymentRequestQueue/PaymentRequestQueue.jsx b/src/pages/Office/PaymentRequestQueue/PaymentRequestQueue.jsx
@@ -169,7 +169,11 @@ export const columns = (moveLockFlag, isQueueManagementEnabled, showBranchFilter
                 <option value={null}>{DEFAULT_EMPTY_VALUE}</option>
                 {row.availableOfficeUsers.map(({ lastName, firstName, officeUserId }) => {
                   return (
-                    <option value={officeUserId} key={`filterOption_${officeUserId}`}>
+                    <option
+                      value={officeUserId}
+                      key={officeUserId}
+                      selected={row.assignedTo?.officeUserId === officeUserId}
+                    >
                       {`${lastName}, ${firstName}`}
                     </option>
                   );

diff --git a/src/pages/Office/ServicesCounselingQueue/ServicesCounselingQueue.jsx b/src/pages/Office/ServicesCounselingQueue/ServicesCounselingQueue.jsx
@@ -3,7 +3,6 @@ import { generatePath, useNavigate, Navigate, useParams, NavLink } from 'react-r
 import { connect } from 'react-redux';
 import { Button, Dropdown } from '@trussworks/react-uswds';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import styles from './ServicesCounselingQueue.module.scss';
 
@@ -33,7 +32,6 @@ import {
   getServicesCounselingOriginLocations,
   getServicesCounselingPPMQueue,
   getServicesCounselingQueue,
-  saveBulkAssignmentData,
 } from 'services/ghcApi';
 import { DATE_FORMAT_STRING, DEFAULT_EMPTY_VALUE, MOVE_STATUSES } from 'shared/constants';
 import { formatDateFromIso, serviceMemberAgencyLabel } from 'utils/formatters';
@@ -55,7 +53,6 @@ import MultiSelectTypeAheadCheckBoxFilter from 'components/Table/Filters/MutliSe
 import handleQueueAssignment from 'utils/queues';
 import { selectLoggedInUser } from 'store/entities/selectors';
 import SelectedGblocContext from 'components/Office/GblocSwitcher/SelectedGblocContext';
-import { MOVES, MOVES_QUEUE, SERVICES_COUNSELING_PPM_QUEUE, SERVICES_COUNSELING_QUEUE } from 'constants/queryKeys';
 
 export const counselingColumns = (moveLockFlag, originLocationList, supervisor, isQueueManagementEnabled) => {
   const cols = [
@@ -214,7 +211,11 @@ export const counselingColumns = (moveLockFlag, originLocationList, supervisor,
               >
                 <option value={null}>{DEFAULT_EMPTY_VALUE}</option>
                 {row.availableOfficeUsers.map(({ lastName, firstName, officeUserId }) => (
-                  <option value={officeUserId} key={`filterOption_${officeUserId}`}>
+                  <option
+                    value={officeUserId}
+                    key={officeUserId}
+                    selected={row.assignedTo?.officeUserId === officeUserId}
+                  >
                     {`${lastName}, ${firstName}`}
                   </option>
                 ))}
@@ -411,7 +412,11 @@ export const closeoutColumns = (
               >
                 <option value={null}>{DEFAULT_EMPTY_VALUE}</option>
                 {row.availableOfficeUsers.map(({ lastName, firstName, officeUserId }) => (
-                  <option value={officeUserId} key={`filterOption_${officeUserId}`}>
+                  <option
+                    value={officeUserId}
+                    key={officeUserId}
+                    selected={row.assignedTo?.officeUserId === officeUserId}
+                  >
                     {`${lastName}, ${firstName}`}
                   </option>
                 ))}