Merge pull request #17 from muhammadshakkeerp/feature/optimization

Feature/optimization
muhammadshakkeerp · Sep 10, 2024 · fadc9fb · fadc9fb
2 parents 63833dc + aaa7fbd
commit fadc9fb
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 36 deletions.
diff --git a/src/components/HeaderCategory.tsx b/src/components/HeaderCategory.tsx
@@ -1,20 +1,20 @@
 import { BiChevronDown } from "react-icons/bi";
-import { FC, useState } from "react";
-import { HeaderCategory, SubCategory } from "../types/layoutTypes";
+import { FC, useMemo, useState } from "react";
+import { HeaderCategoryProps } from "../types/layoutTypes";
 import { Link } from "react-router-dom";
 import { RootState } from "../redux/store";
 import { useSelector } from "react-redux";
 import { headerCategories } from "../assets/headerCategoryData";
 
 interface headerCategoriesProps {
-  headerCategories: HeaderCategory[]
+  headerCategories: HeaderCategoryProps[]
 }
 
-export const HeaderCatogory: FC<headerCategoriesProps> = () => {
+export const HeaderCategory: FC<headerCategoriesProps> = () => {
   const [hoveredCategory, setHoveredCategory] = useState<string | null>(null);
-  const [findSubCetogory, setFindSubCetogory] = useState<
-    SubCategory[] | undefined
-  >([]);
+  // const [findSubCategory, setFindSubCategory] = useState<
+  //   SubCategory[] | undefined
+  // >([]);
 
   // Darkmode
   const DarkMode = useSelector((state: RootState) => state?.dark)
@@ -26,23 +26,16 @@ export const HeaderCatogory: FC<headerCategoriesProps> = () => {
   const handleMouseLeave = () => {
     setHoveredCategory(null);
   };
-  const handleHoverCategory = (categoryName: string) => {
-    let foundSubCategory: SubCategory[] | undefined;
-    if (categoryName) {
-      const foundCategory = headerCategories.find(
-        (item: HeaderCategory) => item.title === categoryName
-      );
-      if (foundCategory && foundCategory.subCategories) {
-        foundSubCategory = foundCategory.subCategories;
-      } else {
-        foundSubCategory = undefined;
-      }
-    }
-    setFindSubCetogory(foundSubCategory);
-  };
+  const handleHoverCategory = useMemo(() => (categoryName: string) => {
+    // setFindSubCategory(foundSubCategory);
+    const foundCategory = headerCategories?.find((item: HeaderCategoryProps) => item.title === categoryName)
+    // setFindSubCategory(foundCategory?.subCategories || [])
+    return foundCategory?.subCategories || []
+    // console.log(foundCategory?.subCategories)
+  }, [])
 
   return (
-    <div className={`flex   gap-1 flex-shrink-0 justify-between ${DarkMode?.isEnabled ? "bg-slate-800 text-white" : "bg-[#e4adff] md:bg-white"}  md:gap-3 header-category-img-p  relative`}>
+    <div className={`flex gap-1 flex-shrink-0 justify-between ${DarkMode?.isEnabled ? "bg-slate-800 text-white" : "bg-[#e4adff] md:bg-white"}  md:gap-3 header-category-img-p  relative`}>
       {headerCategories?.map((category, index) => (
         <Link to="/productsGroup" key={index}>
           <div
@@ -69,15 +62,23 @@ export const HeaderCatogory: FC<headerCategoriesProps> = () => {
                 onMouseEnter={() => handleHoverCategory(category.title)}
                 className={`hidden md:block absolute w-[200px] transform origin-top -translate-y-10 group-hover:-translate-y-0 transition-transform duration-300 top-[120px] left-0 ${DarkMode ? "bg-darkModeBg/90 border border-white/50 text-darkModeText" : "bg-white"} shadow-2xl shadow-slate-700 px-2 py-1 rounded-sm z-50`}
               >
-                {findSubCetogory &&
-                  Array.from(findSubCetogory)?.map((item, subIndex) => (
+                {/* {findSubCategory &&
+                  Array.from(findSubCategory)?.map((item, subIndex) => (
                     <li
                       key={subIndex}
                       className="primary-font font-semibold py-2 px-1 cursor-pointer hover:bg-slate-600"
                     >
                       {item?.category}
                     </li>
-                  ))}
+                  ))} */}
+                {handleHoverCategory(category.title)?.map((item, subIndex) => (
+                  <li
+                    key={subIndex}
+                    className="primary-font font-semibold py-2 px-1 cursor-pointer hover:bg-slate-600"
+                  >
+                    {item?.category}
+                  </li>
+                ))}
               </ul>
             )}
           </div>

diff --git a/src/components/HomeSlider.tsx b/src/components/HomeSlider.tsx
@@ -12,6 +12,8 @@ const HomeSlider = () => {
   const [currentImg, setCurrentImg] = useState(0);
 
   useEffect(() => {
+    // Modulo Operation algorithms used here
+    // Cycling Through Images Using Modulo
     const timer = setInterval(() => {
       // (1+1) % 5 =
       const nextImg = (currentImg + 1) % bannerImgArray.length;

diff --git a/src/components/Offer.tsx b/src/components/Offer.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { offerImgs } from '../assets/globalUtlities';
 
-export  const Offer = () => {
+export const Offer = () => {
   const [numImagesToShow, setNumImagesToShow] = useState(4);
 
   useEffect(() => {
@@ -28,7 +28,7 @@ export  const Offer = () => {
   }, []);
 
   return (
-    <div className="flex flex-wrap justify-center flex-shrink-0 flex-row">
+    <div className="flex flex-wrap justify-center flex-shrink-0 flex-row relative z-30">
       {offerImgs?.slice(0, numImagesToShow).map((img, index) => (
         <div key={index} className="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 md:p-1">
           <img src={img.img} alt={img.img} className="w-full h-auto " />

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -1,9 +1,9 @@
 import { FC, } from "react";
-import { HeaderCategory } from "../types/layoutTypes";
+import { HeaderCategoryProps } from "../types/layoutTypes";
 import {
   Ad,
   CustomProductsRows,
-  HeaderCatogory,
+  HeaderCategory,
   HomeSlider,
   Offer,
 } from "../paths";
@@ -12,7 +12,7 @@ import { AxiosFetchState } from "../redux/store";
 import { featuredProducts } from "../assets/globalUtlities";
 
 interface headerCategoriesProps {
-  headerCategories: HeaderCategory[],
+  headerCategories: HeaderCategoryProps[],
 
 }
 
@@ -22,7 +22,7 @@ const Home: FC<headerCategoriesProps> = () => {
   return (
     <div>
       <HomeSlider />
-      <HeaderCatogory headerCategories={[]} />
+      <HeaderCategory headerCategories={[]} />
       <Offer />
       <div>
         <CustomProductsRows title={"Popular Products"} starProducts={0} endProducts={12} featuredProducts={undefined} />

diff --git a/src/paths.ts b/src/paths.ts
@@ -1,6 +1,6 @@
 import { CustomProductsRows } from "./components/CustomProductsRows";
 import { Header } from "./components/Header";
-import { HeaderCatogory } from "./components/HeaderCategory";
+import { HeaderCategory } from "./components/HeaderCategory";
 import { HomeBanner } from "./components/HomeBanner";
 import { HomeSlider } from "./components/HomeSlider";
 import { Offer } from "./components/Offer";
@@ -27,7 +27,7 @@ export {
   CustomProductsRows,
   Ad,
   Header,
-  HeaderCatogory,
+  HeaderCategory,
   HomeBanner,
   HomeSlider,
   Rewards,

diff --git a/src/types/layoutTypes.ts b/src/types/layoutTypes.ts
@@ -11,13 +11,13 @@ export type SubCategory = {
   subItems: SubItem[];
 };
 
-type HeaderCategory = {
+type HeaderCategoryProps = {
   title: string;
   img: string;
   subCategories: SubCategory[];
 };
 
-type headerCategoriesProps = HeaderCategory[];
+type headerCategoriesProps = HeaderCategoryProps[];
 
 type RowProductsProps = {
   id: number;
@@ -50,5 +50,5 @@ export type {
   ProductDetailsProps,
   FooterDataProps,
   headerCategoriesProps,
-  HeaderCategory,
+  HeaderCategoryProps,
 };