diff --git a/app/[locale]/products/page.tsx b/app/[locale]/products/page.tsx index ee408ba..007ade3 100644 --- a/app/[locale]/products/page.tsx +++ b/app/[locale]/products/page.tsx @@ -1,14 +1,10 @@ -"use client" import { ProductBanner, Products } from "@/components/pages/products"; -import { useSearchParams } from "next/navigation"; export default function Page() { - const searchParams = useSearchParams() - const category = searchParams.get("category"); return (
- +
); } diff --git a/app/[locale]/subCategory/page.tsx b/app/[locale]/subCategory/page.tsx new file mode 100644 index 0000000..344aefd --- /dev/null +++ b/app/[locale]/subCategory/page.tsx @@ -0,0 +1,13 @@ +import { ProductBanner } from "@/components/pages/products"; +import { MainSubCategory } from "@/components/pages/subCategory"; + +export default function Page() { + return ( +
+ +
+ +
+
+ ); +} diff --git a/components/pages/home/blog/catalog.tsx b/components/pages/home/blog/catalog.tsx index d64ae7b..13a45bb 100644 --- a/components/pages/home/blog/catalog.tsx +++ b/components/pages/home/blog/catalog.tsx @@ -12,7 +12,7 @@ import { CategoryType } from "@/lib/types"; export default function Catalog() { const language = getRouteLang(); const { data, isLoading } = useQuery({ - queryKey: ["categorycasd", language], + queryKey: ["category", language], queryFn: () => httpClient(endPoints.category.all), select: (data): CategoryType[] => data?.data?.results, }); @@ -50,6 +50,7 @@ export default function Catalog() { title={item.name} description={item.description} image={item.image} + have_sub_category={item.have_sub_category} /> ))} diff --git a/components/pages/products/productBanner.tsx b/components/pages/products/banner.tsx similarity index 100% rename from components/pages/products/productBanner.tsx rename to components/pages/products/banner.tsx diff --git a/components/pages/products/catalog.tsx b/components/pages/products/catalog.tsx index c825d7b..c419028 100644 --- a/components/pages/products/catalog.tsx +++ b/components/pages/products/catalog.tsx @@ -48,12 +48,15 @@ import { useLocale, useTranslations } from "next-intl"; import Image from "next/image"; import Link from "next/link"; import { ArrowUpRight } from "lucide-react"; +import { useCategory } from "@/store/useCategory"; +import { useSubCategory } from "@/store/useSubCategory"; interface CatalogProps { id: number; image: string; title: string; description: string; + have_sub_category: boolean; } export default function CatalogCard({ @@ -61,14 +64,33 @@ export default function CatalogCard({ title, description, id, + have_sub_category, }: CatalogProps) { const t = useTranslations(); const locale = useLocale(); - console.log("category id: ", id); + const setCategory = useCategory((state) => state.setCategory); + const clearSubCategory = useSubCategory((state) => state.clearSubCategory); + const item = { + image: image, + name: title, + description: description, + id: id, + have_sub_category: have_sub_category, + }; + + const updateZustands = () => { + setCategory(item); + clearSubCategory(); + }; + + const navigateLink = have_sub_category + ? `/${locale}/subCategory?category=${id}` + : `/${locale}/products?category=${id}`; return ( {/* Background glow effect */} @@ -92,7 +114,7 @@ export default function CatalogCard({ {/* Description */}

- {t(description)} + {description}

diff --git a/components/pages/products/filter.tsx b/components/pages/products/filter/filter.tsx similarity index 94% rename from components/pages/products/filter.tsx rename to components/pages/products/filter/filter.tsx index cdae34e..1aad318 100644 --- a/components/pages/products/filter.tsx +++ b/components/pages/products/filter/filter.tsx @@ -2,6 +2,8 @@ import { useFilter } from "@/lib/filter-zustand"; import httpClient from "@/request/api"; import { endPoints } from "@/request/links"; +import { useCategory } from "@/store/useCategory"; +import { useSubCategory } from "@/store/useSubCategory"; import { useQuery } from "@tanstack/react-query"; import { Check } from "lucide-react"; import { useEffect, useState } from "react"; @@ -10,6 +12,8 @@ export default function Filter() { const filter = useFilter((state) => state.filter); const toggleFilter = useFilter((state) => state.toggleFilter); const hasData = useFilter((state) => state.hasFilter); + const category = useCategory((state) => state.category); + const subCategory = useSubCategory((state) => state.subCategory); const [dataExpanded, setDataExpanded] = useState(false); const [numberExpanded, setNumberExpanded] = useState(false); @@ -145,6 +149,11 @@ export default function Filter() { ? sizeData : sizeData.slice(0, 10); + console.log("have suncategory: ", category.have_sub_category); + if (category.have_sub_category || subCategory.id!==0) { + return null; + } + return (
{/* Bo'lim filtri */} diff --git a/components/pages/products/filterInfo.tsx b/components/pages/products/filter/filterInfo.tsx similarity index 100% rename from components/pages/products/filterInfo.tsx rename to components/pages/products/filter/filterInfo.tsx diff --git a/components/pages/products/index.ts b/components/pages/products/index.ts index accacc6..264cf5d 100644 --- a/components/pages/products/index.ts +++ b/components/pages/products/index.ts @@ -1,5 +1,5 @@ -export { ProductBanner } from "./productBanner"; -export { Products } from "./products"; +export { ProductBanner } from "./banner"; +export { Products } from "./product/products"; export { SliderComp } from "./slug/slider"; export { RightSide } from "./slug/rightSide"; export { Features } from "./slug/features"; diff --git a/components/pages/products/product/mianProduct.tsx b/components/pages/products/product/mianProduct.tsx new file mode 100644 index 0000000..78d17bd --- /dev/null +++ b/components/pages/products/product/mianProduct.tsx @@ -0,0 +1,59 @@ +"use client"; +import httpClient from "@/request/api"; +import { endPoints } from "@/request/links"; +import { useQuery } from "@tanstack/react-query"; +import ProductCard from "./productCard"; +import { useCategory } from "@/store/useCategory"; + +export default function MainProduct() { + const category = useCategory((state) => state.category); + + const requestLink = category.have_sub_category + ? endPoints.subCategory.byId(category.id) + : endPoints.product.byCategory(category.id || 0); + + const { data, isLoading, error } = useQuery({ + queryKey: ["products", category.id], + queryFn: () => httpClient(requestLink), + select: (data) => data?.data?.data?.results, + }); + + if (isLoading) { + return ( +
+ {[1, 2, 3].map((i) => ( +
+ ))} +
+ ); + } + + if (error) { + return ( +
+ Ma'lumotlarni yuklashda xatolik yuz berdi +
+ ); + } + + if (!data || data.length === 0) { + return ( +
+ Mahsulotlar topilmadi +
+ ); + } + + return ( +
+ {data.map((item: any) => ( + + ))} +
+ ); +} diff --git a/components/pages/products/productCard.tsx b/components/pages/products/product/productCard.tsx similarity index 77% rename from components/pages/products/productCard.tsx rename to components/pages/products/product/productCard.tsx index 38a3d00..57171f7 100644 --- a/components/pages/products/productCard.tsx +++ b/components/pages/products/product/productCard.tsx @@ -1,5 +1,5 @@ -"use client"; +import { useLocale } from "next-intl"; import Image from "next/image"; import Link from "next/link"; @@ -14,22 +14,24 @@ export default function ProductCard({ image, slug, }: ProductCardProps) { + const locale = useLocale(); + return ( - -
+ +
{/* Image Container */}
{title}
{/* Content Container */}
- {/* Title */}

{title}

diff --git a/components/pages/products/product/products.tsx b/components/pages/products/product/products.tsx new file mode 100644 index 0000000..13781d7 --- /dev/null +++ b/components/pages/products/product/products.tsx @@ -0,0 +1,21 @@ +import Filter from "../filter/filter"; +import FilterInfo from "../filter/filterInfo"; +import MainProduct from "./mianProduct"; + +export function Products() { + return ( +
+
+
+ {/* filter part */} + + + {/* main products */} + + + +
+
+
+ ); +} diff --git a/components/pages/products/products.tsx b/components/pages/products/products.tsx deleted file mode 100644 index 1145797..0000000 --- a/components/pages/products/products.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { ca, lede, slt } from "@/lib/demoData"; -import Filter from "./filter"; -import FilterInfo from "./filterInfo"; -import ProductCard from "./productCard"; - -// slt , ca , lede - -export function Products({ categoryName }: { categoryName: string | null }) { - console.log("category name: ",categoryName) - const getProducts = () => { - switch (categoryName) { - case "slt": - return slt; - case "ca": - return ca; - case "lede": - return lede; - default: - return [...slt, ...ca, ...lede]; - } - }; - - const products = getProducts(); - return ( -
-
-
- {/* filter part */} - - - {/* main products */} -
- {products.map((item, index) => ( - - ))} -
- -
-
-
- ); -} diff --git a/components/pages/subCategory/body.tsx b/components/pages/subCategory/body.tsx new file mode 100644 index 0000000..1db426e --- /dev/null +++ b/components/pages/subCategory/body.tsx @@ -0,0 +1,56 @@ +"use client"; + +import httpClient from "@/request/api"; +import { endPoints } from "@/request/links"; +import { useQuery } from "@tanstack/react-query"; +import { useCategory } from "@/store/useCategory"; +import Card from "./card"; + +export function MainSubCategory() { + const category = useCategory((state) => state.category); + const { data, isLoading, error } = useQuery({ + queryKey: ["subCategory"], + queryFn: () => httpClient(endPoints.subCategory.byId(category.id)), + select: (data) => data?.data?.results, + }); + + if (isLoading) { + return ( +
+ {[1, 2, 3].map((i) => ( +
+ ))} +
+ ); + } + + if (error) { + return ( +
+ Ma'lumotlarni yuklashda xatolik yuz berdi +
+ ); + } + + if (!data || data.length === 0) { + return ( +
+ Mahsulotlar topilmadi +
+ ); + } + return ( +
+ {data.map((item: any) => ( + + ))} +
+ ); +} diff --git a/components/pages/subCategory/card.tsx b/components/pages/subCategory/card.tsx new file mode 100644 index 0000000..fa59743 --- /dev/null +++ b/components/pages/subCategory/card.tsx @@ -0,0 +1,60 @@ +import { useSubCategory } from "@/store/useSubCategory"; +import { useLocale } from "next-intl"; +import Image from "next/image"; +import Link from "next/link"; +import { useRouter } from "next/navigation"; + +interface ProductCardProps { + id: number; + category: number; + title: string; + image: string; + slug: string; +} + +export default function Card({ + title, + image, + slug, + id, + category, +}: ProductCardProps) { + const locale = useLocale(); + const router = useRouter(); + const setSubCategory = useSubCategory((state) => state.setSubCategory); + + const handleClick = (e: React.MouseEvent) => { + e.preventDefault(); + + setSubCategory({ + id, + name: title, + image, + category, + }); + router.push(`/${locale}/products/${slug}`); + }; + return ( + +
+ {/* Image Container */} +
+ {title} +
+ + {/* Content Container */} +
+

+ {title} +

+
+
+ + ); +} diff --git a/components/pages/subCategory/index.ts b/components/pages/subCategory/index.ts new file mode 100644 index 0000000..a94f692 --- /dev/null +++ b/components/pages/subCategory/index.ts @@ -0,0 +1 @@ +export { MainSubCategory } from "./body"; diff --git a/lib/types.ts b/lib/types.ts index 5b1de65..5c72c1f 100644 --- a/lib/types.ts +++ b/lib/types.ts @@ -3,6 +3,7 @@ export interface CategoryType { name: string; image: string; description: string; + have_sub_category: boolean; } export interface SubCategoryType { diff --git a/store/useCategory.ts b/store/useCategory.ts index af27552..eb15eb5 100644 --- a/store/useCategory.ts +++ b/store/useCategory.ts @@ -4,6 +4,7 @@ import { create } from "zustand"; interface CategoryZustandType { category: CategoryType; setCategory: (category: CategoryType) => void; + clearCatalog: () => void; } const demoCategory: CategoryType = { @@ -11,9 +12,11 @@ const demoCategory: CategoryType = { name: "", description: "", image: "", + have_sub_category: false, }; export const useCategory = create((set) => ({ category: demoCategory, setCategory: (data) => set({ category: data }), + clearCatalog: () => set({ category: demoCategory }), })); diff --git a/store/useSubCategory.ts b/store/useSubCategory.ts index 5e34adc..bc16f72 100644 --- a/store/useSubCategory.ts +++ b/store/useSubCategory.ts @@ -4,6 +4,7 @@ import { create } from "zustand"; interface SubCategoryZustandType { subCategory: SubCategoryType; setSubCategory: (subCategory: SubCategoryType) => void; + clearSubCategory: () => void; } const demoSubCategory = { @@ -15,4 +16,5 @@ const demoSubCategory = { export const useSubCategory = create((set) => ({ subCategory: demoSubCategory, setSubCategory: (data) => set({ subCategory: data }), + clearSubCategory: () => set({ subCategory: demoSubCategory }), }));