Skip to content

Commit

Permalink
feat: update card dialog (#77)
Browse files Browse the repository at this point in the history
  • Loading branch information
@guan404ming
guan404ming committed May 25, 2024
1 parent a6eaf15 commit 4510c64
Show file tree
Hide file tree
Showing 3 changed files with 140 additions and 129 deletions.
15 changes: 12 additions & 3 deletions src/components/image-card/image-card-primitive.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
"use client";

import type { Dispatch, SetStateAction } from "react";

import Image from "next/image";
import { useRouter } from "next/navigation";

Expand All @@ -16,6 +18,7 @@ export default function ImageCardPrimitive({
counter,
image,
className,
setOpen,
}: {
children: React.ReactNode;
href?: string;
Expand All @@ -28,22 +31,28 @@ export default function ImageCardPrimitive({
};
image: string;
className?: string;
setOpen?: Dispatch<SetStateAction<boolean>>;
}) {
const router = useRouter();
const handleRouting = () => {
const handleClick = () => {
if (href) {
router.push(href);
}

if (setOpen) {
setOpen((prev) => !prev);
}
console.log("clicked");
};

return (
<>
<Card
onClick={() => handleRouting()}
onClick={() => handleClick()}
className={cn(
className,
"z-0 flex h-[120px] flex-nowrap text-center shadow-none max-md:border-none",
href && "cursor-pointer",
(href || setOpen) && "cursor-pointer",
)}
>
<Image
Expand Down
162 changes: 82 additions & 80 deletions src/components/image-card/post-dish.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,102 +38,104 @@ export default function PostDish({
const { updatePostDish, deletePost } = usePost();
const [reserve, setReserve] = useState(false);
const router = useRouter();
console.log(reserve);

return (
<ImageCardPrimitive
image={postDish.image}
counter={
isCounter
? {
amount: postDish.quantity,
setAmount: async (number: number) => {
await updatePostDish({ ...postDish, quantity: number });
},
}
: undefined
}
className="relative"
>
{isAuthor ? (
isEdit ? (
<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>Delete Post</DrawerTitle>
<DrawerDescription>
This action cannot be undone.
</DrawerDescription>
</DrawerHeader>
<DrawerFooter>
<>
<ImageCardPrimitive
image={postDish.image}
counter={
isCounter
? {
amount: postDish.quantity,
setAmount: async (number: number) => {
await updatePostDish({ ...postDish, quantity: number });
},
}
: undefined
}
className="relative"
setOpen={!isAuthor ? setReserve : undefined}
>
{isAuthor ? (
isEdit ? (
<Drawer>
<DrawerTrigger asChild>
<Button
variant={"destructive"}
onClick={() => {
deletePost({ id: postDish.postId });
router.push("/");
}}
size={"icon"}
variant="outline"
className="absolute bottom-2 left-20 h-8 w-8 rounded-full border"
>
Delete
<Trash className="h-3 w-3" strokeWidth={3} />
</Button>
<DrawerClose asChild>
<Button variant="outline" className="block w-full">
Cancel
</DrawerTrigger>
<DrawerContent>
<DrawerHeader>
<DrawerTitle>Delete Post</DrawerTitle>
<DrawerDescription>
This action cannot be undone.
</DrawerDescription>
</DrawerHeader>
<DrawerFooter>
<Button
variant={"destructive"}
onClick={() => {
deletePost({ id: postDish.postId });
router.push("/");
}}
>
Delete
</Button>
</DrawerClose>
</DrawerFooter>
</DrawerContent>
</Drawer>
<DrawerClose asChild>
<Button variant="outline" className="block w-full">
Cancel
</Button>
</DrawerClose>
</DrawerFooter>
</DrawerContent>
</Drawer>
) : (
<Button
size={"icon"}
variant="outline"
className="absolute bottom-2 left-20 h-8 w-8 rounded-full border"
onClick={() => router.push(`/post/post-dish/${postDish.id}`)}
>
<Pen className="h-3 w-3" strokeWidth={3} />
</Button>
)
) : (
<Button
size={"icon"}
variant="outline"
className="absolute bottom-2 left-20 h-8 w-8 rounded-full border"
onClick={() => router.push(`/post/post-dish/${postDish.id}`)}
>
<Pen className="h-3 w-3" strokeWidth={3} />
</Button>
)
) : (
<>
<Button
size={"icon"}
variant="outline"
className="absolute bottom-2 left-20 h-8 w-8 rounded-full border"
onClick={() => setReserve(!reserve)}
>
{originalQuantity || <Plus className="h-3 w-3" strokeWidth={3} />}
</Button>
<ReservationDialog
title="Reservation"
open={reserve}
onOpenChange={setReserve}
dishId={postDish.id}
dishQuantity={postDish.quantity - (originalQuantity || 0)}
/>
</>
)}
<h1 className="line-clamp-1 font-semibold md:line-clamp-2">
{postDish.name}
</h1>
)}
<h1 className="line-clamp-1 font-semibold md:line-clamp-2">
{postDish.name}
</h1>

<div className="flex items-center space-x-2 text-sm">
<span>
{postDish.price !== 0 ? `$${postDish.price}` : "free"}
<span> · Remaining: {postDish.quantity}</span>
</span>
</div>

<div className="flex items-center space-x-2 text-sm">
<span>
{postDish.price !== 0 ? `$${postDish.price}` : "free"}
<span> · Remaining: {postDish.quantity}</span>
<span className="my-1 line-clamp-2 text-sm text-muted-foreground md:line-clamp-2">
{postDish.description}
</span>
</div>
</ImageCardPrimitive>

<span className="my-1 line-clamp-2 text-sm text-muted-foreground md:line-clamp-2">
{postDish.description}
</span>
</ImageCardPrimitive>
<ReservationDialog
title="Reservation"
open={reserve}
onOpenChange={setReserve}
dishId={postDish.id}
dishQuantity={postDish.quantity - (originalQuantity || 0)}
/>
</>
);
}
92 changes: 46 additions & 46 deletions src/components/image-card/store-dish.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,61 +28,61 @@ export default function StoreDish({
const router = useRouter();

return (
<ImageCardPrimitive
image={storeDish.image}
counter={
isCounter
? {
amount: storeDish.quantity,
setAmount: async (number: number) => {
await updateStoreDish({ ...storeDish, quantity: number });
},
}
: undefined
}
className="relative"
>
{isAuthor ? (
<Button
size={"icon"}
variant="outline"
className="absolute bottom-2 left-20 h-8 w-8 rounded-full border"
onClick={() => router.push(`/store/store-dish/${storeDish.id}`)}
>
<Pen className="h-3 w-3" strokeWidth={3} />
</Button>
) : (
<>
<>
<ImageCardPrimitive
image={storeDish.image}
counter={
isCounter
? {
amount: storeDish.quantity,
setAmount: async (number: number) => {
await updateStoreDish({ ...storeDish, quantity: number });
},
}
: undefined
}
className="relative"
setOpen={!isAuthor ? setCart : undefined}
>
{isAuthor ? (
<Button
size={"icon"}
variant="outline"
className="absolute bottom-2 left-20 h-8 w-8 rounded-full border"
onClick={() => router.push(`/store/store-dish/${storeDish.id}`)}
>
<Pen className="h-3 w-3" strokeWidth={3} />
</Button>
) : (
<Button
size={"icon"}
variant="outline"
className="absolute bottom-2 left-20 h-8 w-8 rounded-full border"
onClick={() => setCart(!cart)}
>
{originalQuantity || <Plus className="h-3 w-3" strokeWidth={3} />}
</Button>
<ReservationDialog
title="Add to Cart"
open={cart}
onOpenChange={setCart}
dishId={storeDish.id}
dishQuantity={storeDish.quantity}
defaultQuantity={originalQuantity || 0}
/>
</>
)}
)}

<h1 className="line-clamp-1 font-semibold md:line-clamp-2">
{storeDish.name}
</h1>
<h1 className="line-clamp-1 font-semibold md:line-clamp-2">
{storeDish.name}
</h1>

<div className="flex items-center space-x-2 text-sm">
${storeDish.price} · Remaining: {storeDish.quantity}
</div>
<div className="flex items-center space-x-2 text-sm">
${storeDish.price} · Remaining: {storeDish.quantity}
</div>

<span className="my-1 line-clamp-2 text-sm text-muted-foreground md:line-clamp-2">
{storeDish.description}
</span>
</ImageCardPrimitive>
<span className="my-1 line-clamp-2 text-sm text-muted-foreground md:line-clamp-2">
{storeDish.description}
</span>
</ImageCardPrimitive>
<ReservationDialog
title="Add to Cart"
open={cart}
onOpenChange={setCart}
dishId={storeDish.id}
dishQuantity={storeDish.quantity}
defaultQuantity={originalQuantity || 0}
/>
</>
);
}

0 comments on commit 4510c64

Please sign in to comment.