Skip to content

Commit

Permalink
Merge pull request #314 from Tanishashrivas/devlogic
Browse files Browse the repository at this point in the history 
fixes issue #306 & #302
  • Loading branch information
@pooranjoyb
pooranjoyb authored Jul 10, 2024
2 parents eab36e6 + 40d85c7 commit b40f021
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 42 deletions.
4 changes: 2 additions & 2 deletions src/components/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,14 +194,14 @@ function Navbar() {
{_.name}
</h4>
<p className="font-medium dark:text-gray-400">
Price: ${_.price}
Price: ₹{_.price}
</p>
</div>
</div>
))}

<span className="text-mynavy mt-3">
subtotal ${total}
subtotal ₹{total}
</span>

<Link
Expand Down
42 changes: 19 additions & 23 deletions src/pages/Cart/Cart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export interface ITEM {
name: string;
image: string;
quantity: number;
size: string;
}

const Cart: React.FC = () => {
Expand All @@ -34,7 +35,7 @@ const Cart: React.FC = () => {
name: "DISCOUNT10",
discount: 10,
};

useEffect(() => {
const fetchCartData = async () => {
try {
Expand Down Expand Up @@ -69,7 +70,7 @@ const Cart: React.FC = () => {
window.scrollTo(0, 0);
}, []);

const handleRemoveItem = async (itemName: string) => {
const handleRemoveItem = async (itemName: string, itemSize: string) => {
try {
const { data, error } = await supabase
.from("Cart")
Expand All @@ -83,7 +84,7 @@ const Cart: React.FC = () => {

if (data && data.products) {
const updatedProducts = data.products.filter(
(item: ITEM) => item.name !== itemName
(item: ITEM) => !(item.name === itemName && item.size === itemSize)
);

const { error: updateError } = await supabase
Expand All @@ -94,16 +95,14 @@ const Cart: React.FC = () => {
if (updateError) {
throw updateError;
}
toast.success("item removed success");
toast.success("Item removed successfully");
setCartItems(updatedProducts);
}
} catch (error) {
console.error("Error removing item from cart:", error);
}
};

// quantity handle here

const handleQuantityChange = async (
itemName: string,
newQuantity: number
Expand Down Expand Up @@ -160,7 +159,7 @@ const Cart: React.FC = () => {
<div className="p-8 bg-gray-50 dark:bg-gray-800">
<div className="flex flex-wrap -mx-4">
<div className="w-full px-4 mb-8 xl:mb-0">
{cartItems.length == 0 ? (
{cartItems.length === 0 ? (
""
) : (
<div className="flex flex-wrap items-center mb-6 -mx-4 md:mb-8">
Expand All @@ -174,12 +173,12 @@ const Cart: React.FC = () => {
Price
</h2>
</div>
<div className="hidden md:block px-4 md:w-1/6 lg:w-2/12 ">
<div className="hidden md:block px-4 md:w-1/6 lg:w-2/12">
<h2 className="font-bold text-gray-500 dark:text-gray-400">
Quantity
</h2>
</div>
<div className="hidden md:block px-4 text-right md:w-1/6 lg:w-2/12 ">
<div className="hidden md:block px-4 text-right md:w-1/6 lg:w-2/12">
<h2 className="font-bold text-gray-500 dark:text-gray-400 mr-36">
Subtotal
</h2>
Expand Down Expand Up @@ -210,10 +209,10 @@ const Cart: React.FC = () => {
<div className="hidden px-4 lg:block lg:w-2/12">
<Skeleton height={24} width={`50%`} />
</div>
<div className="w-auto px-4 md:w-1/6 lg:w-2/12 ">
<div className="w-auto px-4 md:w-1/6 lg:w-2/12">
<Skeleton height={32} width={64} />
</div>
<div className="w-auto px-4 text-right md:w-1/6 lg:w-2/12 ">
<div className="w-auto px-4 text-right md:w-1/6 lg:w-2/12">
<Skeleton height={24} width={`50%`} />
</div>
</div>
Expand All @@ -236,7 +235,7 @@ const Cart: React.FC = () => {
) : (
cartItems.map((item: ITEM) => (
<div
key={item.name}
key={item.name + item.size} // Ensure unique key by combining name and size
className="flex flex-wrap items-center mb-6 -mx-4 md:mb-8"
>
<div className="w-full px-4 mb-6 md:w-4/6 lg:w-6/12 md:mb-0">
Expand All @@ -252,7 +251,7 @@ const Cart: React.FC = () => {
</div>
<div className="w-2/3 px-4">
<h2 className="mb-2 text-xl font-bold dark:text-gray-400">
{item.name}
{item.name} <span className="text-gray-500">({item.size})</span> {/* Display size */}
</h2>
<p className="text-gray-500 dark:text-gray-400 ">
{item.desc}
Expand All @@ -262,10 +261,10 @@ const Cart: React.FC = () => {
</div>
<div className="hidden px-4 lg:block lg:w-2/12">
<p className="text-lg font-bold text-blue-500 dark:text-gray-400">
${item.price}
₹{item.price}
</p>
</div>
<div className="w-auto px-4 md:w-1/6 lg:w-2/12 ">
<div className="w-auto px-4 md:w-1/6 lg:w-2/12">
<QuantityButton
initialQuantity={item.quantity ? item.quantity : 1}
onUpdate={(newQuantity) =>
Expand All @@ -275,13 +274,10 @@ const Cart: React.FC = () => {
</div>
<div className="w-auto px-4 text-right md:w-1/6 lg:w-2/12 flex items-center justify-between">
<p className="text-lg font-bold text-blue-500 dark:text-gray-400">
$
{item.quantity
? item.quantity * item.price
: item.price}
₹{item.quantity ? item.quantity * item.price : item.price}
</p>
<button
onClick={() => handleRemoveItem(item.name)}
onClick={() => handleRemoveItem(item.name, item.size)} // Pass size to handleRemoveItem
className="text-red-600 hover:text-red-800"
>
<MdDelete size={24} />
Expand All @@ -291,14 +287,14 @@ const Cart: React.FC = () => {
))
)}
</div>
{cartItems.length == 0 ? (
{cartItems.length === 0 ? (
""
) : (
<div className="flex flex-wrap items-center gap-4">
<span>Apply Coupon</span>
<input
type="text"
className="flex-1 px-8 py-4 font-normal placeholder-gray-300 border dark:border-gray-700 dark:placeholder-gray-500 md:flex-none md:mr-6 dark:text-gray-400 dark:bg-gray-800 "
className="flex-1 px-8 py-4 font-normal placeholder-gray-300 border dark:border-gray-700 dark:placeholder-gray-500 md:flex-none md:mr-6 dark:text-gray-400 dark:bg-gray-800"
placeholder="Enter coupon code"
value={coupon}
onChange={(e) => setCoupon(e.target.value)}
Expand All @@ -312,7 +308,7 @@ const Cart: React.FC = () => {
navigate("/home/shop/checkout");
}}
/>
<h2 className="text-xl font-bold">Total: ${calculateTotal().toFixed(2)}</h2>
<h2 className="text-xl font-bold">Total: ₹{calculateTotal().toFixed(2)}</h2>
</div>
)}
</div>
Expand Down
55 changes: 38 additions & 17 deletions src/pages/Shop/ProductDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,13 @@ interface RatingItem {
checked?: boolean;
}

interface CartItem {
name: string;
size: string;
quantity: number;
}


export interface UserState {
user: {
username: string;
Expand Down Expand Up @@ -82,7 +89,7 @@ function ProductDetail() {
size, //Include size
};
const addToCart = async () => {
if (!size) { //added check for size
if (!size) { // added check for size
toast.error('Please select a size');
return;
}
Expand All @@ -94,38 +101,50 @@ function ProductDetail() {
desc: data.desc,
quantity: data.qauntity || 1,
ratings: 5,
size, //Include size
size, // Include size
};

// Attempt to fetch the user's cart
const { data: userCart, error: fetchError } = await supabase
.from('Cart')
.select('*')
.eq('username', userName)
.single();

if (fetchError && fetchError.code !== 'PGRST116') { // Ignore "No such record" error
console.error("Fetch error:", fetchError);
throw fetchError;
}

console.log("Product added", product);

console.log("Product to be added", product);
if (userCart) {
// If the cart exists, update it
const updatedProducts = [...userCart.products, product];

// Check if the product already exists in the cart
const existingProductIndex = userCart.products.findIndex(
(item: CartItem) => item.name === product.name && item.size === product.size
);

let updatedProducts;
if (existingProductIndex !== -1) {
// If the product exists, increase its quantity
updatedProducts = [...userCart.products];
updatedProducts[existingProductIndex].quantity += product.quantity;
} else {
// If the product does not exist, add it to the cart
updatedProducts = [...userCart.products, product];
}

const { error: updateError } = await supabase
.from('Cart')
.update({ products: updatedProducts })
.eq('username', userName);

if (updateError) {
console.error("Update error:", updateError);
throw updateError;
}

console.log("Product added to cart:", product);
console.log("Product added/updated in cart:", product);
dispatch(addItem({ item: product }));
toast.success('Product added to cart');
} else {
Expand All @@ -138,12 +157,12 @@ function ProductDetail() {
products: [product],
},
]);

if (insertError) {
console.error("Insert error:", insertError);
throw insertError;
}

console.log("Product added to cart:", product);
dispatch(addItem({ item: product }));
toast.success('Product added to cart');
Expand All @@ -153,6 +172,8 @@ function ProductDetail() {
toast.error('Error adding product to cart');
}
};



return (
<>
Expand Down Expand Up @@ -182,9 +203,9 @@ function ProductDetail() {
{data.desc}
</p>
<p className="inline-block mb-8 text-4xl font-bold text-gray-700 dark:text-gray-400 ">
<span>${data.price}</span>
<span>₹{data.price}</span>
<span
className="text-base font-normal text-gray-500 line-through dark:text-gray-400 ml-2">${data.price + 89}</span>
className="text-base font-normal text-gray-500 line-through dark:text-gray-400 ml-2">₹{data.price + 89}</span>
</p>
<p className="text-green-600 dark:text-green-300 ">7 in stock</p>
</div>
Expand Down

0 comments on commit b40f021

Please sign in to comment.