feat: add delete button for cart (#107)

guan404ming · May 24, 2024 · 198a6c7 · 198a6c7
1 parent 1e50fd6
commit 198a6c7
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 1 deletion.
diff --git a/src/app/my/cart/[storeId]/page.tsx b/src/app/my/cart/[storeId]/page.tsx
@@ -1,4 +1,5 @@
 import { getServerSession } from "next-auth";
+import { redirect } from "next/navigation";
 
 import CartConfirmButton from "../_components/cart-confirm-button";
 import CartItem from "../_components/cart-item";
@@ -43,6 +44,7 @@ export default async function MyCartPage({
  }, 0);
 
  if (cartItem.length === 0) {
+ redirect("/my/cart/all");
  return (
  <div className="flex flex-grow flex-col items-center justify-center space-y-4 text-center text-xl font-semibold">
  <ShoppingCart size={40} />

diff --git a/src/app/my/cart/_components/cart-item.tsx b/src/app/my/cart/_components/cart-item.tsx
@@ -1,6 +1,19 @@
 "use client";
 
+import { Trash } from "lucide-react";
+
 import ImageCardPrimitive from "@/components/image-card/image-card-primitive";
+import { Button } from "@/components/ui/button";
+import {
+ Drawer,
+ DrawerClose,
+ DrawerContent,
+ DrawerDescription,
+ DrawerFooter,
+ DrawerHeader,
+ DrawerTitle,
+ DrawerTrigger,
+} from "@/components/ui/drawer";
 import useCart from "@/hooks/use-cart";
 
 export default function CartItem({
@@ -18,7 +31,7 @@ export default function CartItem({
  image: string;
  dishQuantity: number;
 }) {
- const { updateCart } = useCart();
+ const { updateCart, removeFromCart } = useCart();
  const handleUpdateCart = async (number: number) => {
  await updateCart(id, number);
  };
@@ -31,12 +44,45 @@ export default function CartItem({
  maxAmount: dishQuantity - quantity,
  }}
  image={image}
+ className="relative"
  >
  <div className="flex justify-between">
  <h1 className="line-clamp-2 font-semibold">{name}</h1>
  </div>
 
  <div className="text-sm text-muted-foreground">$ {price}</div>
+ <Drawer>
+ <DrawerTrigger asChild>
+ <Button
+ size={"icon"}
+ variant="outline"
+ className="absolute bottom-2 left-20 h-8 w-8 rounded-full border"
+ >
+ <Trash className="h-3 w-3" strokeWidth={3} />
+ </Button>
+ </DrawerTrigger>
+ <DrawerContent>
+ <DrawerHeader>
+ <DrawerTitle>Remove Item</DrawerTitle>
+ <DrawerDescription>This action cannot be undone.</DrawerDescription>
+ </DrawerHeader>
+ <DrawerFooter>
+ <Button
+ variant={"destructive"}
+ onClick={() => {
+ removeFromCart(id);
+ }}
+ >
+ Delete
+ </Button>
+ <DrawerClose asChild>
+ <Button variant="outline" className="block w-full">
+ Cancel
+ </Button>
+ </DrawerClose>
+ </DrawerFooter>
+ </DrawerContent>
+ </Drawer>
  </ImageCardPrimitive>
  );
 }