diff --git a/src/js/components/Search/IndividualsAccordionPane.tsx b/src/js/components/Search/IndividualsAccordionPane.tsx index 5013b327..fdc61f95 100644 --- 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 index e845aff6..dec8d354 100644 --- 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 index 50cca0e5..11064022 100644 --- 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; }); }, });