From 95f03659f6f2461704521a746e741d5cbc812f85 Mon Sep 17 00:00:00 2001 From: MuhammadShakkeer2030 Date: Wed, 24 Jul 2024 08:37:30 +0530 Subject: [PATCH 1/6] slider comments & image file name changed to starting of letter to small letter --- src/components/HomeSlider.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/HomeSlider.tsx b/src/components/HomeSlider.tsx index 498d704..3fc77f9 100644 --- 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; From 36cae274144391bca0eae817377eec1452a0cd6e Mon Sep 17 00:00:00 2001 From: MuhammadShakkeer2030 Date: Wed, 24 Jul 2024 16:49:20 +0530 Subject: [PATCH 2/6] fixed naming of HeaderCategory component --- src/components/HeaderCategory.tsx | 10 +++++----- src/pages/Home.tsx | 8 ++++---- src/paths.ts | 4 ++-- src/types/layoutTypes.ts | 6 +++--- 4 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/components/HeaderCategory.tsx b/src/components/HeaderCategory.tsx index e208cf6..c529b4b 100644 --- a/src/components/HeaderCategory.tsx +++ b/src/components/HeaderCategory.tsx @@ -1,16 +1,16 @@ import { BiChevronDown } from "react-icons/bi"; import { FC, useState } from "react"; -import { HeaderCategory, SubCategory } from "../types/layoutTypes"; +import { HeaderCategoryProps, SubCategory } 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 = () => { +export const HeaderCategory: FC = () => { const [hoveredCategory, setHoveredCategory] = useState(null); const [findSubCetogory, setFindSubCetogory] = useState< SubCategory[] | undefined @@ -30,7 +30,7 @@ export const HeaderCatogory: FC = () => { let foundSubCategory: SubCategory[] | undefined; if (categoryName) { const foundCategory = headerCategories.find( - (item: HeaderCategory) => item.title === categoryName + (item: HeaderCategoryProps) => item.title === categoryName ); if (foundCategory && foundCategory.subCategories) { foundSubCategory = foundCategory.subCategories; @@ -42,7 +42,7 @@ export const HeaderCatogory: FC = () => { }; return ( -
+
{headerCategories?.map((category, index) => (
= () => { return (
- +
diff --git a/src/paths.ts b/src/paths.ts index 3002b36..63bdb02 100644 --- 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 index 9e468a2..9b5aaa7 100644 --- 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, }; From cdc03de477c4939ee9753eb19c6dfbf8aa209009 Mon Sep 17 00:00:00 2001 From: MuhammadShakkeer2030 Date: Wed, 24 Jul 2024 17:52:36 +0530 Subject: [PATCH 3/6] fixing some spelling for better readability in HeaderCategory.tsx --- src/components/HeaderCategory.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/HeaderCategory.tsx b/src/components/HeaderCategory.tsx index c529b4b..ffa74ff 100644 --- a/src/components/HeaderCategory.tsx +++ b/src/components/HeaderCategory.tsx @@ -12,7 +12,7 @@ interface headerCategoriesProps { export const HeaderCategory: FC = () => { const [hoveredCategory, setHoveredCategory] = useState(null); - const [findSubCetogory, setFindSubCetogory] = useState< + const [findSubCategory, setFindSubCategory] = useState< SubCategory[] | undefined >([]); @@ -38,7 +38,7 @@ export const HeaderCategory: FC = () => { foundSubCategory = undefined; } } - setFindSubCetogory(foundSubCategory); + setFindSubCategory(foundSubCategory); }; return ( @@ -69,8 +69,8 @@ export const HeaderCategory: FC = () => { 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) => (
  • Date: Wed, 24 Jul 2024 19:03:23 +0530 Subject: [PATCH 4/6] iptimized dropdown hover effect --- src/components/HeaderCategory.tsx | 47 ++++++++++++++++++++----------- src/components/Offer.tsx | 4 +-- 2 files changed, 32 insertions(+), 19 deletions(-) diff --git a/src/components/HeaderCategory.tsx b/src/components/HeaderCategory.tsx index ffa74ff..3140339 100644 --- a/src/components/HeaderCategory.tsx +++ b/src/components/HeaderCategory.tsx @@ -1,5 +1,5 @@ import { BiChevronDown } from "react-icons/bi"; -import { FC, useState } from "react"; +import { FC, useMemo, useState } from "react"; import { HeaderCategoryProps, SubCategory } from "../types/layoutTypes"; import { Link } from "react-router-dom"; import { RootState } from "../redux/store"; @@ -26,20 +26,25 @@ export const HeaderCategory: FC = () => { const handleMouseLeave = () => { setHoveredCategory(null); }; - const handleHoverCategory = (categoryName: string) => { - let foundSubCategory: SubCategory[] | undefined; - if (categoryName) { - const foundCategory = headerCategories.find( - (item: HeaderCategoryProps) => item.title === categoryName - ); - if (foundCategory && foundCategory.subCategories) { - foundSubCategory = foundCategory.subCategories; - } else { - foundSubCategory = undefined; - } - } - setFindSubCategory(foundSubCategory); - }; + const handleHoverCategory = useMemo(() => (categoryName: string) => { + // let foundSubCategory: SubCategory[] | undefined; + // if (categoryName) { + // const foundCategory = headerCategories.find( + // (item: HeaderCategoryProps) => item.title === categoryName + // ); + // if (foundCategory && foundCategory.subCategories) { + // foundSubCategory = foundCategory.subCategories; + // } else { + // foundSubCategory = undefined; + // } + // } + // setFindSubCategory(foundSubCategory); + const foundCategory = headerCategories?.find((item: HeaderCategoryProps) => item.title === categoryName) + + // setFindSubCategory(foundCategory?.subCategories || []) + return foundCategory?.subCategories || [] + // console.log(foundCategory?.subCategories) + }, []) return (
    @@ -69,7 +74,7 @@ export const HeaderCategory: FC = () => { 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`} > - {findSubCategory && + {/* {findSubCategory && Array.from(findSubCategory)?.map((item, subIndex) => (
  • = () => { > {item?.category}
    • - ))} + ))} */} + {handleHoverCategory(category.title)?.map((item, subIndex) => ( +
  • + {item?.category} +
    • + ))} )}
    diff --git a/src/components/Offer.tsx b/src/components/Offer.tsx index ab69283..213a8ce 100644 --- 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 ( -
    +
    {offerImgs?.slice(0, numImagesToShow).map((img, index) => (
    {img.img} From ca3d04a605deb8fb9ba96fc0b37750867db47ed3 Mon Sep 17 00:00:00 2001 From: MuhammadShakkeer2030 Date: Thu, 25 Jul 2024 05:41:44 +0530 Subject: [PATCH 5/6] removed unused line --- src/components/HeaderCategory.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/HeaderCategory.tsx b/src/components/HeaderCategory.tsx index 3140339..f1ebec3 100644 --- a/src/components/HeaderCategory.tsx +++ b/src/components/HeaderCategory.tsx @@ -1,6 +1,6 @@ import { BiChevronDown } from "react-icons/bi"; import { FC, useMemo, useState } from "react"; -import { HeaderCategoryProps, SubCategory } from "../types/layoutTypes"; +import { HeaderCategoryProps } from "../types/layoutTypes"; import { Link } from "react-router-dom"; import { RootState } from "../redux/store"; import { useSelector } from "react-redux"; @@ -12,9 +12,9 @@ interface headerCategoriesProps { export const HeaderCategory: FC = () => { const [hoveredCategory, setHoveredCategory] = useState(null); - const [findSubCategory, setFindSubCategory] = useState< - SubCategory[] | undefined - >([]); + // const [findSubCategory, setFindSubCategory] = useState< + // SubCategory[] | undefined + // >([]); // Darkmode const DarkMode = useSelector((state: RootState) => state?.dark) From aaa7fbd54135474e38b3bdbc873397b0605ca515 Mon Sep 17 00:00:00 2001 From: MuhammadShakkeer2030 Date: Tue, 10 Sep 2024 18:22:28 +0530 Subject: [PATCH 6/6] Header compoenent commment removed --- src/components/HeaderCategory.tsx | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/components/HeaderCategory.tsx b/src/components/HeaderCategory.tsx index f1ebec3..7b03a7a 100644 --- a/src/components/HeaderCategory.tsx +++ b/src/components/HeaderCategory.tsx @@ -27,20 +27,8 @@ export const HeaderCategory: FC = () => { setHoveredCategory(null); }; const handleHoverCategory = useMemo(() => (categoryName: string) => { - // let foundSubCategory: SubCategory[] | undefined; - // if (categoryName) { - // const foundCategory = headerCategories.find( - // (item: HeaderCategoryProps) => item.title === categoryName - // ); - // if (foundCategory && foundCategory.subCategories) { - // foundSubCategory = foundCategory.subCategories; - // } else { - // foundSubCategory = undefined; - // } - // } // setFindSubCategory(foundSubCategory); const foundCategory = headerCategories?.find((item: HeaderCategoryProps) => item.title === categoryName) - // setFindSubCategory(foundCategory?.subCategories || []) return foundCategory?.subCategories || [] // console.log(foundCategory?.subCategories)