first commit
This commit is contained in:
Jelaletdin12
38
components/home/Carousel.tsx
Normal file
38
components/home/Carousel.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
"use client"
|
||||
import Image, { type StaticImageData } from "next/image"
|
||||
import { Swiper, SwiperSlide } from "swiper/react"
|
||||
import { Autoplay } from "swiper/modules"
|
||||
import "swiper/css"
|
||||
|
||||
type CarouselItem = {
|
||||
title: string
|
||||
image: StaticImageData | string
|
||||
url?: string | null
|
||||
}
|
||||
|
||||
export default function HeroCarousel({ items }: { items: CarouselItem[] }) {
|
||||
return (
|
||||
<section className="rounded-2xl overflow-hidden">
|
||||
<Swiper
|
||||
modules={[Autoplay]}
|
||||
slidesPerView={1}
|
||||
loop
|
||||
autoplay={{ delay: 3000, disableOnInteraction: false }}
|
||||
>
|
||||
{items.map((item, i) => (
|
||||
<SwiperSlide key={i}>
|
||||
<div className="relative w-full h-[200px] sm:h-[300px] md:h-[420px]">
|
||||
<Image
|
||||
src={item.image}
|
||||
alt={item.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
priority={i === 0}
|
||||
/>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
61
components/home/CategoryGrid.tsx
Normal file
61
components/home/CategoryGrid.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
"use client"
|
||||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
import type { Category } from "@/lib/types/api"
|
||||
|
||||
type Props = {
|
||||
categories: Category[] | undefined
|
||||
isLoading: boolean
|
||||
isError: boolean
|
||||
locale: string
|
||||
title: string
|
||||
}
|
||||
|
||||
export default function CategoryGrid({ categories, isLoading, isError, locale, title }: Props) {
|
||||
if (isError) {
|
||||
return (
|
||||
<section className="bg-white rounded-2xl shadow-sm p-6">
|
||||
<h2 className="text-xl font-semibold mb-4">{title}</h2>
|
||||
<p className="text-red-600">Failed to load categories. Please try again.</p>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<section className="bg-white rounded-2xl shadow-sm p-6">
|
||||
<h2 className="text-xl font-semibold mb-4">{title}</h2>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<div key={i} className="space-y-2">
|
||||
<Skeleton className="w-full h-36 rounded-lg" />
|
||||
<Skeleton className="w-full h-4 rounded" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="bg-white rounded-2xl shadow-sm p-6">
|
||||
<h2 className="text-xl font-semibold mb-4">{title}</h2>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
|
||||
{categories?.map((cat) => (
|
||||
<Link key={cat.id} href={`/${locale}/category/${cat.slug}?category_id=${cat.id}`}>
|
||||
<Card className="hover:shadow-md border-none shadow-none p-0 gap-2 transition-all cursor-pointer">
|
||||
<div className="relative w-full h-36 overflow-hidden rounded-lg">
|
||||
<Image src={cat.image || "/placeholder.svg"} alt={cat.name} fill className="object-contain" />
|
||||
</div>
|
||||
<CardContent className="py-2">
|
||||
<p className="text-sm font-medium text-gray-800 truncate text-center">{cat.name}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
182
components/home/HomePage.tsx
Normal file
182
components/home/HomePage.tsx
Normal file
@@ -0,0 +1,182 @@
|
||||
"use client"
|
||||
import { useLocale, useTranslations } from "next-intl"
|
||||
import { useEffect, useState, useCallback } from "react"
|
||||
import InfiniteScroll from "react-infinite-scroll-component"
|
||||
import HeroCarousel from "./Carousel"
|
||||
import CategoryGrid from "./CategoryGrid"
|
||||
import CollectionSection from "./ProductGrid"
|
||||
import { useCategories, useCarousels, useCollections } from "@/lib/hooks"
|
||||
import type { Collection } from "@/lib/types/api"
|
||||
|
||||
export default function HomePage() {
|
||||
const locale = useLocale()
|
||||
const t = useTranslations("common")
|
||||
const [mounted, setMounted] = useState(false)
|
||||
const [visibleCollections, setVisibleCollections] = useState<Collection[]>([])
|
||||
const [hasMore, setHasMore] = useState(true)
|
||||
const itemsPerPage = 10
|
||||
|
||||
const { data: categories, isLoading: categoriesLoading, isError: categoriesError } = useCategories()
|
||||
const { data: carousels, isLoading: carouselsLoading } = useCarousels()
|
||||
const { data: collections, isLoading: collectionsLoading, isError: collectionsError } = useCollections()
|
||||
|
||||
useEffect(() => setMounted(true), [])
|
||||
|
||||
// Initialize visible collections when data first loads
|
||||
useEffect(() => {
|
||||
console.log("=== Collections Data Change ===")
|
||||
console.log("Collections:", collections)
|
||||
console.log("Collections length:", collections?.length)
|
||||
console.log("Visible collections length:", visibleCollections.length)
|
||||
|
||||
if (collections && collections.length > 0 && visibleCollections.length === 0) {
|
||||
console.log("🟢 Initializing first batch of collections")
|
||||
const initial = collections.slice(0, itemsPerPage)
|
||||
console.log("Initial collections to show:", initial.length)
|
||||
setVisibleCollections(initial)
|
||||
setHasMore(collections.length > itemsPerPage)
|
||||
console.log("Has more after init:", collections.length > itemsPerPage)
|
||||
}
|
||||
}, [collections, visibleCollections.length])
|
||||
|
||||
const loadMoreCollections = useCallback(() => {
|
||||
console.log("=== loadMoreCollections Called ===")
|
||||
console.log("Collections available:", collections?.length)
|
||||
console.log("Visible collections:", visibleCollections.length)
|
||||
console.log("Has more:", hasMore)
|
||||
|
||||
if (!collections) {
|
||||
console.log("❌ No collections data")
|
||||
return
|
||||
}
|
||||
|
||||
const currentLength = visibleCollections.length
|
||||
const nextCollections = collections.slice(
|
||||
currentLength,
|
||||
currentLength + itemsPerPage
|
||||
)
|
||||
|
||||
console.log("Current length:", currentLength)
|
||||
console.log("Next batch size:", nextCollections.length)
|
||||
console.log("Next batch:", nextCollections.map(c => c.id))
|
||||
|
||||
if (nextCollections.length > 0) {
|
||||
console.log("🟢 Adding", nextCollections.length, "more collections")
|
||||
setVisibleCollections((prev) => {
|
||||
const updated = [...prev, ...nextCollections]
|
||||
console.log("Updated visible collections count:", updated.length)
|
||||
return updated
|
||||
})
|
||||
} else {
|
||||
console.log("⚠️ No more collections to load")
|
||||
}
|
||||
|
||||
// Check if we've loaded all collections
|
||||
const newTotal = currentLength + nextCollections.length
|
||||
const shouldHaveMore = newTotal < collections.length
|
||||
console.log("New total:", newTotal, "/ Total available:", collections.length)
|
||||
console.log("Should have more:", shouldHaveMore)
|
||||
|
||||
if (!shouldHaveMore) {
|
||||
console.log("🔴 Setting hasMore to false")
|
||||
setHasMore(false)
|
||||
}
|
||||
}, [collections, visibleCollections.length, itemsPerPage, hasMore])
|
||||
|
||||
useEffect(() => {
|
||||
console.log("=== State Update ===")
|
||||
console.log("Visible collections count:", visibleCollections.length)
|
||||
console.log("Has more:", hasMore)
|
||||
}, [visibleCollections.length, hasMore])
|
||||
|
||||
if (!mounted) return <div className="p-8">Loading...</div>
|
||||
|
||||
// Transform carousel data to match component props
|
||||
const carouselItems = carousels?.map(carousel => ({
|
||||
title: carousel.title || "",
|
||||
image: carousel.image || carousel.thumbnail,
|
||||
url: carousel.link || null
|
||||
})) || []
|
||||
|
||||
console.log("=== Render ===")
|
||||
console.log("Collections loading:", collectionsLoading)
|
||||
console.log("Visible collections for render:", visibleCollections.length)
|
||||
console.log("Has more for InfiniteScroll:", hasMore)
|
||||
|
||||
return (
|
||||
<div className="px-4 md:px-8 lg:px-12 pt-8 pb-12 space-y-8">
|
||||
{/* Hero Carousel with API data */}
|
||||
{!carouselsLoading && carouselItems.length > 0 && (
|
||||
<HeroCarousel items={carouselItems} />
|
||||
)}
|
||||
|
||||
{/* Categories Grid */}
|
||||
<CategoryGrid
|
||||
categories={categories}
|
||||
isLoading={categoriesLoading}
|
||||
isError={categoriesError}
|
||||
locale={locale}
|
||||
title={t("categories")}
|
||||
/>
|
||||
|
||||
{/* Collections Sections with Infinite Scroll */}
|
||||
{collectionsError ? (
|
||||
<section className="bg-white rounded-2xl shadow-sm p-6">
|
||||
<p className="text-red-600">Failed to load collections. Please try again.</p>
|
||||
</section>
|
||||
) : collectionsLoading ? (
|
||||
<div className="space-y-8">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<div key={i} className="bg-white rounded-2xl shadow-sm p-6">
|
||||
<div className="h-8 bg-gray-200 rounded w-48 mb-4 animate-pulse" />
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
|
||||
{Array.from({ length: 4 }).map((_, j) => (
|
||||
<div key={j} className="h-64 bg-gray-200 rounded-lg animate-pulse" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="bg-yellow-100 border border-yellow-400 rounded p-4 text-sm">
|
||||
<strong>Debug Info:</strong><br/>
|
||||
Total Collections: {collections?.length || 0}<br/>
|
||||
Visible: {visibleCollections.length}<br/>
|
||||
Has More: {hasMore ? "Yes" : "No"}
|
||||
</div>
|
||||
|
||||
<InfiniteScroll
|
||||
dataLength={visibleCollections.length}
|
||||
next={loadMoreCollections}
|
||||
hasMore={hasMore}
|
||||
loader={
|
||||
<div className="text-center py-8 bg-blue-50 border-2 border-blue-200 rounded">
|
||||
<div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-blue-600 border-r-transparent"></div>
|
||||
<p className="text-gray-500 mt-2 font-bold">Loading more collections...</p>
|
||||
</div>
|
||||
}
|
||||
endMessage={
|
||||
<div className="text-center py-8 bg-green-50 border-2 border-green-200 rounded">
|
||||
<p className="text-gray-600 font-bold">✓ You've reached the end</p>
|
||||
</div>
|
||||
}
|
||||
scrollThreshold={0.8}
|
||||
>
|
||||
<div className="space-y-8">
|
||||
{visibleCollections.map((collection, index) => (
|
||||
<div key={collection.id}>
|
||||
<div className="text-xs text-gray-400 mb-2">Collection #{index + 1}</div>
|
||||
<CollectionSection
|
||||
collection={collection}
|
||||
locale={locale}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</InfiniteScroll>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
112
components/home/ProductGrid.tsx
Normal file
112
components/home/ProductGrid.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
"use client"
|
||||
import { useEffect, useState } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { ChevronRight } from "lucide-react"
|
||||
import ProductCard from "@/components/ProductCard"
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
import { useCollectionProducts } from "@/lib/hooks"
|
||||
import type { Collection } from "@/lib/types/api"
|
||||
|
||||
type Props = {
|
||||
collection: Collection
|
||||
locale: string
|
||||
}
|
||||
|
||||
export default function CollectionSection({ collection, locale }: Props) {
|
||||
const router = useRouter()
|
||||
const [shouldRender, setShouldRender] = useState(true)
|
||||
|
||||
const {
|
||||
data: productsData,
|
||||
isLoading,
|
||||
isError
|
||||
} = useCollectionProducts(collection.id, { enabled: shouldRender })
|
||||
|
||||
// Determine if section should render based on products
|
||||
useEffect(() => {
|
||||
if (!isLoading && productsData) {
|
||||
const hasProducts = productsData.data && productsData.data.length > 0
|
||||
setShouldRender(hasProducts)
|
||||
}
|
||||
}, [isLoading, productsData])
|
||||
|
||||
// Don't render if no products after loading
|
||||
if (!isLoading && (!productsData?.data || productsData.data.length === 0)) {
|
||||
return null
|
||||
}
|
||||
|
||||
const handleTitleClick = () => {
|
||||
router.push(`/${locale}/collections/${collection.id}`)
|
||||
}
|
||||
|
||||
// Show skeleton while loading
|
||||
if (isLoading) {
|
||||
return (
|
||||
<section className="bg-white rounded-2xl shadow-sm p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<Skeleton className="h-8 w-48" />
|
||||
<Skeleton className="h-6 w-6 rounded-full" />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<Skeleton key={i} className="w-full h-64 rounded-lg" />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
// Show error state
|
||||
if (isError) {
|
||||
return null // Silently skip errored collections
|
||||
}
|
||||
|
||||
// Slice to show only first 4 products
|
||||
const displayProducts = productsData?.data.slice(0, 4) || []
|
||||
|
||||
return (
|
||||
<section className="bg-white rounded-2xl shadow-sm p-6">
|
||||
<div
|
||||
className="flex items-center justify-between mb-4 cursor-pointer group"
|
||||
onClick={handleTitleClick}
|
||||
>
|
||||
<h2 className="text-xl font-semibold group-hover:text-blue-600 transition-colors">
|
||||
{collection.name}
|
||||
</h2>
|
||||
<ChevronRight className="w-6 h-6 text-gray-400 group-hover:text-blue-600 group-hover:translate-x-1 transition-all" />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
|
||||
{displayProducts.map((product) => {
|
||||
// Extract first media image or use placeholder
|
||||
const firstImage = product.media?.[0]?.images_800x800 ||
|
||||
product.media?.[0]?.images_720x720 ||
|
||||
product.media?.[0]?.thumbnail ||
|
||||
"/placeholder-product.jpg"
|
||||
|
||||
// Format price
|
||||
const formattedPrice = product.price_amount
|
||||
? `${parseFloat(product.price_amount).toFixed(2)} TMT`
|
||||
: "Price not available"
|
||||
|
||||
return (
|
||||
<ProductCard
|
||||
key={product.id}
|
||||
id={product.id}
|
||||
name={product.name}
|
||||
price={product.price_amount ? parseFloat(product.price_amount) : null}
|
||||
struct_price_text={formattedPrice}
|
||||
images={[firstImage]}
|
||||
is_favorite={false}
|
||||
labels={[]}
|
||||
price_color="#111"
|
||||
height={360}
|
||||
width={250}
|
||||
button={false}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
56
components/home/mockData.tsx
Normal file
56
components/home/mockData.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import temp1 from "@/public/temp1.jpg"
|
||||
import temp2 from "@/public/temp2.jpg"
|
||||
import temp3 from "@/public/temp3.jpg"
|
||||
import jbl from "@/public/jbl.png"
|
||||
import jbll from "@/public/jbll.png"
|
||||
import jbl3 from "@/public/jbl3.webp"
|
||||
import jb from "@/public/jb.webp"
|
||||
|
||||
export const carouselItems = [
|
||||
{ title: "Banner 1", image: temp1, url: "#" },
|
||||
{ title: "Banner 2", image: temp2, url: "#" },
|
||||
{ title: "Banner 3", image: temp3, url: "#" },
|
||||
]
|
||||
|
||||
export const categories = [
|
||||
{ id: 1, slug: "sneakers", name: "Sneakers", image: jbl },
|
||||
{ id: 2, slug: "boots", name: "Boots", image: jbl3 },
|
||||
{ id: 3, slug: "sandals", name: "Sandals", image: jbll },
|
||||
{ id: 4, slug: "heels", name: "Heels", image: jb },
|
||||
]
|
||||
|
||||
export const products = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Nike Air Max 270",
|
||||
struct_price_text: "$120",
|
||||
price: 120,
|
||||
images: [jb, jbll, jbl, jbl3],
|
||||
is_favorite: false,
|
||||
labels: [{ text: "New", bg_color: "#10B981" }],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Adidas Ultraboost",
|
||||
struct_price_text: "$150",
|
||||
price: 150,
|
||||
images: [jbll, jb, jbl, jbl3],
|
||||
is_favorite: true,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Puma RS-X",
|
||||
struct_price_text: "$110",
|
||||
price: 110,
|
||||
images: [jbl3, jbll, jbl, jb],
|
||||
is_favorite: false,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "New Balance 327",
|
||||
struct_price_text: "$130",
|
||||
price: 130,
|
||||
images: [jbl, jbll, jb, jbl3],
|
||||
is_favorite: false,
|
||||
},
|
||||
]
|
||||
Reference in New Issue
Block a user