feat: add clear button to search page

Author: pooriaset

src/components/ProductsFilters/ProductsFilters.tsx

@@ -5,12 +5,11 @@ import { GetAllCategoriesQuery } from '@/graphql/types/graphql';
 import useSearchPageParams from '@/hooks/useSearchPageParams';
 import { SearchPageParamsKeys } from '@/utils/params';
 import { useQuery } from '@apollo/client';
-import { Divider, List, ListItemText, Switch } from '@mui/material';
+import { List, ListItemText, Switch } from '@mui/material';
 import { useTranslations } from 'next-intl';
 import { FC } from 'react';
 import Categories from './components/Categories';
 import { ListItem } from './components/ListItem';
-import { Title } from './components/Title';
 
 export interface ProductsFiltersProps {}
 
@@ -29,19 +28,25 @@ const ProductsFilters: FC<ProductsFiltersProps> = () => {
   };
 
   return (
-    <List>
+    <List dense disablePadding>
       <ListItem disableGutters disableRipple>
         <ListItemText
-          primary={<Title>{t('products.filters.categories')}</Title>}
+          primary={t('products.filters.categories')}
+          primaryTypographyProps={{
+            variant: 'body1',
+            fontWeight: 600,
+          }}
         />
       </ListItem>
       {!!categories?.length && <Categories options={categories} />}
 
-      <Divider />
-
       <ListItem disableGutters disableRipple onClick={handleClickOnInStock}>
         <ListItemText
-          primary={<Title>{t('products.filters.justInStock')}</Title>}
+          primary={t('products.filters.justInStock')}
+          primaryTypographyProps={{
+            variant: 'body1',
+            fontWeight: 600,
+          }}
         />
         <Switch checked={inStock} />
       </ListItem>

src/components/ProductsFilters/components/Categories.tsx

@@ -5,7 +5,6 @@ import { Collapse, IconButton, List, ListItemText } from '@mui/material';
 import { FC, MouseEventHandler, useMemo, useState } from 'react';
 import { ProductCategoryOptions } from '../types';
 import { ListItem } from './ListItem';
-import { Title } from './Title';
 
 export interface CategoriesProps {
   options: ProductCategoryOptions;
@@ -80,24 +79,25 @@ const Categories: FC<CategoriesProps> = ({ options, parentId = null }) => {
       >
         <ListItem dense disableRipple>
           <ListItemText
-            primary={<Title>{option.name}</Title>}
-            onClick={handleClickOnItem(option.id)}
-            sx={{
-              color: (theme) =>
-                isActive ? theme.palette.primary.main : undefined,
+            primary={option.name}
+            primaryTypographyProps={{
+              variant: 'body2',
+              ...(isActive
+                ? {
+                    fontWeight: 700,
+                    color: 'primary',
+                  }
+                : {}),
             }}
+            onClick={handleClickOnItem(option.id)}
           />
           {hasChildren && (
             <IconButton size="small" onClick={handleClickOnIcon(option.id)}>
               {open[option.id] ? <ExpandLess /> : <ExpandMore />}
             </IconButton>
           )}
         </ListItem>
-        <Collapse
-          timeout="auto"
-          in={(isActive || open[option.id]) ?? false}
-          unmountOnExit
-        >
+        <Collapse timeout="auto" in={open[option.id] ?? false} unmountOnExit>
           <Categories
             options={options}
             parentId={option.id > 0 ? option.id : null}

src/components/ProductsFilters/components/FiltersCard.tsx

@@ -1,10 +1,18 @@
-import { Card, CardContent } from '@mui/material';
+'use client';
+
+import useSearchPageParams from '@/hooks/useSearchPageParams';
+import { Button, Card, CardContent, CardHeader } from '@mui/material';
+import { useTranslations } from 'next-intl';
 import React, { FC, ReactNode } from 'react';
 
 export interface FiltersCardProps {
   children: ReactNode;
 }
 const FiltersCard: FC<FiltersCardProps> = ({ children }) => {
+  const t = useTranslations();
+
+  const { clear, count } = useSearchPageParams();
+
   return (
     <Card
       variant="outlined"
@@ -13,6 +21,23 @@ const FiltersCard: FC<FiltersCardProps> = ({ children }) => {
         top: 130,
       }}
     >
+      <CardHeader
+        titleTypographyProps={{
+          variant: 'h6',
+        }}
+        title={t('products.filters.title')}
+        sx={{
+          borderBottom: '1px solid',
+          borderColor: 'divider',
+        }}
+        action={
+          !!count && (
+            <Button color="error" onClick={clear}>
+              {t('products.filters.buttons.removeFilters')}
+            </Button>
+          )
+        }
+      />
       <CardContent>{children}</CardContent>
     </Card>
   );

src/components/ProductsFilters/components/Title.tsx

@@ -118,7 +118,10 @@
     "filters": {
       "title": "Filters",
       "categories": "Categories",
-      "justInStock": "Just in stock"
+      "justInStock": "Just in stock",
+      "buttons": {
+        "removeFilters": "Clear Filters"
+      }
     },
     "sort": {
       "title": "Sort",

src/data/i18n/en.json

@@ -118,7 +118,10 @@
     "filters": {
       "title": "فیلترها",
       "categories": "دسته بندی ها",
-      "justInStock": "فقط کالاهای موجود"
+      "justInStock": "فقط کالاهای موجود",
+      "buttons": {
+        "removeFilters": "حذف فیلترها"
+      }
     },
     "sort": {
       "title": "مرتب‌سازی",

src/data/i18n/fa.json

@@ -14,13 +14,24 @@ export interface IUseSearchPageParams {
       key: SearchPageParamsKeys,
       value: string | number | boolean | null,
     ) => void;
+    clear: () => void;
+    count: number;
   } & SearchPagesParams;
 }
 
 const useSearchPageParams: IUseSearchPageParams = () => {
   const params = useSearchParams();
   const router = useRouter();
   const pathname = usePathname();
+  const count = params.size;
+
+  const _redirect = (target: string) => {
+    if (pathname.includes('/search')) {
+      window.history.pushState(null, '', target);
+    } else {
+      router.push(target);
+    }
+  };
 
   const navigate: ReturnType<IUseSearchPageParams>['navigate'] = (
     key,
@@ -34,16 +45,18 @@ const useSearchPageParams: IUseSearchPageParams = () => {
     }
 
     const target = `/search?${newParams}`;
+    _redirect(target);
+  };
 
-    if (pathname.includes('/search')) {
-      window.history.pushState(null, '', target);
-    } else {
-      router.push(target);
-    }
+  const clear = () => {
+    const target = `/search`;
+    _redirect(target);
   };
 
   return {
     navigate,
+    clear,
+    count,
     ...getSearchPageParams(params),
   };
 };