Merge pull request #15 from binshops/fix/routing

Fix/routing

Author: shaghayegh77amd

package.json

@@ -21,6 +21,7 @@
     "react-dom": "^18",
     "react-hot-toast": "^2.4.1",
     "react-i18next": "^15.1.4",
+    "react-query": "^3.39.3",
     "sass": "^1.76.0",
     "scss": "^0.2.4",
     "swiper": "^11.1.1",

src/component/category/categoryOptions/categoryOptions.types.ts

@@ -4,9 +4,6 @@ export type CategoryOptionsProps = {
   filters: Filter[];
   sortOptions: Sort[];
   count: number;
-  setCategory: (value: any) => void;
-  categoryId: string;
-  setIsLoading: (value: boolean) => void;
-  activeSort: string;
-  activeFilter: string;
+  setFilterQuery: (value: string) => void;
+  setOrderQuery: (value: string) => void;
 };

src/component/category/categoryOptions/index.tsx

@@ -1,10 +1,6 @@
-import React, { FC, useEffect, useState } from "react";
+import React, { FC, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { CategoryTransformer } from "@/utils/api/transformer/category";
-import { getData } from "@/utils/api/fetchData/apiCall";
-import { CategoryAPI } from "@/const/endPoint";
-
 import { CategoryOptionsProps } from "./categoryOptions.types";
 import Sort from "../sort";
 import Filter from "../filter";
@@ -15,40 +11,13 @@ const CategoryOptions: FC<CategoryOptionsProps> = ({
   filters,
   sortOptions,
   count,
-  setCategory,
-  categoryId,
-  setIsLoading,
-  activeSort,
-  activeFilter,
+  setFilterQuery,
+  setOrderQuery,
 }) => {
-  const [filterQuery, setFilterQuery] = useState<string | undefined>();
-  const [orderQuery, setOrderQuery] = useState<string | undefined>();
   const [isOpenFilter, setIsOpenFilter] = useState(false);
   const [showSortOption, setShowSortOption] = useState(false);
   const { t } = useTranslation();
 
-  useEffect(() => {
-    const fetchData = async () => {
-      setIsLoading(true);
-      try {
-        const productData = await getData(CategoryAPI, {
-          id_category: categoryId,
-          page: 1,
-          q: filterQuery || activeFilter.replace("+", " "),
-          order: orderQuery || activeSort,
-        });
-        const transformedData = CategoryTransformer(productData);
-        setCategory(transformedData);
-        setIsLoading(false);
-      } catch (error) {
-        console.error("Failed to fetch product data:", error);
-      }
-    };
-    (orderQuery || filterQuery) && fetchData();
-    setShowSortOption(false);
-    setIsOpenFilter(false);
-  }, [orderQuery, filterQuery]);
-
   return (
     <div className={styles.optionsWrapper}>
       <Filter

src/component/megaMenu/index.tsx

@@ -1,42 +1,44 @@
 import React from "react";
-import Link from "next/link";
 import { useRouter } from "next/router";
-
-import { useMegaMenu } from "@/context/menuContext";
-
 import styles from "./megaMenu.module.scss";
+import { useMegaMenu } from "@/context/menuContext";
 
 const MegaMenu: React.FC = () => {
-  const megaMenuContext = useMegaMenu();
+  const menu = useMegaMenu();
   const router = useRouter();
 
-  const menu = megaMenuContext?.menu;
-  const handelSubmenuClick = (url: string) => {
+  const handleSubmenuClick = (url: string) => {
     router.push(url);
   };
+
   return (
     <div className={styles.megaMenu}>
       {menu?.map((item, idx) => (
-        <Link href={item.link} className={styles.menuItem} key={idx} passHref>
+        <div
+          className={styles.menuItem}
+          key={idx}
+          onClick={() => handleSubmenuClick(item.link)}
+        >
           <p className={styles.megaMenuItem}>{item.label}</p>
           {Boolean(item.children.length) && (
             <div className={styles.subMenu}>
               <div className={`${styles.linkBox} container`}>
-                {item.children?.map((subLink, idx) => {
-                  return (
-                    <p
-                      onClick={() => handelSubmenuClick(subLink.link)}
-                      className={styles.link}
-                      key={idx}
-                    >
-                      {subLink.title}
-                    </p>
-                  );
-                })}
+                {item.children?.map((subLink, idx) => (
+                  <p
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleSubmenuClick(subLink.link);
+                    }}
+                    className={styles.link}
+                    key={idx}
+                  >
+                    {subLink.title}
+                  </p>
+                ))}
               </div>
             </div>
           )}
-        </Link>
+        </div>
       ))}
     </div>
   );

src/component/productCarousel/productCarousel.types.ts

@@ -1,5 +1,5 @@
 import { Product } from "@/utils/type";
 
 export interface ProductCarouselProps {
-  product: Product[];
+  product?: Product[];
 }

src/component/productDetails/index.tsx

@@ -14,7 +14,7 @@ import { productDetailsProps } from "./productDetails.types";
 
 import styles from "./productDetails.module.scss";
 
-const ProductDetails: FC<productDetailsProps> = ({ product, setProduct }) => {
+const ProductDetails: FC<productDetailsProps> = ({ product }) => {
   const [featuredProduct, setFeaturedProduct] = useState<Product[]>([]);
   useEffect(() => {
     const fetchData = async () => {
@@ -40,7 +40,6 @@ const ProductDetails: FC<productDetailsProps> = ({ product, setProduct }) => {
           price={product.price}
           options={product.options}
           description={product.description}
-          setProduct={setProduct}
           productAttributeId={product.productAttributeId}
         />
       </div>

src/component/productDetails/productDetails.types.ts

@@ -2,5 +2,4 @@ import { ProductType } from "@/utils/type";
 
 export interface productDetailsProps {
   product: ProductType;
-  setProduct: Function;
 }

src/component/productInfo/index.tsx

@@ -1,9 +1,4 @@
-import React, { FC, useEffect, useState } from "react";
-
-import { ProductTransformer } from "@/utils/api/transformer/product";
-import { getData } from "@/utils/api/fetchData/apiCall";
-
-import { ProductDetailAPI } from "@/const/endPoint";
+import React, { FC, useState } from "react";
 
 import { useCart } from "@/context/cartContext";
 
@@ -14,21 +9,32 @@ import Price from "../product/price";
 import { productInfoProps } from "./productInfo.types";
 
 import styles from "./productInfo.module.scss";
+import { useFetchProductData } from "@/utils/hooks/api/useFetchProductData";
 
 const ProductInfo: FC<productInfoProps> = ({
   id,
   title,
   price,
   options,
   description,
-  setProduct,
   productAttributeId,
 }) => {
   const [selectedOption, setSelectedOption] = useState<
     { id: string; value: string }[]
   >([]);
   const { addToCart, isLoading } = useCart();
   const [quantity, setQuantity] = useState(1);
+
+  const {
+    data: productData,
+    isFetching,
+    isError,
+  } = useFetchProductData({
+    productId: id,
+    selectedOption,
+    refresh: true,
+  });
+
   const handleSelectOption = (id: string, value: string) => {
     const index = selectedOption.findIndex((option) => option.id === id);
     if (index > -1) {
@@ -39,30 +45,7 @@ const ProductInfo: FC<productInfoProps> = ({
       setSelectedOption([...selectedOption, { id, value }]);
     }
   };
-  useEffect(() => {
-    const fetchData = async () => {
-      const resultString =
-        "&" +
-        selectedOption
-          .map((item) => `group[${item.id}]=${item.value}`)
-          .join("&");
-      try {
-        const productData = await getData(
-          ProductDetailAPI,
-          {
-            product_id: id,
-            refresh: true,
-          },
-          resultString
-        );
-        const transformedData = ProductTransformer(productData);
-        setProduct(transformedData);
-      } catch (error) {
-        console.error("Failed to fetch product data:", error);
-      }
-    };
-    selectedOption.length > 0 && fetchData();
-  }, [selectedOption]);
+
   const handleAdd = async () => {
     const item = {
       id,
@@ -72,10 +55,11 @@ const ProductInfo: FC<productInfoProps> = ({
     };
     addToCart(item);
   };
+
   return (
     <div className={styles.productInfo}>
-      <h2 className={styles.productTitle}>{title}</h2>
-      <Price price={price} />
+      <h2 className={styles.productTitle}>{productData?.title || title}</h2>
+      <Price price={productData?.price || price} />
       {options && (
         <Options options={options} handleSelectOption={handleSelectOption} />
       )}
@@ -86,7 +70,9 @@ const ProductInfo: FC<productInfoProps> = ({
         isLoading={isLoading}
       />
       <div
-        dangerouslySetInnerHTML={{ __html: description }}
+        dangerouslySetInnerHTML={{
+          __html: productData?.description || description,
+        }}
         className={styles.description}
       />
     </div>

src/component/productInfo/productInfo.types.ts

@@ -6,6 +6,5 @@ export interface productInfoProps {
   price: string;
   options: ProductOptions[];
   description: string;
-  setProduct: Function;
   productAttributeId: number;
 }

src/const/queryClient.ts

@@ -0,0 +1,18 @@
+import { QueryClient } from "react-query";
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5 * 60 * 1000,
+      cacheTime: 30 * 60 * 1000,
+      retry: 3,
+      retryDelay: (attempt: any) => Math.min(1000 * 2 ** attempt, 30000),
+      refetchOnWindowFocus: true,
+      refetchOnReconnect: true,
+      refetchOnMount: false,
+    },
+    mutations: {
+      retry: 1,
+    },
+  },
+});