feat: complete navigate between categories

Author: pooriaset

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

@@ -7,6 +7,7 @@ import { grey } from '@mui/material/colors';
 import { MouseEventHandler } from 'react';
 import { sortOptions } from '@/static/sortOptions';
 import { useTranslations } from 'next-intl';
+import { SearchPageParamsKeys } from '@/utils/params';
 
 const SortRow = () => {
   const { sort, navigate } = useCustomSearchParams();
@@ -15,7 +16,7 @@ const SortRow = () => {
 
   const handleClickOnItem = (value: number) => {
     const func: MouseEventHandler<HTMLButtonElement> = (event) => {
-      navigate('Sort', value);
+      navigate(SearchPageParamsKeys.Sort, value);
     };
     return func;
   };

src/app/[locale]/(main)/(homepage)/components/Header.tsx

@@ -8,6 +8,7 @@ import { useTranslations } from 'next-intl';
 import { useState, useTransition } from 'react';
 import SearchDialog from './SearchDialog';
 import SearchSection from './SearchSection';
+import { SearchPageParamsKeys } from '@/utils/params';
 
 const Header = () => {
   const [isPending, startTransition] = useTransition();
@@ -22,7 +23,7 @@ const Header = () => {
 
   const onClickOnSearch = (q: string) => {
     startTransition(() => {
-      navigate('Q', q);
+      navigate(SearchPageParamsKeys.Q, q);
       setOpen(false);
     });
   };

src/app/[locale]/(main)/categories/components/MenuCategoryItem.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Stack, Typography } from '@mui/material';
 import { FC } from 'react';
 

src/app/[locale]/(main)/categories/components/SubCategories.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Link } from '@/navigation';
 import { ChevronRight } from '@mui/icons-material';
 import { Stack, Typography } from '@mui/material';
@@ -15,9 +17,18 @@ const SubCategories: FC<SubCategoriesProps> = ({ name, parentId, items }) => {
     return null;
   }
 
+  const params = new URLSearchParams();
+  params.set('categoryId', parentId!.toString());
+  const parentLink = `/search?${params.toString()}`;
+
   return (
     <Stack px={1.5} flexGrow={1}>
-      <Stack component={Link} href="#" height={65} justifyContent="center">
+      <Stack
+        component={Link}
+        href={parentLink}
+        height={65}
+        justifyContent="center"
+      >
         <Typography
           variant="body2"
           color="primary"
@@ -42,7 +53,7 @@ const SubCategories: FC<SubCategoriesProps> = ({ name, parentId, items }) => {
             <SubCategoryItem
               src={item.image.sourceUrl}
               name={item.name}
-              id={item.name}
+              id={item.id}
             />
           );
         })}

src/app/[locale]/(main)/categories/components/SubCategoryItem.tsx

@@ -9,13 +9,17 @@ export interface SubCategoryItemProps {
   src: string;
 }
 const SubCategoryItem: FC<SubCategoryItemProps> = ({ id, src, name }) => {
+  const params = new URLSearchParams();
+  params.set('categoryId', id!.toString());
+  const link = `/search?${params.toString()}`;
+
   return (
     <Stack
       spacing={1}
       width="30%"
       alignItems="center"
       component={Link}
-      href="#"
+      href={link}
       sx={{
         height: 'fit-content',
         maxHeight: 'auto',

src/app/[locale]/(main)/categories/loading.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Skeleton, Stack } from '@mui/material';
 import React from 'react';
 

src/components/ColumnFilters/ColumnFilters.tsx

@@ -20,6 +20,7 @@ import { FC, useState } from 'react';
 import Categories from './components/Categories';
 import { ListItem } from './components/ListItem';
 import { Title } from './components/Title';
+import { SearchPageParamsKeys } from '@/utils/params';
 
 export interface ColumnFiltersProps {}
 
@@ -43,7 +44,7 @@ const ColumnFilters: FC<ColumnFiltersProps> = () => {
 
   const { navigate, inStock } = useCustomSearchParams();
   const handleClickOnInStock = () => {
-    navigate('InStock', !inStock);
+    navigate(SearchPageParamsKeys.InStock, !inStock);
   };
 
   return (

src/components/ColumnFilters/components/Categories.tsx

@@ -5,6 +5,7 @@ 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;
@@ -55,7 +56,7 @@ const Categories: FC<CategoriesProps> = ({ options, parentId = allItemId }) => {
 
   const handleClickOnItem = (id: number) => {
     const func: MouseEventHandler<HTMLDivElement> = (event) => {
-      navigate('CategoryId', id);
+      navigate(SearchPageParamsKeys.CategoryId, id);
     };
     return func;
   };

src/components/Header/components/TopSection.tsx

@@ -17,6 +17,7 @@ import { useSession } from 'next-auth/react';
 import { useTranslations } from 'next-intl';
 import { DOMAttributes, FC } from 'react';
 import LoggedInButton from './LoggedInButton';
+import { SearchPageParamsKeys } from '@/utils/params';
 
 const Form = styled('form')(({ theme }) => ({
   position: 'relative',
@@ -43,7 +44,7 @@ const TopSection: FC = () => {
   ) => {
     event.preventDefault();
     const q = event.currentTarget.q.value;
-    navigate('Q', q);
+    navigate(SearchPageParamsKeys.Q, q);
   };
 
   const cart = useAtomValue(cartAtom);

src/hooks/useCustomSearchParams.ts

@@ -11,7 +11,7 @@ import { useSearchParams } from 'next/navigation';
 export interface IUseCustomSearchParams {
   (): {
     navigate: (
-      key: keyof typeof SearchPageParamsKeys,
+      key: SearchPageParamsKeys,
       value: string | number | boolean | null,
     ) => void;
   } & SearchPagesParams;
@@ -27,9 +27,9 @@ const useCustomSearchParams: IUseCustomSearchParams = () => {
   ) => {
     const newParams = new URLSearchParams(params);
     if (value === undefined || value === null || +value < 0) {
-      newParams.delete(SearchPageParamsKeys[key]);
+      newParams.delete(key);
     } else {
-      newParams.set(SearchPageParamsKeys[key], value.toString());
+      newParams.set(key, value.toString());
     }
     router.push(`/search?${newParams}`);
   };