diff --git a/frontend/src/component/project/Project/Import/import/ImportStage.tsx b/frontend/src/component/project/Project/Import/import/ImportStage.tsx index 192788edc4..3eac181e51 100644 --- a/frontend/src/component/project/Project/Import/import/ImportStage.tsx +++ b/frontend/src/component/project/Project/Import/import/ImportStage.tsx @@ -12,8 +12,8 @@ import { PulsingAvatar } from '../PulsingAvatar'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { Box } from '@mui/system'; import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled'; -import useProject from 'hooks/api/getters/useProject/useProject'; import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequests/usePendingChangeRequests'; +import { useProjectFeatureSearch } from '../../PaginatedProjectFeatureToggles/useProjectFeatureSearch'; export const ImportStatusArea = styled(Box)(({ theme }) => ({ padding: theme.spacing(4, 2, 2, 2), @@ -65,7 +65,7 @@ export const ImportStage: FC<{ onClose: () => void; }> = ({ environment, project, payload, onClose }) => { const { createImport, loading, errors } = useImportApi(); - const { refetch: refreshProject } = useProject(project); + const { refetch: refreshProject } = useProjectFeatureSearch(project); const { refetch: refreshChangeRequests } = usePendingChangeRequests(project); const { setToastData } = useToast(); diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx index 181fa181ca..71fafc0fe1 100644 --- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx +++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx @@ -20,23 +20,6 @@ import { import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled'; import { useFeatureToggleSwitch } from '../ProjectFeatureToggles/FeatureToggleSwitch/useFeatureToggleSwitch'; import useLoading from 'hooks/useLoading'; -import { - DEFAULT_PAGE_LIMIT, - useFeatureSearch, -} from 'hooks/api/getters/useFeatureSearch/useFeatureSearch'; -import mapValues from 'lodash.mapvalues'; -import { usePersistentTableState } from 'hooks/usePersistentTableState'; -import { - BooleansStringParam, - FilterItemParam, -} from 'utils/serializeQueryParams'; -import { - ArrayParam, - encodeQueryParams, - NumberParam, - StringParam, - withDefault, -} from 'use-query-params'; import { ProjectFeatureTogglesHeader } from './ProjectFeatureTogglesHeader/ProjectFeatureTogglesHeader'; import { createColumnHelper, useReactTable } from '@tanstack/react-table'; import { withTableState } from 'utils/withTableState'; @@ -52,11 +35,10 @@ import { useRowActions } from './hooks/useRowActions'; import { useSelectedData } from './hooks/useSelectedData'; import { FeatureOverviewCell } from '../../../common/Table/cells/FeatureOverviewCell/FeatureOverviewCell'; import { useUiFlag } from 'hooks/useUiFlag'; +import { useProjectFeatureSearch } from './useProjectFeatureSearch'; interface IPaginatedProjectFeatureTogglesProps { environments: string[]; - refreshInterval?: number; - storageKey?: string; } const formatEnvironmentColumnId = (environment: string) => @@ -67,46 +49,24 @@ const getRowId = (row: { name: string }) => row.name; export const ProjectFeatureToggles = ({ environments, - refreshInterval = 15 * 1000, - storageKey = 'project-feature-toggles-v2', }: IPaginatedProjectFeatureTogglesProps) => { const projectId = useRequiredPathParam('projectId'); - const stateConfig = { - offset: withDefault(NumberParam, 0), - limit: withDefault(NumberParam, DEFAULT_PAGE_LIMIT), - query: StringParam, - favoritesFirst: withDefault(BooleansStringParam, true), - sortBy: withDefault(StringParam, 'createdAt'), - sortOrder: withDefault(StringParam, 'desc'), - columns: ArrayParam, - tag: FilterItemParam, - createdAt: FilterItemParam, - }; - const [tableState, setTableState] = usePersistentTableState( - `${storageKey}-${projectId}`, - stateConfig, - ); + const { + features, + total, + refetch, + loading, + initialLoad, + tableState, + setTableState, + } = useProjectFeatureSearch(projectId); const filterState = { tag: tableState.tag, createdAt: tableState.createdAt, }; - const { columns: _, ...apiTableState } = tableState; - const { features, total, refetch, loading, initialLoad } = useFeatureSearch( - mapValues( - { - ...encodeQueryParams(stateConfig, apiTableState), - project: `IS:${projectId}`, - }, - (value) => (value ? `${value}` : undefined), - ), - { - refreshInterval, - }, - ); - const { favorite, unfavorite } = useFavoriteFeaturesApi(); const onFavorite = useCallback( async (feature: FeatureSearchResponseSchema) => { diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/useProjectFeatureSearch.ts b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/useProjectFeatureSearch.ts new file mode 100644 index 0000000000..287c719e99 --- /dev/null +++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/useProjectFeatureSearch.ts @@ -0,0 +1,63 @@ +import { + ArrayParam, + encodeQueryParams, + NumberParam, + StringParam, + withDefault, +} from 'use-query-params'; +import { + DEFAULT_PAGE_LIMIT, + useFeatureSearch, +} from 'hooks/api/getters/useFeatureSearch/useFeatureSearch'; +import { + BooleansStringParam, + FilterItemParam, +} from 'utils/serializeQueryParams'; +import { usePersistentTableState } from 'hooks/usePersistentTableState'; +import mapValues from 'lodash.mapvalues'; + +export const useProjectFeatureSearch = ( + projectId: string, + storageKey = 'project-overview-v2', + refreshInterval = 15 * 1000, +) => { + const stateConfig = { + offset: withDefault(NumberParam, 0), + limit: withDefault(NumberParam, DEFAULT_PAGE_LIMIT), + query: StringParam, + favoritesFirst: withDefault(BooleansStringParam, true), + sortBy: withDefault(StringParam, 'createdAt'), + sortOrder: withDefault(StringParam, 'desc'), + columns: ArrayParam, + tag: FilterItemParam, + createdAt: FilterItemParam, + }; + const [tableState, setTableState] = usePersistentTableState( + `${storageKey}-${projectId}`, + stateConfig, + ); + + const { columns: _, ...apiTableState } = tableState; + const { features, total, refetch, loading, initialLoad } = useFeatureSearch( + mapValues( + { + ...encodeQueryParams(stateConfig, apiTableState), + project: `IS:${projectId}`, + }, + (value) => (value ? `${value}` : undefined), + ), + { + refreshInterval, + }, + ); + + return { + features, + total, + refetch, + loading, + initialLoad, + tableState, + setTableState, + }; +}; diff --git a/frontend/src/component/project/Project/ProjectOverview.tsx b/frontend/src/component/project/Project/ProjectOverview.tsx index 218c13c864..0240555948 100644 --- a/frontend/src/component/project/Project/ProjectOverview.tsx +++ b/frontend/src/component/project/Project/ProjectOverview.tsx @@ -32,9 +32,7 @@ const StyledContentContainer = styled(Box)(({ theme }) => ({ minWidth: 0, })); -const ProjectOverview: FC<{ - storageKey?: string; -}> = ({ storageKey = 'project-overview-v2' }) => { +const ProjectOverview: FC = () => { const projectId = useRequiredPathParam('projectId'); const projectName = useProjectOverviewNameOrId(projectId); @@ -58,8 +56,6 @@ const ProjectOverview: FC<{ environments={project.environments.map( (environment) => environment.environment, )} - refreshInterval={refreshInterval} - storageKey={storageKey} />