feat: add filters to mobile view

Author: pooriaset

src/app/[locale]/(main)/(container)/search/page.tsx

@@ -1,4 +1,4 @@
-import { ColumnFilters } from '@/components/ColumnFilters';
+import { ProductsFilters } from '@/components/ProductsFilters';
 import { InlineFilters } from '@/components/InlineFilters';
 import ProductsList from '@/components/ProductsList/ProductsList';
 import DesktopView from '@/components/ResponsiveDesign/components/DesktopView';
@@ -10,6 +10,7 @@ import { Suspense } from 'react';
 import ProductsListSkeleton from './components/ProductsListSkeleton';
 import SortRow from './components/SortRow';
 import SortWrapper from './components/SortWrapper';
+import FiltersCard from '@/components/ProductsFilters/components/FiltersCard';
 
 export async function generateMetadata(): Promise<Metadata> {
   const t = await getTranslations();
@@ -41,7 +42,9 @@ const Page = async () => {
               minWidth: 270,
             }}
           >
-            <ColumnFilters />
+            <FiltersCard>
+              <ProductsFilters />
+            </FiltersCard>
           </Box>
           <Box sx={{ flexGrow: 1 }}>
             <SortWrapper>

src/components/ColumnFilters/ColumnFilters.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { GetAllCategoriesQuery } from '@/graphql/types/graphql';
 import useSearchPageParams from '@/hooks/useSearchPageParams';
 import { sortOptions } from '@/static/sortOptions';
 import { SearchPageParamsKeys } from '@/utils/params';
@@ -17,12 +16,11 @@ import {
 } from '@mui/material';
 import { useTranslations } from 'next-intl';
 import { FC, useState } from 'react';
+import { ProductsFilters } from '../ProductsFilters';
 import Dialog from '../Dialog/Dialog';
 
