Refactor individual data fetching state management to use RequestStatus

bento-platform · Feb 8, 2025 · f4ac386 · f4ac386
1 parent faead18
commit f4ac386
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 10 deletions.
diff --git a/src/js/components/Search/IndividualsAccordionPane.tsx b/src/js/components/Search/IndividualsAccordionPane.tsx
@@ -5,6 +5,7 @@ import { Descriptions, Skeleton } from 'antd';
 
 import { makeGetIndividualData } from '@/features/search/makeGetIndividualData.thunk';
 import { EM_DASH } from '@/constants/contentConstants';
+import { RequestStatus } from '@/types/requests';
 
 const IndividualsAccordionPane = ({ id }: { id: string }) => {
   const dispatch = useAppDispatch();
@@ -15,7 +16,9 @@ const IndividualsAccordionPane = ({ id }: { id: string }) => {
   }, [dispatch, id]);
 
   const individualData = useAppSelector((state) => state.query.individualDataCache[id]);
-  const isFetchingIndividualData = useAppSelector((state) => state.query.isFetchingIndividualData[id]);
+  const individualDataStatus = useAppSelector((state) => state.query.individualDataStatus[id]);
+
+  const isFetchingIndividualData = individualDataStatus === RequestStatus.Pending;
 
   const items: DescriptionsProps['items'] = [
     {

diff --git a/src/js/features/search/makeGetIndividualData.thunk.ts b/src/js/features/search/makeGetIndividualData.thunk.ts
@@ -4,7 +4,8 @@ import { individualUrl } from '@/constants/configConstants';
 import type { RootState } from '@/store';
 import { printAPIError } from '@/utils/error.util';
 import { authorizedRequestConfig } from '@/utils/requests';
-import type { Individual } from '@/types/clinphen/individual';
+import { Individual } from '@/types/clinphen/individual';
+import { RequestStatus } from '@/types/requests';
 
 export const makeGetIndividualData = createAsyncThunk<
   Individual,
@@ -24,7 +25,7 @@ export const makeGetIndividualData = createAsyncThunk<
   {
     condition(id, { getState }) {
       console.log('requesting individual data for id', id);
-      return !getState().query.isFetchingIndividualData[id] && !getState().query.individualDataCache[id];
+      return getState().query.individualDataStatus[id] !== RequestStatus.Pending;
     },
   }
 );
diff --git a/src/js/features/search/query.store.ts b/src/js/features/search/query.store.ts
@@ -10,12 +10,13 @@ import { makeGetKatsuPublic } from './makeGetKatsuPublic.thunk';
 import { makeGetSearchFields } from './makeGetSearchFields.thunk';
 import { makeGetIndividualData } from './makeGetIndividualData.thunk';
 import type { Individual } from '@/types/clinphen/individual';
+import { RequestStatus } from '@/types/requests';
 
 export type QueryState = {
   isFetchingFields: boolean;
   attemptedFieldsFetch: boolean;
   isFetchingData: boolean;
-  isFetchingIndividualData: { [key: string]: boolean };
+  individualDataStatus: { [key: string]: RequestStatus };
   attemptedFetch: boolean;
   querySections: SearchFieldResponse['sections'];
   queryParams: { [key: string]: string };
@@ -29,7 +30,7 @@ const initialState: QueryState = {
   isFetchingFields: false,
   attemptedFieldsFetch: false,
   isFetchingData: false,
-  isFetchingIndividualData: {},
+  individualDataStatus: {},
   attemptedFetch: false,
   message: '',
   querySections: [],
@@ -71,9 +72,9 @@ const query = createSlice({
         individualCount: payload.count,
         individualMatches: payload.matches, // Undefined if no permissions
       };
-      state.isFetchingIndividualData = {};
+      state.individualDataStatus = {};
       state.individualDataCache = {};
-      payload.matches?.forEach((ind) => (state.isFetchingIndividualData[ind] = false));
+      payload.matches?.forEach((ind) => (state.individualDataStatus[ind] = RequestStatus.Idle));
     });
     builder.addCase(makeGetKatsuPublic.rejected, (state) => {
       state.isFetchingData = false;
@@ -93,16 +94,16 @@ const query = createSlice({
     });
     builder.addCase(makeGetIndividualData.pending, (state, { meta }) => {
       const id = meta.arg;
-      state.isFetchingIndividualData[id] = true;
+      state.individualDataStatus[id] = RequestStatus.Pending;
     });
     builder.addCase(makeGetIndividualData.fulfilled, (state, { payload, meta }) => {
       const id = meta.arg;
       state.individualDataCache[id] = payload;
-      state.isFetchingIndividualData[id] = false;
+      state.individualDataStatus[id] = RequestStatus.Fulfilled;
     });
     builder.addCase(makeGetIndividualData.rejected, (state, { meta }) => {
       const id = meta.arg;
-      state.isFetchingIndividualData[id] = false;
+      state.individualDataStatus[id] = RequestStatus.Rejected;
     });
   },
 });