Merge pull request #23 from binshops/fixSomeBugs

Fix some bugs

Author: shaghayegh77amd

package-lock.json

@@ -14,14 +14,14 @@
     "@fortawesome/free-regular-svg-icons": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
+    "@tanstack/react-query": "^5.74.4",
     "axios": "^1.7.8",
     "i18next": "^24.0.5",
     "next": "14.2.3",
     "react": "^18",
     "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",

package.json

@@ -51,7 +51,6 @@ const Header: FC = () => {
         </div>
       </div>
       <CartContent isOpen={openCart} setIsOpen={setOpenCart} />
-      <LoadingIndicator />
     </header>
   );
 };

src/component/header/index.tsx

@@ -1,5 +1,4 @@
 import React, { FC, useEffect, useRef, useState } from "react";
-
 import styles from "./languageSelector.module.scss";
 import { useTranslation } from "react-i18next";
 import { useRouter } from "next/router";
@@ -12,27 +11,33 @@ const LanguageSelector: FC = () => {
 
   const router = useRouter();
   const locale = router.locale;
+
   const handleClickOutside = (event: MouseEvent) => {
     if (divRef.current && !divRef.current.contains(event.target as Node)) {
       setOpenLanguage(false);
     }
   };
 
   const changeLanguage = (lng: string) => {
-    i18n.changeLanguage(lng);
-    const { pathname, query } = router;
-    router.push({ pathname, query }, undefined, { locale: lng });
+    if (i18n.language !== lng) {
+      i18n.changeLanguage(lng);
+      const { pathname, query } = router;
+      router.push({ pathname, query }, undefined, { locale: lng });
+      queryClient.invalidateQueries();
+    }
     setOpenLanguage(false);
-    queryClient.invalidateQueries();
   };
 
   useEffect(() => {
     document.addEventListener("mousedown", handleClickOutside);
-    locale && changeLanguage(locale);
+    if (locale && i18n.language !== locale) {
+      changeLanguage(locale);
+    }
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, []);
+  }, [locale, i18n.language]);
+
   return (
     <div className={styles.languageBox}>
       <button

src/component/languageSelector/languageSelector.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from "react";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 
 import { FeaturedProductAPI } from "@/const/endPoint";
 import { FeaturedProductTransformer } from "@/utils/api/transformer/featuredProduct";

src/component/productDetails/index.tsx

@@ -1,10 +1,9 @@
-import { QueryClient } from "react-query";
+import { QueryClient } from "@tanstack/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,

src/const/queryClient.ts

@@ -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/context/menuContext.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/_app.tsx

@@ -1,4 +1,4 @@
-import { CategoryAPI } from "@/const/endPoint";
+import { CategoryAPI, MegaMenuAPI } from "@/const/endPoint";
 import { getData } from "@/utils/api/fetchData/apiCall";
 import { GetServerSidePropsContext } from "next";
 import React, { FC, useState } from "react";
@@ -12,8 +12,9 @@ import { useRouter } from "next/router";
 import Placeholder from "@/component/category/placeholder";
 import { CategoryTransformer } from "@/utils/api/transformer/category";
 import { useMegaMenu } from "@/context/menuContext";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import MetaTags from "@/component/metaTags";
+import { MegaMenuTransformer } from "@/utils/api/transformer/megaMenu";
 
 const fetchCategoryData = async (
   categoryId: string,
@@ -37,15 +38,13 @@ 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, filterQuery, orderQuery],
-    () => fetchCategoryData(categoryId, page, filterQuery, orderQuery),
-    {
-      initialData: initialCategory || undefined,
-      enabled: !initialCategory,
-      refetchOnMount: false,
-    }
-  );
+  const { data: category, isLoading } = useQuery<Category>({
+    queryKey: ["categoryData", categoryId, page, filterQuery, orderQuery],
+    queryFn: () => fetchCategoryData(categoryId, page, filterQuery, orderQuery),
+    initialData: initialCategory || undefined,
+    enabled: !initialCategory,
+    refetchOnMount: false,
+  });
 
   if (isLoading) {
     return <Placeholder />;
@@ -98,9 +97,10 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
       page,
     });
     const data = CategoryTransformer(categoryData);
-
+    const megaMenuData = await getData(MegaMenuAPI);
+    const menu = MegaMenuTransformer(megaMenuData).menuItems;
     return {
-      props: { initialCategory: data },
+      props: { initialCategory: data, menu },
     };
   }
 

src/pages/category/[slug].tsx

@@ -1,63 +1,56 @@
 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 "react-query";
-import { useRouter } from "next/router";
+import { useQuery } from "@tanstack/react-query";
 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[]>(
-    ["homePage"],
-    () => fetchCHomeData(),
 
-    {
-      initialData: homeProductCarousel || undefined,
-      enabled: !homeProductCarousel,
-      refetchOnMount: false,
-    }
-  );
+  const { data: carouselData } = useQuery<Product[]>({
+    queryKey: ["homePage"],
+    queryFn: () => fetchCHomeData(),
+    initialData: homeProductCarousel || undefined,
+    enabled: !homeProductCarousel,
+    refetchOnMount: false,
+  });
 
   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: [] } };
 }