-export interface InlineFiltersProps {
-  categories?: NonNullable<GetAllCategoriesQuery['productCategories']>['nodes'];
-}
-const InlineFilters: FC<InlineFiltersProps> = ({ categories }) => {
+export interface InlineFiltersProps {}
+const InlineFilters: FC<InlineFiltersProps> = () => {
   const t = useTranslations();
 
   const { sort, navigate } = useSearchPageParams();
@@ -44,8 +42,33 @@ const InlineFilters: FC<InlineFiltersProps> = ({ categories }) => {
 
   const selectedSort = sortOptions.find((item) => item.key === sort);
 
+  const [filtersDialog, setFiltersDialog] = useState(false);
+
+  const onToggleFiltersDialog = () => {
+    setFiltersDialog((prevState) => !prevState);
+  };
+
   return (
     <>
+      <Dialog
+        open={filtersDialog}
+        onClose={onToggleFiltersDialog}
+        title={t('products.filters.title')}
+        buttons={[
+          {
+            id: 'view-products',
+            children: t('buttons.viewProducts'),
+            variant: 'contained',
+            color: 'primary',
+            size: 'large',
+            fullWidth: true,
+            onClick: onToggleFiltersDialog,
+          },
+        ]}
+      >
+        <ProductsFilters />
+      </Dialog>
+
       <Dialog
         key={sort}
         open={sortDialog}
@@ -99,8 +122,9 @@ const InlineFilters: FC<InlineFiltersProps> = ({ categories }) => {
           variant="outlined"
           size="small"
           endIcon={<KeyboardArrowDownIcon />}
+          onClick={onToggleFiltersDialog}
         >
-          {t('products.filters.categories')}
+          {t('products.filters.title')}
         </Button>
       </Box>
     </>

src/components/ColumnFilters/index.ts

@@ -0,0 +1,52 @@
+'use client';
+
+import { GET_ALL_CATEGORIES_QUERY } from '@/graphql/queries/categories';
+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 { 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 {}
+
+const ProductsFilters: FC<ProductsFiltersProps> = () => {
+  const t = useTranslations();
+
+  const { data: categoriesData } = useQuery<GetAllCategoriesQuery>(
+    GET_ALL_CATEGORIES_QUERY,
+  );
+
+  const categories = categoriesData?.productCategories?.nodes;
+
+  const { navigate, inStock } = useSearchPageParams();
+  const handleClickOnInStock = () => {
+    navigate(SearchPageParamsKeys.InStock, !inStock);
+  };
+
+  return (
+    <List>
+      <ListItem disableGutters disableRipple>
+        <ListItemText
+          primary={<Title>{t('products.filters.categories')}</Title>}
+        />
+      </ListItem>
+      {!!categories?.length && <Categories options={categories} />}
+
+      <Divider />
+
+      <ListItem disableGutters disableRipple onClick={handleClickOnInStock}>
+        <ListItemText
+          primary={<Title>{t('products.filters.justInStock')}</Title>}
+        />
+        <Switch checked={inStock} />
+      </ListItem>
+    </List>
+  );
+};
+
+export default ProductsFilters;

src/components/InlineFilters/InlineFilters.tsx

@@ -1,20 +1,18 @@
 import useSearchPageParams from '@/hooks/useSearchPageParams';
+import { SearchPageParamsKeys } from '@/utils/params';
 import { ExpandLess, ExpandMore } from '@mui/icons-material';
 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';
-import { SearchPageParamsKeys } from '@/utils/params';
 
 export interface CategoriesProps {
   options: ProductCategoryOptions;
   parentId?: null | number;
 }
 
-const allItemId = -1;
-
-const Categories: FC<CategoriesProps> = ({ options, parentId = allItemId }) => {
+const Categories: FC<CategoriesProps> = ({ options, parentId = null }) => {
   const _options = useMemo(() => {
     return options?.filter((option) => option.parentId === parentId) ?? [];
   }, [options, parentId]);
@@ -68,18 +66,16 @@ const Categories: FC<CategoriesProps> = ({ options, parentId = allItemId }) => {
   return _options.map((option) => {
     const hasChildren = options?.some((child) => child.parentId === option.id);
 
-    const isActive =
-      (categoryId === null && option?.id === allItemId) ||
-      option?.id === categoryId;
+    const isActive = option.id === categoryId;
 
     return (
       <List
+        sx={{
+          pl: parentId === null ? 0 : 2,
+        }}
         dense
         component="div"
         key={option.id}
-        sx={{
-          pl: parentId === -1 ? 0 : 2,
-        }}
         disablePadding
       >
         <ListItem dense disableRipple>
@@ -97,7 +93,11 @@ const Categories: FC<CategoriesProps> = ({ options, parentId = allItemId }) => {
             </IconButton>
           )}
         </ListItem>
-        <Collapse timeout="auto" in={open[option.id] ?? false} unmountOnExit>
+        <Collapse
+          timeout="auto"
+          in={(isActive || open[option.id]) ?? false}
+          unmountOnExit
+        >
           <Categories
             options={options}
             parentId={option.id > 0 ? option.id : null}

src/components/ProductsFilters/ProductsFilters.tsx

@@ -0,0 +1,21 @@
+import { Card, CardContent } from '@mui/material';
+import React, { FC, ReactNode } from 'react';
+
+export interface FiltersCardProps {
+  children: ReactNode;
+}
+const FiltersCard: FC<FiltersCardProps> = ({ children }) => {
+  return (
+    <Card
+      variant="outlined"
+      sx={{
+        position: 'sticky',
+        top: 130,
+      }}
+    >
+      <CardContent>{children}</CardContent>
+    </Card>
+  );
+};
+
+export default FiltersCard;

src/components/ColumnFilters/components/Categories.tsx renamed to src/components/ProductsFilters/components/Categories.tsx

@@ -0,0 +1 @@
+export { default as ProductsFilters } from './ProductsFilters';