diff --git a/src/js/components/BentoAppRouter.tsx b/src/js/components/BentoAppRouter.tsx index e99b2512..ee47c33d 100644 --- a/src/js/components/BentoAppRouter.tsx +++ b/src/js/components/BentoAppRouter.tsx @@ -17,6 +17,7 @@ import { getProjects, markScopeSet, selectScope } from '@/features/metadata/meta import Loader from '@/components/Loader'; import DefaultLayout from '@/components/Util/DefaultLayout'; import { BEACON_NETWORK_ENABLED } from '@/config'; +import { RequestStatus } from '@/types/requests'; import { BentoRoute } from '@/types/routes'; import { scopeEqual, validProjectDataset } from '@/utils/router'; @@ -77,7 +78,7 @@ const BentoAppRouter = () => { const { isAutoAuthenticating } = useAutoAuthenticate(); const isAuthenticated = useIsAuthenticated(); - const { selectedScope, isFetching: isFetchingProjects } = useMetadata(); + const { selectedScope, projectsStatus } = useMetadata(); useEffect(() => { if (!selectedScope.scopeSet) return; @@ -108,7 +109,7 @@ const BentoAppRouter = () => { } }, [dispatch, isAuthenticated]); - if (isAutoAuthenticating || isFetchingProjects) { + if (isAutoAuthenticating || projectsStatus === RequestStatus.Pending) { return ; } diff --git a/src/js/components/Provenance/ProvenanceTab.tsx b/src/js/components/Provenance/ProvenanceTab.tsx index 61b26a47..4c8d2b47 100644 --- a/src/js/components/Provenance/ProvenanceTab.tsx +++ b/src/js/components/Provenance/ProvenanceTab.tsx @@ -3,13 +3,14 @@ import { Row } from 'antd'; import { useMetadata } from '@/features/metadata/hooks'; import type { Dataset } from '@/types/metadata'; +import { RequestStatus } from '@/types/requests'; import DatasetProvenance from './DatasetProvenance'; const ProvenanceTab = () => { const { projects, - isFetching: loading, + projectsStatus, selectedScope: { scope }, } = useMetadata(); @@ -24,7 +25,7 @@ const ProvenanceTab = () => { return ( {datasets.map((dataset, i) => ( - + ))} ); diff --git a/src/js/features/metadata/metadata.store.ts b/src/js/features/metadata/metadata.store.ts index 18ea72a0..b7824a37 100644 --- a/src/js/features/metadata/metadata.store.ts +++ b/src/js/features/metadata/metadata.store.ts @@ -2,6 +2,7 @@ import type { PayloadAction } from '@reduxjs/toolkit'; import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'; import axios from 'axios'; import type { PaginatedResponse, Project } from '@/types/metadata'; +import { RequestStatus } from '@/types/requests'; import type { RootState } from '@/store'; import { printAPIError } from '@/utils/error.util'; import { validProjectDataset } from '@/utils/router'; @@ -18,13 +19,13 @@ export type DiscoveryScopeSelection = { export interface MetadataState { projects: Project[]; - isFetching: boolean; + projectsStatus: RequestStatus; selectedScope: DiscoveryScopeSelection; } const initialState: MetadataState = { projects: [], - isFetching: false, + projectsStatus: RequestStatus.Idle, selectedScope: { scope: { project: undefined, dataset: undefined }, // Whether scope has been set from URL/action yet. If it hasn't, we need to wait before fetching scoped data. @@ -48,7 +49,11 @@ export const getProjects = createAsyncThunk< }, { condition(_, { getState }) { - return !getState().metadata.isFetching; + // Only need to fetch projects once - if the projects are being/have already been fetched, don't re-execute. + const { projectsStatus } = getState().metadata; + const cond = projectsStatus === RequestStatus.Idle; + if (!cond) console.debug(`getProjects() was attempted, but a prior attempt gave status: ${projectsStatus}`); + return cond; }, } ); @@ -69,14 +74,14 @@ const metadata = createSlice({ }, extraReducers(builder) { builder.addCase(getProjects.pending, (state) => { - state.isFetching = true; + state.projectsStatus = RequestStatus.Pending; }); builder.addCase(getProjects.fulfilled, (state, { payload }) => { state.projects = payload?.results ?? []; - state.isFetching = false; + state.projectsStatus = RequestStatus.Fulfilled; }); builder.addCase(getProjects.rejected, (state) => { - state.isFetching = false; + state.projectsStatus = RequestStatus.Rejected; }); }, });