webui: in the bug list, toggle open and close when clicking

Michael Muré created 5 years ago

Change summary

webui/src/pages/list/Filter.tsx        |  2 +-
webui/src/pages/list/FilterToolbar.tsx | 12 +++++++++---
2 files changed, 10 insertions(+), 4 deletions(-)

Detailed changes

webui/src/pages/list/Filter.tsx

@@ -154,7 +154,7 @@ function FilterDropdown({
 
 export type FilterProps = {
   active: boolean;
-  to: LocationDescriptor;
+  to: LocationDescriptor; // the target on click
   icon?: React.ComponentType<SvgIconProps>;
   children: React.ReactNode;
 };

webui/src/pages/list/FilterToolbar.tsx

@@ -32,7 +32,7 @@ const useStyles = makeStyles(theme => ({
 
 // This prepends the filter text with a count
 type CountingFilterProps = {
-  query: string;
+  query: string; // the query used as a source to count the number of element
   children: React.ReactNode;
 } & FilterProps;
 function CountingFilter({ query, children, ...props }: CountingFilterProps) {
@@ -72,6 +72,12 @@ function FilterToolbar({ query, queryLocation }: Props) {
     ...params,
     [key]: [value],
   });
+  const toggleParam = (key: string, value: string) => (
+    params: Query
+  ): Query => ({
+    ...params,
+    [key]: params[key] && params[key].includes(value) ? [] : [value],
+  });
   const clearParam = (key: string) => (params: Query): Query => ({
     ...params,
     [key]: [],
@@ -87,7 +93,7 @@ function FilterToolbar({ query, queryLocation }: Props) {
           clearParam('sort'),
           stringify
         )(params)}
-        to={pipe(replaceParam('status', 'open'), loc)(params)}
+        to={pipe(toggleParam('status', 'open'), loc)(params)}
         icon={ErrorOutline}
       >
         open
@@ -99,7 +105,7 @@ function FilterToolbar({ query, queryLocation }: Props) {
           clearParam('sort'),
           stringify
         )(params)}
-        to={pipe(replaceParam('status', 'closed'), loc)(params)}
+        to={pipe(toggleParam('status', 'closed'), loc)(params)}
         icon={CheckCircleOutline}
       >
         closed