Cart system update

actions/cart.ts

@@ -25,32 +25,15 @@ export const addToCartHandler = async (values: CartItemValidator) => {
 
  const { productId, productItemId, availableItemId } = validatedBody;
 
- //Check if product exists
- const productExists = await prismadb.product.findUnique({
- where: {
- id: productId,
- },
- });
-
- if (!productExists) {
- throw new Error("Product with provided ID does not exist.");
- }
-
- //Check if product item exists
- const productItemExists = await prismadb.productItem.findUnique({
- where: {
- id: productItemId,
- },
- });
-
- if (!productItemExists) {
- throw new Error("Product item with provided ID does not exist.");
- }
-
  //Check if available Item exists
  const availableItemExists = await prismadb.available.findUnique({
  where: {
  id: availableItemId,
+ productId,
+ productItemId,
+ },
+ select: {
+ id: true,
  },
  });
 

components/cart/CartItem.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useState } from "react";
 import Image from "next/image";
 import { toast } from "sonner";
 import { Button } from "../ui/button";
@@ -21,12 +21,18 @@ const CartItem = ({ cartItem, isCheckout, index }: Props) => {
 
  const queryClient = useQueryClient();
 
+ const [quantity, setQuantity] = useState(cartItem.quantity || 0);
+
+ const [isChangeLoading, setIsChangeLoading] = useState(false);
+
  const { mutate: removeItem, isPending } = useMutation({
  mutationKey: ["remove-cart-item"],
  mutationFn: deleteCartItem,
  onSuccess: () => {
  toast.success("Item removed from cart.");
 
+ setQuantity(0);
+
  queryClient.invalidateQueries({
  queryKey: ["get-cart-item"],
  });
@@ -41,6 +47,8 @@ const CartItem = ({ cartItem, isCheckout, index }: Props) => {
  const { mutate: onQuantityChange, isPending: isLoading } = useMutation({
  mutationKey: ["update-quantity", cartItem.id],
  mutationFn: async ({ task }: { task: "add" | "minus" }) => {
+ setIsChangeLoading(true);
+
  if (
  cartItem.availableItem?.numInStocks &&
  task === "add" &&
@@ -53,6 +61,10 @@ const CartItem = ({ cartItem, isCheckout, index }: Props) => {
  return;
  }
 
+ task === "add"
+ ? setQuantity((prev) => prev + 1)
+ : setQuantity((prev) => prev - 1);
+
  await updateCartItem({ cartItemId: cartItem.id, task });
  },
  onSuccess: () => {
@@ -61,9 +73,13 @@ const CartItem = ({ cartItem, isCheckout, index }: Props) => {
  });
 
  isCheckout && router.refresh();
+
+ setIsChangeLoading(false);
  },
  onError: (err) => {
  toast.error(err.message || "Something went wrong");
+
+ setIsChangeLoading(false);
  },
  });
 
@@ -111,19 +127,19 @@ const CartItem = ({ cartItem, isCheckout, index }: Props) => {
  <Button
  className="text-lg font-semibold"
  variant="outline"
- disabled={isPending || isLoading}
+ disabled={isPending || isLoading || isChangeLoading}
  onClick={() => onQuantityChange({ task: "minus" })}
  data-cy={`cart-item-${index}-minus`}
  >
  -
  </Button>
 
- <div className="px-3 font-semibold">{cartItem.quantity}</div>
+ <div className="px-3 font-semibold">{quantity}</div>
 
  <Button
  className="text-lg font-semibold"
  variant="outline"
- disabled={isPending || isLoading}
+ disabled={isPending || isLoading || isChangeLoading}
  onClick={() => onQuantityChange({ task: "add" })}
  data-cy={`cart-item-${index}-add`}
  >

package.json

@@ -38,7 +38,7 @@
  "@radix-ui/react-tooltip": "^1.0.7",
  "@react-email/components": "^0.0.14",
  "@react-email/render": "^0.0.12",
- "@tanstack/react-query": "^5.28.6",
+ "@tanstack/react-query": "^5.40.1",
  "@tanstack/react-table": "^8.11.8",
  "@upstash/ratelimit": "^1.0.3",
  "@upstash/redis": "^1.29.0",