Skip to content

Commit

Permalink
fix(FilterPanel): correct appling groupBy param
Browse files Browse the repository at this point in the history
  • Loading branch information
@LamaEats @awinogradov
LamaEats authored and awinogradov committed Oct 17, 2023
1 parent 37a82a4 commit 01501e6
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 30 deletions.
40 changes: 22 additions & 18 deletions src/components/GoalsPage/GoalsPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { useCallback } from 'react';
import { FiltersMenuItem, nullable } from '@taskany/bricks';

import { ExternalPageProps } from '../../utils/declareSsrProps';
import { trpc } from '../../utils/trpcClient';
Expand All @@ -10,6 +11,7 @@ import { PageTitlePreset } from '../PageTitlePreset/PageTitlePreset';
import { safeGetUserName } from '../../utils/getUserName';
import { FilteredPage } from '../FilteredPage/FilteredPage';
import { GroupedGoalList } from '../GroupedGoalList';
import { FlatGoalList } from '../FlatGoalList';

import { tr } from './GoalsPage.i18n';

Expand All @@ -20,7 +22,7 @@ export const GoalsPage = ({ user, ssrTime, defaultPresetFallback }: ExternalPage
defaultPresetFallback,
});

const { currentPreset, queryState, setTagsFilterOutside, setPreset } = useUrlFilterParams({
const { currentPreset, queryState, setTagsFilterOutside, setPreset, setGroupedView } = useUrlFilterParams({
preset,
});

Expand All @@ -37,6 +39,8 @@ export const GoalsPage = ({ user, ssrTime, defaultPresetFallback }: ExternalPage
? currentPreset.description
: tr('These are goals across all projects');

const groupedView = queryState?.groupBy === 'project';

return (
<Page user={user} ssrTime={ssrTime} title={tr('title')}>
<CommonHeader
Expand All @@ -56,33 +60,33 @@ export const GoalsPage = ({ user, ssrTime, defaultPresetFallback }: ExternalPage
}
description={description}
/>
{/** TODO: https://github.com/taskany-inc/issues/issues/1881 */}
<FilteredPage
total={data?.count || 0}
counter={data?.filtered || 0}
filterPreset={currentPreset}
userFilters={userFilters}
onFilterStar={onFilterStar}
isLoading={false}
// filterControls={nullable(
// !queryState?.groupBy,
// () => (
// <FiltersMenuItem onClick={() => setGroupedView('project')}>{tr('Group')}</FiltersMenuItem>
// ),
// <FiltersMenuItem active onClick={() => setGroupedView()}>
// {tr('Ungroup')}
// </FiltersMenuItem>,
// )}
filterControls={nullable(
groupedView,
() => (
<FiltersMenuItem
active
onClick={() => setGroupedView(queryState?.groupBy ? 'none' : undefined)}
>
{tr('Ungroup')}
</FiltersMenuItem>
),
<FiltersMenuItem onClick={() => setGroupedView('project')}>{tr('Group')}</FiltersMenuItem>,
)}
>
{/** TODO: https://github.com/taskany-inc/issues/issues/1881 */}
{/* {nullable(
!queryState?.groupBy,
{nullable(
groupedView,
() => (
<FlatGoalList queryState={queryState} setTagFilterOutside={setTagsFilterOutside} />
<GroupedGoalList queryState={queryState} setTagFilterOutside={setTagsFilterOutside} />
),
<GroupedGoalList queryState={queryState} setTagFilterOutside={setTagsFilterOutside} />,
)} */}
<GroupedGoalList queryState={queryState} setTagFilterOutside={setTagsFilterOutside} />
<FlatGoalList queryState={queryState} setTagFilterOutside={setTagsFilterOutside} />,
)}
</FilteredPage>
</Page>
);
Expand Down
21 changes: 11 additions & 10 deletions src/hooks/useFiltersPreset.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useEffect } from 'react';
import { useEffect, useMemo } from 'react';
import { useRouter } from 'next/router';

import { trpc } from '../utils/trpcClient';
Expand All @@ -23,19 +23,20 @@ export const useFiltersPreset = ({ defaultPresetFallback = true }: { defaultPres
staleTime: refreshInterval,
});

const shadowPreset = userFilters.data?.filter(
(f) => decodeURIComponent(f.params) === decodeURIComponent(queryString),
)[0];

useEffect(() => {
if (!defaultPresetFallback) {
deleteCookie(filtersNoSearchPresetCookie);
}
}, [defaultPresetFallback]);

return {
preset: preset.data,
shadowPreset,
userFilters: userFilters.data,
};
return useMemo(
() => ({
preset: preset.data,
shadowPreset: userFilters.data?.find(
(f) => decodeURIComponent(f.params) === decodeURIComponent(queryString),
),
userFilters: userFilters.data,
}),
[preset.data, userFilters.data, queryString],
);
};
58 changes: 56 additions & 2 deletions src/hooks/useUrlFilterParams.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export interface FilterQueryState {

const groupByValue = {
project: true,
none: true,
};

type GroupByParam = keyof typeof groupByValue;
Expand Down Expand Up @@ -115,7 +116,7 @@ export const buildURLSearchParams = ({

watching ? urlParams.set('watching', '1') : urlParams.delete('watching');

groupBy != null ? urlParams.set('groupBy', groupBy) : urlParams.delete('groupBy');
groupBy === 'project' ? urlParams.set('groupBy', groupBy) : urlParams.delete('groupBy');

limit ? urlParams.set('limit', limit.toString()) : urlParams.delete('limit');

Expand Down Expand Up @@ -155,6 +156,22 @@ 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);
Expand All @@ -166,6 +183,10 @@ export const useUrlFilterParams = ({ preset }: { preset?: FilterById }) => {
? parseQueryState(query)
: {};

if ('groupBy' in router.query && queryState != null) {
queryState.groupBy = router.query.groupBy as BaseQueryState['groupBy'];
}

return {
queryFilterState,
queryState,
Expand Down Expand Up @@ -286,6 +307,39 @@ 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'),
Expand All @@ -302,7 +356,6 @@ export const useUrlFilterParams = ({ preset }: { preset?: FilterById }) => {
setSortFilter: pushStateProvider.key('sort'),
setFulltextFilter: pushStateProvider.key('query'),
setLimitFilter: pushStateProvider.key('limit'),
setGroupedView: pushStateProvider.key('groupBy'),
batchQueryState: pushStateProvider.batch(),
}),
[pushStateProvider],
Expand All @@ -316,6 +369,7 @@ export const useUrlFilterParams = ({ preset }: { preset?: FilterById }) => {
setTagsFilterOutside,
resetQueryState,
setPreset,
setGroupedView,
...setters,
};
};

0 comments on commit 01501e6

Please sign in to comment.