Merge pull request #21 from binshops/routing-bug

Routing bug

Author: shaghayegh77amd

src/pages/category/[slug].tsx

@@ -1,4 +1,4 @@
-import { CategoryAPI, MegaMenuAPI } from "@/const/endPoint";
+import { CategoryAPI } from "@/const/endPoint";
 import { getData } from "@/utils/api/fetchData/apiCall";
 import { GetServerSidePropsContext } from "next";
 import React, { FC, useState } from "react";
@@ -13,13 +13,11 @@ import Placeholder from "@/component/category/placeholder";
 import { CategoryTransformer } from "@/utils/api/transformer/category";
 import { useMegaMenu } from "@/context/menuContext";
 import { useQuery } from "react-query";
-import { MegaMenuTransformer } from "@/utils/api/transformer/megaMenu";
 import MetaTags from "@/component/metaTags";
 
 const fetchCategoryData = async (
   categoryId: string,
   page: number,
-  locale: string,
   filterQuery?: string,
   orderQuery?: string
 ) => {
@@ -39,17 +37,9 @@ const CategoryPage: FC<CategoryPageProps> = ({ initialCategory }) => {
   const menu = useMegaMenu();
   const page = parseInt(router.query.page as string, 10) || 0;
   const categoryId = String(router.query.slug);
-
   const { data: category, isLoading } = useQuery<Category>(
-    ["categoryData", categoryId, page, router.locale, filterQuery, orderQuery],
-    () =>
-      fetchCategoryData(
-        categoryId,
-        page,
-        router.locale!,
-        filterQuery,
-        orderQuery
-      ),
+    ["categoryData", categoryId, page, filterQuery, orderQuery],
+    () => fetchCategoryData(categoryId, page, filterQuery, orderQuery),
     {
       initialData: initialCategory || undefined,
       enabled: !initialCategory,
@@ -99,12 +89,9 @@ const CategoryPage: FC<CategoryPageProps> = ({ initialCategory }) => {
 };
 
 export async function getServerSideProps(context: GetServerSidePropsContext) {
-  const locale = context.locale;
   const categoryId = context.query.slug;
   const page = context.query.page;
   const referer = context.req.headers.referer || null;
-  const menuData = await getData(MegaMenuAPI);
-  const menu = MegaMenuTransformer(menuData).menuItems;
   if (!referer) {
     const categoryData = await getData(CategoryAPI, {
       id_category: categoryId,
@@ -113,11 +100,11 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
     const data = CategoryTransformer(categoryData);
 
     return {
-      props: { initialCategory: data, menu },
+      props: { initialCategory: data },
     };
   }
 
-  return { props: { initialCategory: null, categoryId, menu } };
+  return { props: { initialCategory: null, categoryId } };
 }
 
 export default CategoryPage;

src/pages/index.tsx

@@ -1,12 +1,11 @@
 import MainSlider from "@/component/mainSlider";
 import HomeCategory from "@/component/homeCategory";
 import ProductCarousel from "@/component/productCarousel";
-import { HomePageAPI, MegaMenuAPI } from "@/const/endPoint";
+import { HomePageAPI } from "@/const/endPoint";
 import Subscribe from "@/component/subscribe";
 import InstagramPost from "@/component/instagramPost";
 import { HomeProps, Product } from "@/utils/type";
 import { MegaMenuProvider } from "@/context/menuContext";
-import { MegaMenuTransformer } from "@/utils/api/transformer/megaMenu";
 import { HomeTransformer } from "@/utils/api/transformer/home";
 import { getData } from "@/utils/api/fetchData/apiCall";
 import { useScrollRestoration } from "@/utils/hooks";
@@ -54,14 +53,11 @@ export default function Home({
 
 export async function getServerSideProps(context: GetServerSidePropsContext) {
   const referer = context.req.headers.referer || null;
-  const locale = context.locale;
-  const menuData = await getData(MegaMenuAPI);
-  const menu = MegaMenuTransformer(menuData).menuItems;
   if (!referer) {
     const data = await getData(HomePageAPI);
     const { homeProductCarousel } = HomeTransformer(data);
 
-    return { props: { homeProductCarousel, menu } };
+    return { props: { homeProductCarousel } };
   }
-  return { props: { homeProductCarousel: null, menu } };
+  return { props: { homeProductCarousel: null } };
 }

src/pages/product/[slug].tsx

@@ -1,23 +1,17 @@
-import { MegaMenuAPI, ProductDetailAPI } from "@/const/endPoint";
+import { ProductDetailAPI } from "@/const/endPoint";
 import { getData } from "@/utils/api/fetchData/apiCall";
 import { GetServerSidePropsContext } from "next";
 import React, { FC } from "react";
 import ProductDetails from "@/component/productDetails";
-import { ProductPageProps, ProductType } from "@/utils/type";
+import { ProductPageProps } from "@/utils/type";
 import { ProductTransformer } from "@/utils/api/transformer/product";
-import { useRouter } from "next/router";
-import { MegaMenuTransformer } from "@/utils/api/transformer/megaMenu";
 import ProductPlaceholder from "./placeholder";
 import { useFetchProductData } from "@/utils/hooks/api/useFetchProductData";
 import MetaTags from "@/component/metaTags";
 
 const ProductPage: FC<ProductPageProps> = ({ initialProduct, productId }) => {
-  const router = useRouter();
-  const locale = router.locale || "en";
-
   const { data: product, isLoading } = useFetchProductData({
     productId,
-    locale: locale,
     initialProduct,
   });
 
@@ -34,18 +28,15 @@ const ProductPage: FC<ProductPageProps> = ({ initialProduct, productId }) => {
 };
 
 export async function getServerSideProps(context: GetServerSidePropsContext) {
-  const locale = context.locale;
   const productId = context.query.slug;
   const referer = context.req.headers.referer || null;
-  const menuData = await getData(MegaMenuAPI);
-  const menu = MegaMenuTransformer(menuData).menuItems;
   if (!referer) {
     const productData =
       productId && (await getData(ProductDetailAPI, { product_id: productId }));
     const data = ProductTransformer(productData);
-    return { props: { initialProduct: data, productId, menu } };
+    return { props: { initialProduct: data, productId } };
   }
-  return { props: { initialProduct: null, productId, menu } };
+  return { props: { initialProduct: null, productId } };
 }
 
 export default ProductPage;

src/utils/api/transformer/category.ts

@@ -59,8 +59,8 @@ export const CategoryTransformer = (data: CategoryAPI): Category => {
     product: productTransformer(data.psdata.products),
     filters: filtersTransformer(data.psdata.facets),
     sortOptions: sortTransformer(data.psdata.sort_orders),
-    activeSort: data.psdata.order_param,
-    activeFilter: data.psdata.q_param,
+    activeSort: data.psdata.order_param ?? null,
+    activeFilter: data.psdata.q_param ?? null,
     totalPage: data.psdata.pagination.pages_count,
     totalProducts: data.psdata.pagination.total_items,
   };

src/utils/hooks/api/useFetchProductData.ts

@@ -7,7 +7,6 @@ import { ProductType } from "@/utils/type";
 const fetchProductData = async ({
   productId,
   selectedOption = [],
-  locale = "en",
   refresh = false,
 }: {
   productId: string;
@@ -35,7 +34,6 @@ const fetchProductData = async ({
 export const useFetchProductData = ({
   productId,
   selectedOption = [],
-  locale = "en",
   refresh = false,
   initialProduct = undefined,
 }: {
@@ -46,12 +44,11 @@ export const useFetchProductData = ({
   initialProduct?: any;
 }) => {
   return useQuery(
-    ["productData", productId, selectedOption, locale],
+    ["productData", productId, selectedOption],
     () =>
       fetchProductData({
         productId,
         selectedOption,
-        locale,
         refresh,
       }),
     {