fix: groupBy is not included in filter queryState

taskany-inc · Jan 17, 2024 · 065b26e · 065b26e
1 parent 0a2e3c0
commit 065b26e
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 86 deletions.
diff --git 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
@@ -1,4 +1,5 @@
 {
     "Preset": "Пресет",
-    "Limit": "Лимит"
+    "Limit": "Лимит",
+    "Reset": "Сбросить"
 }
diff --git a/src/components/FilteredPage/FilteredPage.tsx b/src/components/FilteredPage/FilteredPage.tsx
@@ -118,7 +118,6 @@ export const FilteredPage: React.FC<React.PropsWithChildren<FilteredPageProps>>
                 counter={counter}
                 queryState={queryState}
                 queryFilterState={queryFilterState}
-                queryString={queryString}
                 onSearchChange={setFulltextFilter}
                 onFilterApply={batchQueryState}
             >
@@ -156,7 +155,11 @@ export const FilteredPage: React.FC<React.PropsWithChildren<FilteredPageProps>>
                         </FiltersAction>
                     )}
                     {nullable(queryString || filterPreset, () => (
-                        <StyledResetButton text="Reset" onClick={resetQueryState} {...filtersPanelResetButton.attr} />
+                        <StyledResetButton
+                            text={tr('Reset')}
+                            onClick={resetQueryState}
+                            {...filtersPanelResetButton.attr}
+                        />
                     ))}
                 </StyledFilterControls>
             </FiltersPanel>

diff --git 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<QueryState>) => void;
 }> = memo(

diff --git 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 (
         <Page user={user} ssrTime={ssrTime} title={tr('title')}>
@@ -70,14 +70,11 @@ export const GoalsPage = ({ user, ssrTime, defaultPresetFallback }: ExternalPage
                 filterControls={nullable(
                     groupedView,
                     () => (
-                        <FiltersMenuItem
-                            active
-                            onClick={() => setGroupedView(queryState?.groupBy ? 'none' : undefined)}
-                        >
+                        <FiltersMenuItem active onClick={() => setGroupBy(undefined)}>
                             {tr('Ungroup')}
                         </FiltersMenuItem>
                     ),
-                    <FiltersMenuItem onClick={() => setGroupedView('project')}>{tr('Group')}</FiltersMenuItem>,
+                    <FiltersMenuItem onClick={() => setGroupBy('project')}>{tr('Group')}</FiltersMenuItem>,
                 )}
             >
                 {nullable(

diff --git 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<QueryState>) => {
             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,
     };
 };