Skip to content

Commit

Permalink
fix(FiltersPanel): clean url if no filters
Browse files Browse the repository at this point in the history
  • Loading branch information
@awinogradov
awinogradov committed Apr 20, 2023
1 parent aa35082 commit 131d330
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 54 deletions.
43 changes: 22 additions & 21 deletions src/components/FiltersPanel.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React, { useCallback } from 'react';
import styled from 'styled-components';
import { useTranslations } from 'next-intl';
import { gapM, gapS, gray5, gray9, textColor } from '@taskany/colors';
import { Badge, Text, Input, StarIcon, nullable } from '@taskany/bricks';
import { gapM, gapS, gray5, textColor } from '@taskany/colors';
import { Badge, Text, Input, nullable } from '@taskany/bricks';

import { PageContent } from './Page';
import { StateFilterDropdown } from './StateFilterDropdown';
Expand All @@ -12,7 +12,6 @@ import { LimitFilterDropdown } from './LimitFilterDropdown';
import { PriorityFilterDropdown } from './PriorityFilterDropdown';
import { EstimateFilterDropdown } from './EstimateFilterDropdown';
import { ProjectFilterDropdown } from './ProjectFilterDropdown';
import { FiltersMenuItem } from './FiltersMenuItem';

interface FiltersPanelProps {
count?: number;
Expand All @@ -23,7 +22,7 @@ interface FiltersPanelProps {
projects?: React.ComponentProps<typeof ProjectFilterDropdown>['projects'];
tags?: React.ComponentProps<typeof TagsFilterDropdown>['tags'];
estimates?: React.ComponentProps<typeof EstimateFilterDropdown>['estimates'];
filterValues: [string[], string[], string[], string[], string[], string[], string, number];
filterValues: [string[], string[], string[], string[], string[], string[], string, number | undefined];
children?: React.ReactNode;

onSearchChange: (search: string) => void;
Expand Down Expand Up @@ -124,16 +123,19 @@ export const FiltersPanel: React.FC<FiltersPanelProps> = ({
))}

<StyledFiltersMenu>
{nullable(onPriorityChange, (opc) => (
<PriorityFilterDropdown
text={t('Priority')}
priority={priority}
value={priorityFilter}
onChange={opc}
/>
))}
{Boolean(priority?.length) &&
onPriorityChange &&
nullable(priority, (pr) => (
<PriorityFilterDropdown
text={t('Priority')}
priority={pr}
value={priorityFilter}
onChange={onPriorityChange}
/>
))}

{Boolean(states?.length) &&
onStateChange &&
nullable(states, (st) => (
<StateFilterDropdown
text={t('State')}
Expand All @@ -144,6 +146,7 @@ export const FiltersPanel: React.FC<FiltersPanelProps> = ({
))}

{Boolean(users?.length) &&
onUserChange &&
nullable(users, (u) => (
<UserFilterDropdown
text={t('Owner')}
Expand All @@ -154,6 +157,7 @@ export const FiltersPanel: React.FC<FiltersPanelProps> = ({
))}

{Boolean(projects?.length) &&
onProjectChange &&
nullable(projects, (pr) => (
<ProjectFilterDropdown
text={t('Project')}
Expand All @@ -164,6 +168,7 @@ export const FiltersPanel: React.FC<FiltersPanelProps> = ({
))}

{Boolean(tags?.length) &&
onTagChange &&
nullable(tags, (ta) => (
<TagsFilterDropdown
text={t('Tags')}
Expand All @@ -174,6 +179,7 @@ export const FiltersPanel: React.FC<FiltersPanelProps> = ({
))}

{Boolean(estimates?.length) &&
onEstimateChange &&
nullable(estimates, (e) => (
<EstimateFilterDropdown
text={t('Estimate')}
Expand All @@ -183,15 +189,10 @@ export const FiltersPanel: React.FC<FiltersPanelProps> = ({
/>
))}

{nullable(onLimitChange, (olc) => (
<LimitFilterDropdown text={t('Limit')} value={limitFilter} onChange={olc} />
))}

<FiltersMenuItem>Presets</FiltersMenuItem>

<div style={{ display: 'inline-block', padding: gapS }}>
<StarIcon size="s" color={gray9} noWrap />
</div>
{onLimitChange &&
nullable(limitFilter, (lf) => (
<LimitFilterDropdown text={t('Limit')} value={lf} onChange={onLimitChange} />
))}
</StyledFiltersMenu>
</StyledFiltersMenuWrapper>

Expand Down
51 changes: 18 additions & 33 deletions src/hooks/useUrlFilterParams.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export const parseFilterValues = (query: ParsedUrlQuery) => [
parseQueryParam(query.user?.toString()),
parseQueryParam(query.projects?.toString()).map((p) => Number(p)),
parseQueryParam(query.search?.toString()).toString(),
Number(query.limit),
query.limit ? Number(query.limit) : undefined,
];

export const useUrlFilterParams = () => {
Expand All @@ -29,10 +29,10 @@ export const useUrlFilterParams = () => {
const [fulltextFilter, setFulltextFilter] = useState<string>(
parseQueryParam(router.query.search?.toString()).toString(),
);
const [limitFilter, setLimitFilter] = useState(Number(router.query.limit));
const [limitFilter, setLimitFilter] = useState(router.query.limit ? Number(router.query.limit) : undefined);

const [filterValues, setFilterValues] = useState<
[string[], string[], string[], string[], string[], string[], string, number]
[string[], string[], string[], string[], string[], string[], string, number | undefined]
>([
priorityFilter,
stateFilter,
Expand Down Expand Up @@ -108,44 +108,29 @@ export const useUrlFilterParams = () => {
const newurl = `${window.location.protocol}//${window.location.host}${window.location.pathname}`;
const urlParams = new URLSearchParams();

if (
priorityFilter.length > 0 ||
stateFilter.length > 0 ||
tagsFilter.length > 0 ||
estimateFilter.length > 0 ||
ownerFilter.length > 0 ||
projectFilter.length > 0 ||
fulltextFilter.length > 0 ||
limitFilter
) {
priorityFilter.length > 0
? urlParams.set('priority', Array.from(priorityFilter).toString())
: urlParams.delete('priority');
priorityFilter.length > 0
? urlParams.set('priority', Array.from(priorityFilter).toString())
: urlParams.delete('priority');

stateFilter.length > 0
? urlParams.set('state', Array.from(stateFilter).toString())
: urlParams.delete('state');
stateFilter.length > 0 ? urlParams.set('state', Array.from(stateFilter).toString()) : urlParams.delete('state');

tagsFilter.length > 0 ? urlParams.set('tags', Array.from(tagsFilter).toString()) : urlParams.delete('tags');
tagsFilter.length > 0 ? urlParams.set('tags', Array.from(tagsFilter).toString()) : urlParams.delete('tags');

estimateFilter.length > 0
? urlParams.set('estimates', Array.from(estimateFilter).toString())
: urlParams.delete('estimates');
estimateFilter.length > 0
? urlParams.set('estimates', Array.from(estimateFilter).toString())
: urlParams.delete('estimates');

ownerFilter.length > 0
? urlParams.set('user', Array.from(ownerFilter).toString())
: urlParams.delete('user');
ownerFilter.length > 0 ? urlParams.set('user', Array.from(ownerFilter).toString()) : urlParams.delete('user');

projectFilter.length > 0
? urlParams.set('projects', Array.from(projectFilter).toString())
: urlParams.delete('projects');
projectFilter.length > 0
? urlParams.set('projects', Array.from(projectFilter).toString())
: urlParams.delete('projects');

fulltextFilter.length > 0 ? urlParams.set('search', fulltextFilter.toString()) : urlParams.delete('search');
fulltextFilter.length > 0 ? urlParams.set('search', fulltextFilter.toString()) : urlParams.delete('search');

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

window.history.replaceState({}, '', `${newurl}?${urlParams}`);
}
window.history.replaceState({}, '', Array.from(urlParams.keys()).length ? `${newurl}?${urlParams}` : newurl);
}, [
priorityFilter,
stateFilter,
Expand Down

0 comments on commit 131d330

Please sign in to comment.