Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 16x 16x 16x 16x 16x 16x 16x 2x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 16x 1x 1x | import React from "react";
import Link from "next/link";
import { AppDispatch } from "@/redux/store";
import { useDispatch } from "react-redux";
import { removeFromWishlistAsync, type WishListItem } from "@/redux/features/wishlistSlice";
import { Icon } from "@/components/ui/icons";
import { ProductThumbnail, PriceDisplay, Button } from "@/components/ui";
import { useProductActions } from "@/hooks/useProductActions";
interface SingleItemProps {
item: WishListItem;
}
const SingleItem: React.FC<SingleItemProps> = ({ item }) => {
const dispatch = useDispatch<AppDispatch>();
// Use useProductActions for proper API integration
// The hook handles both Redux state update and API call for authenticated users
const { addToCart } = useProductActions(item);
const handleRemoveFromWishlist = () => {
dispatch(removeFromWishlistAsync(item.id));
};
return (
<div className="flex items-center border-t border-gray-3 dark:border-gray-700 py-5 px-10">
<div className="min-w-[83px]">
<Button
variant="ghost"
size="sm"
onClick={() => handleRemoveFromWishlist()}
aria-label="Remove from wishlist"
className="max-w-[38px] w-full h-9.5"
>
<Icon name="x-circle" size={22} />
</Button>
</div>
<div className="min-w-[387px]">
<div className="flex items-center justify-between gap-5">
<div className="w-full flex items-center gap-5.5">
<Link href={`/product/${item.id}`} className="flex items-center justify-center rounded-[5px] bg-gray-2 dark:bg-gray-700 max-w-[80px] w-full h-17.5">
<ProductThumbnail
src={item.imgs?.thumbnails[0]}
alt={item.title}
size={80}
/>
</Link>
<div>
<h3 className="text-dark dark:text-gray-100 ease-out duration-200 hover:text-blue">
<Link href={`/product/${item.id}`}>{item.title}</Link>
</h3>
</div>
</div>
</div>
</div>
<div className="min-w-[205px]">
<PriceDisplay
price={item.price}
discountedPrice={item.discountedPrice}
size="sm"
/>
</div>
<div className="min-w-[265px]">
{item.status === "in_stock" ? (
<div className="flex items-center gap-1.5">
<Icon name="check-circle" size={20} style={{ color: "#22AD5C" }} />
<span className="text-green-dark">In Stock</span>
</div>
) : (
<div className="flex items-center gap-1.5">
<Icon name="info-circle" size={20} style={{ color: "#F23030" }} />
<span className="text-red">Out of Stock</span>
</div>
)}
</div>
<div className="min-w-[150px] flex justify-end">
<Button
variant="outline"
size="md"
onClick={() => addToCart(1)}
>
Add to Cart
</Button>
</div>
</div>
);
};
export default SingleItem;
|