fix menu

Author: shaghayegh77amd

src/context/menuContext.tsx

@@ -1,9 +1,9 @@
-import React, { createContext, useContext, useEffect, useState } from "react";
-import { useQuery } from "react-query";
+import React, { createContext, useContext, useState, useEffect } from "react";
 import { getData } from "@/utils/api/fetchData/apiCall";
 import { MegaMenuAPI } from "@/const/endPoint";
 import { MegaMenuTransformer } from "@/utils/api/transformer/megaMenu";
 import { menuItems } from "@/utils/type";
+import { useRouter } from "next/router";
 
 type MegaMenuContextType = menuItems[] | undefined;
 
@@ -13,8 +13,9 @@ export const MegaMenuProvider: React.FC<{
   children: React.ReactNode;
   initialMenu: menuItems[];
   language?: string;
-}> = ({ children, initialMenu, language = "en" }) => {
+}> = ({ children, initialMenu }) => {
   const [clientMenu, setClientMenu] = useState(initialMenu);
+  const router = useRouter();
 
   useEffect(() => {
     const fetchMenu = async () => {
@@ -23,7 +24,7 @@ export const MegaMenuProvider: React.FC<{
     };
 
     fetchMenu();
-  }, [language]);
+  }, [router.locale]);
 
   return (
     <MegaMenuContext.Provider value={clientMenu}>

src/pages/_app.tsx

@@ -10,48 +10,40 @@ import { MegaMenuProvider } from "@/context/menuContext";
 import { Toaster } from "react-hot-toast";
 import "./../../i18n";
 import { useRouter } from "next/router";
-import { useTranslation } from "react-i18next";
-import { QueryClientProvider } from "react-query";
+import { QueryClientProvider, HydrationBoundary } from "@tanstack/react-query";
 import { queryClient } from "@/const/queryClient";
 
 const inter = Raleway({ subsets: ["latin"] });
 
 export default function App({ Component, pageProps }: AppProps) {
   const router = useRouter();
-  const { i18n } = useTranslation();
-
   useEffect(() => {
     if ("scrollRestoration" in window.history) {
       window.history.scrollRestoration = "manual";
     }
   }, [router]);
 
-  useEffect(() => {
-    const { locale } = router;
-    if (locale) {
-      i18n.changeLanguage(locale);
-    }
-  }, [router.locale]);
-
   return (
     <>
       <QueryClientProvider client={queryClient}>
-        <CartProvider>
-          <MegaMenuProvider
-            initialMenu={pageProps.menu || []}
-            language={router.locale}
-          >
-            <main className={inter.className}>
-              <Header />
-              <div className="container">
-                <Toaster />
-                <Component {...pageProps} />
-              </div>
-              <NavigationBar />
-              <Footer />
-            </main>
-          </MegaMenuProvider>
-        </CartProvider>
+        <HydrationBoundary>
+          <CartProvider>
+            <MegaMenuProvider
+              initialMenu={pageProps.menu || []}
+              language={router.locale}
+            >
+              <main className={inter.className}>
+                <Header />
+                <div className="container">
+                  <Toaster />
+                  <Component {...pageProps} />
+                </div>
+                <NavigationBar />
+                <Footer />
+              </main>
+            </MegaMenuProvider>
+          </CartProvider>
+        </HydrationBoundary>
       </QueryClientProvider>
     </>
   );

src/pages/index.tsx

@@ -1,31 +1,26 @@
 import MainSlider from "@/component/mainSlider";
 import HomeCategory from "@/component/homeCategory";
 import ProductCarousel from "@/component/productCarousel";
-import { HomePageAPI } from "@/const/endPoint";
+import { HomePageAPI, MegaMenuAPI } 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 { HomeTransformer } from "@/utils/api/transformer/home";
 import { getData } from "@/utils/api/fetchData/apiCall";
 import { useScrollRestoration } from "@/utils/hooks";
 import { useQuery } from "@tanstack/react-query";
-import { useRouter } from "next/router";
 import { GetServerSidePropsContext } from "next";
 import MetaTags from "@/component/metaTags";
+import { MegaMenuTransformer } from "@/utils/api/transformer/megaMenu";
 
 const fetchCHomeData = async () => {
   const data = await getData(HomePageAPI);
   return HomeTransformer(data).homeProductCarousel;
 };
 
-export default function Home({
-  homeProductCarousel,
-  menu,
-}: HomeProps): JSX.Element {
+export default function Home({ homeProductCarousel }: HomeProps): JSX.Element {
   useScrollRestoration();
-  const router = useRouter();
-  const locale = router.locale || "en";
+
   const { data: carouselData } = useQuery<Product[]>({
     queryKey: ["homePage"],
     queryFn: () => fetchCHomeData(),
@@ -36,25 +31,26 @@ export default function Home({
 
   return (
     <>
-      <MegaMenuProvider initialMenu={menu} language={locale}>
-        <MetaTags />
-        <MainSlider />
-        <HomeCategory />
-        <ProductCarousel product={carouselData} />
-        <Subscribe />
-        <InstagramPost />
-      </MegaMenuProvider>
+      <MetaTags />
+      <MainSlider />
+      <HomeCategory />
+      <ProductCarousel product={carouselData} />
+      <Subscribe />
+      <InstagramPost />
     </>
   );
 }
 
 export async function getServerSideProps(context: GetServerSidePropsContext) {
   const referer = context.req.headers.referer || null;
+
   if (!referer) {
     const data = await getData(HomePageAPI);
     const { homeProductCarousel } = HomeTransformer(data);
-
-    return { props: { homeProductCarousel } };
+    const megaMenuData = await getData(MegaMenuAPI);
+    const menu = MegaMenuTransformer(megaMenuData).menuItems;
+    return { props: { homeProductCarousel, menu } };
   }
-  return { props: { homeProductCarousel: null } };
+
+  return { props: { homeProductCarousel: null, menu: [] } };
 }