nurmuhammet/postshop-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed some ui, refactored code

Browse Source
This commit is contained in:
Jelaletdin12
2025-12-13 00:05:43 +05:00
parent 5085c0cffd
commit 633a3c9d47
30 changed files with 1274 additions and 923 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
features/home/components/CategoryGrid.tsx
View File

@@ -2,7 +2,6 @@
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 = {
@@ -38,8 +37,8 @@ export default function CategoryGrid({
<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 className="w-full h-36 bg-gray-200 rounded-lg animate-pulse" />
<div className="h-4 bg-gray-200 rounded w-full animate-pulse" />
</div>
))}
</div>
@@ -59,7 +58,9 @@ export default function CategoryGrid({
<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.media?.[0]?.images_400x400 || "/placeholder.svg"}
src={
cat.media[0]?.thumbnail || cat.media?.[0]?.images_400x400
}
alt={cat.name}
fill
className="object-contain"

55
features/home/components/HomePage.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { useLocale, useTranslations } from "next-intl";
import { useEffect, useState } from "react";
import { useState } from "react";
import InfiniteScroll from "react-infinite-scroll-component";
import HeroCarousel from "./Carousel";
import CategoryGrid from "./CategoryGrid";
@@ -15,7 +15,6 @@ import {
export default function HomePage() {
const locale = useLocale();
const t = useTranslations("common");
const [mounted, setMounted] = useState(false);
const [visibleCount, setVisibleCount] = useState(10);
const {
@@ -23,19 +22,15 @@ export default function HomePage() {
isLoading: categoriesLoading,
isError: categoriesError,
} = useCategories();
const { data: carousels, isLoading: carouselsLoading } = useCarousels();
const {
data: collections,
isLoading: collectionsLoading,
isError: collectionsError,
} = useCollections();
// CRITICAL: Prefetch favorites on mount to avoid loading states
const { isLoading: favoritesLoading } = useFavorites();
useEffect(() => setMounted(true), []);
// Prefetch favorites
useFavorites();
const loadMore = () => {
if (collections && visibleCount < collections.length) {
@@ -43,22 +38,16 @@ export default function HomePage() {
}
};
if (!mounted) return <div className="p-8">Loading...</div>;
const carouselItems =
carousels?.map((carousel) => ({
title: carousel.title || "",
image: carousel.image || carousel.thumbnail,
url: carousel.link || null,
carousels?.map((c) => ({
title: c.title || "",
image: c.image || c.thumbnail,
url: c.link || null,
})) || [];
const visibleCollections = collections?.slice(0, visibleCount) || [];
const hasMore = collections ? visibleCount < collections.length : false;
// Show loading indicator while favorites are being fetched
const showFavoritesLoading =
favoritesLoading && !categoriesLoading && !collectionsLoading;
return (
<div className="px-2 md:px-4 lg:px-6 pt-4 pb-12 space-y-8 max-w-[1504px] mx-auto">
{!carouselsLoading && carouselItems.length > 0 && (
@@ -73,13 +62,6 @@ export default function HomePage() {
title={t("categories")}
/>
{showFavoritesLoading && (
<div className="text-center py-4">
<div className="inline-block h-6 w-6 animate-spin rounded-full border-2 border-solid border-blue-600 border-r-transparent"></div>
<p className="text-gray-500 text-sm mt-2">Loading favorites...</p>
</div>
)}
{collectionsError ? (
<section className="bg-white rounded-2xl shadow-sm p-6">
<p className="text-red-600">
@@ -89,17 +71,18 @@ export default function HomePage() {
) : collectionsLoading ? (
<div className="space-y-8">
{Array.from({ length: 3 }).map((_, i) => (
<div key={i} className="bg-white rounded-2xl shadow-sm p-6">
<section 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 className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
{Array.from({ length: 5 }).map((_, j) => (
<div key={j} className="space-y-2">
<div className="w-full h-[260px] bg-gray-200 rounded-xl animate-pulse" />
<div className="h-4 bg-gray-200 rounded w-3/4 animate-pulse" />
<div className="h-6 bg-gray-200 rounded w-1/2 animate-pulse" />
</div>
))}
</div>
</div>
</section>
))}
</div>
) : (
@@ -109,13 +92,13 @@ export default function HomePage() {
hasMore={hasMore}
loader={
<div className="text-center py-8">
<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">Loading more collections...</p>
<div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-blue-600 border-r-transparent" />
<p className="text-gray-500 mt-2">{t("loading")}</p>
</div>
}
endMessage={
<div className="text-center py-8">
<p className="text-gray-600">✓ All collections loaded</p>
<p className="text-gray-600">✓ {t("all_collections_loaded")}</p>
</div>
}
scrollThreshold={0.8}

30
features/home/components/HomeSkeleton.tsx
View File

@@ -1,30 +0,0 @@
import { Skeleton } from "@/components/ui/skeleton"
import ProductGridSkeleton from "./ProductGridSkeleton"
import CategorySkeleton from "../../category/components/CategorySkeleton"
export default function HomeSkeleton() {
return (
<div className="px-4 md:px-8 lg:px-12 pt-8 pb-12 space-y-8">
{/* Hero Carousel Skeleton */}
<section className="rounded-2xl overflow-hidden">
<Skeleton className="w-full h-[200px] sm:h-[300px] md:h-[420px] bg-gray-200" />
</section>
{/* Categories Section Skeleton */}
<section className="bg-white rounded-2xl shadow-sm p-6">
<Skeleton className="h-6 w-32 mb-4 bg-gray-200" />
<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) => (
<CategorySkeleton key={i} />
))}
</div>
</section>
{/* Products Section Skeleton */}
<section className="bg-white rounded-2xl shadow-sm p-6">
<Skeleton className="h-6 w-32 mb-4 bg-gray-200" />
<ProductGridSkeleton count={10} columns="5" />
</section>
</div>
)
}

194
features/home/components/ProductCard.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import { useState, MouseEvent, useEffect, useRef, useCallback } from "react";
import { useState, useEffect, useRef, useCallback, MouseEvent } from "react";
import { useRouter } from "next/navigation";
import { Heart, ShoppingCart, Loader2, Plus, Minus } from "lucide-react";
import { toast } from "sonner";
import {
@@ -21,6 +22,7 @@ import {
useCart,
} from "@/features/cart/hooks/useCart";
import { useTranslations } from "next-intl";
type ProductCardProps = {
id: number;
name: string;
@@ -42,8 +44,6 @@ export default function ProductCard({
name,
price,
struct_price_text,
discount,
discount_text,
images,
labels = [],
price_color = "#005bff",
@@ -52,6 +52,8 @@ export default function ProductCard({
button = false,
stock,
}: ProductCardProps) {
const router = useRouter();
const t = useTranslations();
const { isFavorite, isLoading: isFavoriteLoading } = useIsFavorite(id);
const { mutate: toggleFavorite, isPending: isFavoriteToggling } =
useToggleFavorite();
@@ -66,54 +68,45 @@ export default function ProductCard({
const autoplayRef = useRef<NodeJS.Timeout | null>(null);
const debounceTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
const isRequestInFlightRef = useRef(false);
const isRequestInFlightRef = useRef<boolean>(false);
const pendingQuantityRef = useRef<number | null>(null);
const hasMultipleImages = images.length > 1;
const cartItem = cartData?.data?.find((item: any) => item.product?.id === id);
const isInCart = !!cartItem;
const isOutOfStock = stock !== undefined && stock === 0;
const isOutOfStock = stock === 0;
const availableStock = stock || 999;
const t = useTranslations();
// Carousel setup
useEffect(() => {
if (!api) return;
setCurrent(api.selectedScrollSnap());
api.on("select", () => {
setCurrent(api.selectedScrollSnap());
});
const onSelect = () => setCurrent(api.selectedScrollSnap());
api.on("select", onSelect);
return () => {
api.off("select", onSelect);
};
}, [api]);
// Autoplay
useEffect(() => {
if (!api || !hasMultipleImages) return;
const startAutoplay = () => {
autoplayRef.current = setInterval(() => {
if (api.canScrollNext()) {
api.scrollNext();
} else {
api.scrollTo(0);
}
}, 3000);
};
autoplayRef.current = setInterval(() => {
api.canScrollNext() ? api.scrollNext() : api.scrollTo(0);
}, 3000);
startAutoplay();
return () => {
if (autoplayRef.current) {
clearInterval(autoplayRef.current);
}
if (autoplayRef.current) clearInterval(autoplayRef.current);
};
}, [api, hasMultipleImages]);
// Sync localQuantity with cart
// Sync local quantity with cart
useEffect(() => {
if (cartItem?.product_quantity) {
setLocalQuantity(cartItem.product_quantity);
} else {
setLocalQuantity(1);
}
setLocalQuantity(cartItem?.product_quantity || 1);
}, [cartItem]);
// Server sync function
const syncToServer = useCallback(
async (quantity: number) => {
if (isRequestInFlightRef.current) {
@@ -125,13 +118,7 @@ export default function ProductCard({
setIsSyncing(true);
try {
await updateCartMutation.mutateAsync({
productId: id,
quantity: quantity,
});
isRequestInFlightRef.current = false;
setIsSyncing(false);
await updateCartMutation.mutateAsync({ productId: id, quantity });
await refetchCart();
if (pendingQuantityRef.current !== null) {
@@ -141,9 +128,13 @@ export default function ProductCard({
}
} catch (error) {
console.error("Sync failed:", error);
setLocalQuantity(cartItem?.product_quantity || 1);
toast.error("Failed to update quantity", {
description: "Please try again",
});
} finally {
isRequestInFlightRef.current = false;
setIsSyncing(false);
setLocalQuantity(cartItem?.product_quantity || 1);
}
},
[id, updateCartMutation, cartItem, refetchCart]
@@ -151,24 +142,17 @@ export default function ProductCard({
// Debounced sync
useEffect(() => {
if (!isInCart) return;
if (debounceTimerRef.current) {
clearTimeout(debounceTimerRef.current);
}
if (localQuantity === (cartItem?.product_quantity || 1)) {
if (!isInCart || localQuantity === (cartItem?.product_quantity || 1))
return;
}
if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
debounceTimerRef.current = setTimeout(() => {
syncToServer(localQuantity);
}, 800);
return () => {
if (debounceTimerRef.current) {
clearTimeout(debounceTimerRef.current);
}
if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
};
}, [localQuantity, isInCart, cartItem, syncToServer]);
@@ -180,14 +164,11 @@ export default function ProductCard({
toggleFavorite(
{ productId: id, isFavorite },
{
onSuccess: (data) => {
onSuccess: (data) =>
toast.success(
data.wasAdded ? "Added to favorites" : "Removed from favorites"
);
},
onError: () => {
toast.error("Error. Try again");
},
),
onError: () => toast.error("Error. Try again"),
}
);
},
@@ -199,6 +180,16 @@ export default function ProductCard({
e.preventDefault();
e.stopPropagation();
// Stock kontrolü
if (localQuantity > availableStock) {
toast.error("Insufficient Stock", {
description: `Only ${availableStock} items available in stock`,
duration: 4000,
});
setLocalQuantity(availableStock);
return;
}
setIsSyncing(true);
try {
@@ -206,58 +197,51 @@ export default function ProductCard({
productId: id,
quantity: localQuantity,
});
await refetchCart();
setIsSyncing(false);
toast.success("Added to cart", {
description: `${name} has been added to your cart`,
});
} catch (error) {
console.error("Add to cart error:", error);
setIsSyncing(false);
toast.error("Failed to add to cart");
} finally {
setIsSyncing(false);
}
},
[id, name, localQuantity, addToCartMutation, refetchCart]
[id, name, localQuantity, availableStock, addToCartMutation, refetchCart]
);
const handleQuantityIncrease = useCallback(
(e: MouseEvent<HTMLButtonElement>) => {
const handleQuantityChange = useCallback(
(e: MouseEvent<HTMLButtonElement>, delta: number) => {
e.preventDefault();
e.stopPropagation();
if (localQuantity >= availableStock) {
toast.error("Stock limit reached", {
description: `Only ${availableStock} items available`,
const newQuantity = localQuantity + delta;
if (newQuantity < 1) return;
if (newQuantity > availableStock) {
toast.error("Stock Limit Reached", {
description: `Maximum ${availableStock} items available`,
duration: 4000,
});
return;
}
setLocalQuantity((prev) => prev + 1);
setLocalQuantity(newQuantity);
},
[localQuantity, availableStock]
);
const handleQuantityDecrease = useCallback(
(e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
e.stopPropagation();
if (localQuantity <= 1) return;
setLocalQuantity((prev) => prev - 1);
},
[localQuantity]
);
const handleCardClick = (e: MouseEvent<HTMLAnchorElement>) => {
const handleCardClick = (e: MouseEvent<HTMLDivElement>) => {
const target = e.target as HTMLElement;
if (
target.closest("button") ||
target.closest('[data-carousel-control="true"]')
) {
e.preventDefault();
return;
}
router.push(`/product/${id}`);
};
const handleNavClick = (e: MouseEvent, action: () => void) => {
@@ -267,32 +251,27 @@ export default function ProductCard({
};
return (
<a
href={`/product/${id}`}
className="no-underline flex justify-center"
<div
onClick={handleCardClick}
className="flex justify-center cursor-pointer"
>
<Card
className="relative gap-2 border-none shadow-none p-0 w-full overflow-hidden rounded-2xl cursor-pointer"
className="relative gap-2 border-none shadow-none p-0 w-full overflow-hidden rounded-2xl"
style={{ height, maxWidth: width }}
>
<div className="relative w-full h-[260px] group">
<Carousel
opts={{
align: "start",
loop: true,
watchDrag: false,
}}
opts={{ align: "start", loop: true, watchDrag: false }}
setApi={setApi}
className="w-full h-full"
>
<CarouselContent className="h-[260px] ml-0">
{images.map((image, index) => (
<CarouselItem key={index} className="h-[260px] pl-0">
{images.map((image, idx) => (
<CarouselItem key={idx} className="h-[260px] pl-0">
<div className="h-full flex items-center justify-center">
<img
src={image}
alt={`${name} - ${index + 1}`}
alt={`${name} - ${idx + 1}`}
className="max-w-full max-h-full object-contain"
draggable="false"
/>
@@ -317,7 +296,6 @@ export default function ProductCard({
)}
</Carousel>
{/* Favorite button */}
<button
onClick={handleFavorite}
disabled={isFavoriteToggling || isFavoriteLoading}
@@ -325,29 +303,31 @@ export default function ProductCard({
>
{isFavoriteLoading ? (
<div className="w-5 h-5 border-2 border-gray-300 border-t-gray-600 rounded-full animate-spin" />
) : isFavorite ? (
<Heart className="w-5 h-5 text-red-500 fill-red-500" />
) : (
<Heart className="w-5 h-5 text-gray-700" />
<Heart
className={`w-5 h-5 ${
isFavorite ? "text-red-500 fill-red-500" : "text-gray-700"
}`}
/>
)}
</button>
{hasMultipleImages && (
<div className="absolute bottom-2 left-1/2 -translate-x-1/2 z-10 flex gap-1.5">
{images.map((_, index) => (
{images.map((_, idx) => (
<button
key={index}
key={idx}
data-carousel-control="true"
onClick={(e) => handleNavClick(e, () => api?.scrollTo(index))}
onClick={(e) => handleNavClick(e, () => api?.scrollTo(idx))}
className={`h-1.5 rounded-full transition-all ${
index === current ? "w-6 bg-white" : "w-1.5 bg-white/60"
idx === current ? "w-6 bg-white" : "w-1.5 bg-white/60"
}`}
/>
))}
</div>
)}
{labels?.length > 0 && (
{labels.length > 0 && (
<div className="absolute top-2 left-2 flex flex-col gap-1 z-10">
{labels.map((label, idx) => (
<Badge
@@ -361,7 +341,6 @@ export default function ProductCard({
</div>
)}
{/* Out of Stock Overlay */}
{isOutOfStock && (
<div className="absolute inset-0 bg-black/50 flex items-center justify-center z-10">
<Badge variant="secondary" className="text-sm font-bold">
@@ -383,14 +362,13 @@ export default function ProductCard({
</p>
</CardContent>
{/* Cart controls - show on hover if button enabled */}
{button && !isOutOfStock && (
<div className=" px-1">
<div className="px-1">
{!isInCart ? (
<Button
onClick={handleAddToCart}
disabled={isSyncing}
className="w-full rounded-lg gap-2 bg-[#005bff] hover:bg-[#0041c4] cursor-pointer"
className="w-full rounded-lg gap-2 bg-[#005bff] hover:bg-[#0041c4]"
size="sm"
>
{isSyncing ? (
@@ -410,9 +388,9 @@ export default function ProductCard({
<Button
variant="outline"
size="icon"
onClick={handleQuantityDecrease}
onClick={(e) => handleQuantityChange(e, -1)}
disabled={isSyncing || localQuantity <= 1}
className="rounded-lg cursor-pointer h-9 w-9 shrink-0"
className="rounded-lg h-9 w-9 shrink-0"
>
<Minus className="h-4 w-4" />
</Button>
@@ -425,9 +403,9 @@ export default function ProductCard({
<Button
variant="outline"
size="icon"
onClick={handleQuantityIncrease}
onClick={(e) => handleQuantityChange(e, 1)}
disabled={localQuantity >= availableStock || isSyncing}
className="rounded-lg cursor-pointer h-9 w-9 shrink-0"
className="rounded-lg h-9 w-9 shrink-0"
>
<Plus className="h-4 w-4 text-[#005bff]" />
</Button>
@@ -436,6 +414,6 @@ export default function ProductCard({
</div>
)}
</Card>
</a>
</div>
);
}

23
features/home/components/ProductCardSkeleton.tsx
View File

@@ -1,23 +0,0 @@
import { Skeleton } from "@/components/ui/skeleton"
import { Card } from "@/components/ui/card"
export default function ProductCardSkeleton() {
return (
<Card className="overflow-hidden rounded-xl">
{/* Image Skeleton */}
<Skeleton className="aspect-square w-full bg-gray-200" />
{/* Content Skeleton */}
<div className="p-3 space-y-3">
{/* Title skeleton - 2 lines */}
<div className="space-y-2">
<Skeleton className="h-4 w-full bg-gray-200" />
<Skeleton className="h-4 w-3/4 bg-gray-200" />
</div>
{/* Price skeleton */}
<Skeleton className="h-6 w-1/2 bg-gray-200" />
</div>
</Card>
)
}

51
features/home/components/ProductGrid.tsx
View File

@@ -1,9 +1,7 @@
"use client";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { ChevronRight } from "lucide-react";
import ProductCard from "@/features/home/components/ProductCard";
import { Skeleton } from "@/components/ui/skeleton";
import { useCollectionProducts } from "@/lib/hooks";
import type { Collection } from "@/lib/types/api";
@@ -14,48 +12,42 @@ type Props = {
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 });
useEffect(() => {
if (!isLoading && productsData) {
const hasProducts = productsData.data && productsData.data.length > 0;
setShouldRender(hasProducts);
}
}, [isLoading, productsData]);
if (!isLoading && (!productsData?.data || productsData.data.length === 0)) {
return null;
}
} = useCollectionProducts(collection.id);
const handleTitleClick = () => {
router.push(`/${locale}/collections/${collection.id}`);
};
// Hide section if no products
if (!isLoading && (!productsData?.data || productsData.data.length === 0)) {
return null;
}
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 className="h-8 w-48 bg-gray-200 rounded animate-pulse" />
<div className="h-6 w-6 bg-gray-200 rounded-full animate-pulse" />
</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 className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
{Array.from({ length: 5 }).map((_, i) => (
<div key={i} className="space-y-2">
<div className="w-full h-[260px] bg-gray-200 rounded-xl animate-pulse" />
<div className="h-4 bg-gray-200 rounded w-3/4 animate-pulse mx-2" />
<div className="h-6 bg-gray-200 rounded w-1/2 animate-pulse mx-2" />
</div>
))}
</div>
</section>
);
}
if (isError) {
return null;
}
if (isError) return null;
const displayProducts = productsData?.data.slice(0, 10) || [];
@@ -75,11 +67,11 @@ export default function CollectionSection({ collection, locale }: Props) {
{displayProducts.map((product) => {
const allImages = product.media
?.map(
(media) =>
media.images_800x800 ||
media.images_720x720 ||
media.images_400x400 ||
media.thumbnail
(m) =>
m.images_800x800 ||
m.images_720x720 ||
m.images_400x400 ||
m.thumbnail
)
.filter(Boolean) || ["/placeholder-product.jpg"];
@@ -101,7 +93,6 @@ export default function CollectionSection({ collection, locale }: Props) {
price_color="#0059ff"
height={360}
width={250}
/>
);
})}

24
features/home/components/ProductGridSkeleton.tsx
View File

@@ -1,24 +0,0 @@
import ProductCardSkeleton from "./ProductCardSkeleton"
interface ProductGridSkeletonProps {
count?: number
columns?: "2" | "3" | "4" | "5"
}
export default function ProductGridSkeleton({ count = 8, columns = "4" }: ProductGridSkeletonProps) {
const gridClass =
{
"2": "grid-cols-2",
"3": "md:grid-cols-3",
"4": "md:grid-cols-4 lg:grid-cols-4",
"5": "md:grid-cols-4 xl:grid-cols-5",
}[columns] || "md:grid-cols-4"
return (
<div className={`grid grid-cols-2 sm:grid-cols-3 ${gridClass} gap-4`}>
{Array.from({ length: count }).map((_, i) => (
<ProductCardSkeleton key={i} />
))}
</div>
)
}