From 065b26e6f3bf58db7293a0e83625d5bcecc7c58a Mon Sep 17 00:00:00 2001 From: DenisVorop Date: Wed, 17 Jan 2024 12:37:43 +0300 Subject: [PATCH] fix: groupBy is not included in filter queryState --- .../FilteredPage/FilteredPage.i18n/en.json | 3 +- .../FilteredPage/FilteredPage.i18n/ru.json | 3 +- src/components/FilteredPage/FilteredPage.tsx | 7 +- src/components/FiltersPanel/FiltersPanel.tsx | 1 - src/components/GoalsPage/GoalsPage.tsx | 11 +-- src/hooks/useUrlFilterParams.ts | 87 +++---------------- 6 files changed, 26 insertions(+), 86 deletions(-) diff --git a/src/components/FilteredPage/FilteredPage.i18n/en.json b/src/components/FilteredPage/FilteredPage.i18n/en.json index 7607dc8b0..adf7653c3 100644 --- a/src/components/FilteredPage/FilteredPage.i18n/en.json +++ b/src/components/FilteredPage/FilteredPage.i18n/en.json @@ -1,4 +1,5 @@ { "Preset": "", - "Limit": "" + "Limit": "", + "Reset": "" } diff --git a/src/components/FilteredPage/FilteredPage.i18n/ru.json b/src/components/FilteredPage/FilteredPage.i18n/ru.json index 387fa132b..89c3d0491 100644 --- a/src/components/FilteredPage/FilteredPage.i18n/ru.json +++ b/src/components/FilteredPage/FilteredPage.i18n/ru.json @@ -1,4 +1,5 @@ { "Preset": "Пресет", - "Limit": "Лимит" + "Limit": "Лимит", + "Reset": "Сбросить" } diff --git a/src/components/FilteredPage/FilteredPage.tsx b/src/components/FilteredPage/FilteredPage.tsx index 1a402242e..ef3a5ec43 100644 --- a/src/components/FilteredPage/FilteredPage.tsx +++ b/src/components/FilteredPage/FilteredPage.tsx @@ -118,7 +118,6 @@ export const FilteredPage: React.FC> counter={counter} queryState={queryState} queryFilterState={queryFilterState} - queryString={queryString} onSearchChange={setFulltextFilter} onFilterApply={batchQueryState} > @@ -156,7 +155,11 @@ export const FilteredPage: React.FC> )} {nullable(queryString || filterPreset, () => ( - + ))} diff --git a/src/components/FiltersPanel/FiltersPanel.tsx b/src/components/FiltersPanel/FiltersPanel.tsx index c04bf5201..443b8725c 100644 --- a/src/components/FiltersPanel/FiltersPanel.tsx +++ b/src/components/FiltersPanel/FiltersPanel.tsx @@ -63,7 +63,6 @@ export const FiltersPanel: FC<{ counter?: number; queryState?: QueryState; queryFilterState?: FilterQueryState; - queryString?: string; onSearchChange: (search: string) => void; onFilterApply?: (state: Partial) => void; }> = memo( diff --git a/src/components/GoalsPage/GoalsPage.tsx b/src/components/GoalsPage/GoalsPage.tsx index 2c2a62042..2b1bb4f04 100644 --- a/src/components/GoalsPage/GoalsPage.tsx +++ b/src/components/GoalsPage/GoalsPage.tsx @@ -22,7 +22,7 @@ export const GoalsPage = ({ user, ssrTime, defaultPresetFallback }: ExternalPage defaultPresetFallback, }); - const { currentPreset, queryState, setTagsFilterOutside, setPreset, setGroupedView } = useUrlFilterParams({ + const { currentPreset, queryState, groupBy, setTagsFilterOutside, setPreset, setGroupBy } = useUrlFilterParams({ preset, }); @@ -39,7 +39,7 @@ export const GoalsPage = ({ user, ssrTime, defaultPresetFallback }: ExternalPage ? currentPreset.description : tr('These are goals across all projects'); - const groupedView = queryState?.groupBy === 'project'; + const groupedView = groupBy === 'project'; return ( @@ -70,14 +70,11 @@ export const GoalsPage = ({ user, ssrTime, defaultPresetFallback }: ExternalPage filterControls={nullable( groupedView, () => ( - setGroupedView(queryState?.groupBy ? 'none' : undefined)} - > + setGroupBy(undefined)}> {tr('Ungroup')} ), - setGroupedView('project')}>{tr('Group')}, + setGroupBy('project')}>{tr('Group')}, )} > {nullable( diff --git a/src/hooks/useUrlFilterParams.ts b/src/hooks/useUrlFilterParams.ts index 0264ba178..d476c1d0d 100644 --- a/src/hooks/useUrlFilterParams.ts +++ b/src/hooks/useUrlFilterParams.ts @@ -27,7 +27,6 @@ export interface FilterQueryState { const groupByValue = { project: true, - none: true, }; type GroupByParam = keyof typeof groupByValue; @@ -156,40 +155,23 @@ export const parseQueryState = (query: ParsedUrlQuery) => { }; }; -function makeGroupByParam(queryState?: QueryState, preset?: FilterById) { - const parsedPresetParams = preset ? Object.fromEntries(new URLSearchParams(preset.params)) : null; - const presetGroupBy = parsedPresetParams?.groupBy; - const queryGroupBy = queryState?.groupBy; - - if (presetGroupBy) { - return { preset: presetGroupBy }; - } - - if (queryGroupBy) { - return { query: queryGroupBy }; - } - - return null; -} - export const useUrlFilterParams = ({ preset }: { preset?: FilterById }) => { const router = useRouter(); const [currentPreset, setCurrentPreset] = useState(preset); const [prevPreset, setPrevPreset] = useState(preset); - const { queryState, queryFilterState } = useMemo(() => { + const { queryState, queryFilterState, groupBy } = useMemo(() => { const query = currentPreset ? Object.fromEntries(new URLSearchParams(currentPreset.params)) : router.query; + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const { groupBy, id, ...queries } = query; - const { queryState = undefined, queryFilterState = undefined } = Object.keys(query).length - ? parseQueryState(query) + const { queryState = undefined, queryFilterState = undefined } = Object.keys(queries).length + ? parseQueryState({ groupBy, ...queries }) : {}; - if ('groupBy' in router.query && queryState != null) { - queryState.groupBy = router.query.groupBy as BaseQueryState['groupBy']; - } - return { queryFilterState, queryState, + groupBy: groupBy as GroupByParam | undefined, }; }, [router.query, currentPreset]); @@ -203,31 +185,19 @@ export const useUrlFilterParams = ({ preset }: { preset?: FilterById }) => { const pushStateToRouter = useCallback( (queryState: Partial) => { const newUrl = router.asPath.split('?')[0]; - const { groupBy, ...restQueryParams } = queryState; - const urlParams = buildURLSearchParams(restQueryParams); + const urlParams = buildURLSearchParams({ groupBy, ...queryState }); + const isEmptySearch = !Array.from(urlParams.keys()).length; if (isEmptySearch) { setCookie(filtersNoSearchPresetCookie, true, { 'max-age': 30, }); - } else if (groupBy === 'project') { - urlParams.append('groupBy', groupBy); } - let nextUrl = newUrl; - - if (isEmptySearch) { - if (groupBy === 'project') { - nextUrl = nextUrl.concat(`?groupBy=${groupBy}`); - } - } else { - nextUrl = nextUrl.concat(`?${urlParams}`); - } - - router.push(nextUrl); + router.push(!isEmptySearch ? `${newUrl}?${urlParams}` : newUrl); }, - [router], + [groupBy, router], ); const pushStateProvider = useMemo(() => { @@ -283,6 +253,7 @@ export const useUrlFilterParams = ({ preset }: { preset?: FilterById }) => { watching: false, query: '', sort: {} as { [K in SortableProps]: SortDirection }, + groupBy: undefined, }); }, [pushStateToRouter]); @@ -320,39 +291,6 @@ export const useUrlFilterParams = ({ preset }: { preset?: FilterById }) => { [router], ); - const setGroupedView = useCallback( - (value?: BaseQueryState['groupBy']) => { - const { query } = router; - - const nextQuery = { ...query }; - - // eslint-disable-next-line @typescript-eslint/no-use-before-define - const currentGroupByValue = makeGroupByParam(queryState, currentPreset); - - if (currentGroupByValue == null) { - nextQuery.groupBy = value; - } else if (currentGroupByValue.preset) { - if (currentGroupByValue.preset === value) { - delete nextQuery.groupBy; - } else { - nextQuery.groupBy = value; - } - } else if (currentGroupByValue.query) { - if (currentGroupByValue.query === value || value === 'none') { - delete nextQuery.groupBy; - } else { - nextQuery.groupBy = value; - } - } - - router.push({ - pathname: router.asPath.split('?')[0], - query: nextQuery, - }); - }, - [currentPreset, queryState, router], - ); - const setters = useMemo( () => ({ setPriorityFilter: pushStateProvider.key('priority'), @@ -369,6 +307,7 @@ export const useUrlFilterParams = ({ preset }: { preset?: FilterById }) => { setSortFilter: pushStateProvider.key('sort'), setFulltextFilter: pushStateProvider.key('query'), setLimitFilter: pushStateProvider.key('limit'), + setGroupBy: pushStateProvider.key('groupBy'), batchQueryState: pushStateProvider.batch(), }), [pushStateProvider], @@ -379,10 +318,10 @@ export const useUrlFilterParams = ({ preset }: { preset?: FilterById }) => { queryFilterState, queryString, currentPreset, + groupBy, setTagsFilterOutside, resetQueryState, setPreset, - setGroupedView, ...setters, }; };