-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(cart): work with GET and PUT (#66)
Co-authored-by: GUAN MING <[email protected]>
- Loading branch information
1 parent
894c802
commit ad37cee
Showing
12 changed files
with
166 additions
and
89 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| "use client"; | ||
|
|
||
| import useCart from "@/hooks/use-cart"; | ||
| import ImageCard from "./supplier/image-card"; | ||
|
|
||
| export default function CartItem({ | ||
| id, | ||
| name, | ||
| quantity, | ||
| price, | ||
| image, | ||
| }: { | ||
| id: number; | ||
| name: string; | ||
| quantity: number; | ||
| price: number; | ||
| image: string; | ||
| }) { | ||
| const { updateCart } = useCart() | ||
| const handleUpdateCart = async (number: number) => { | ||
| await updateCart(id, number) | ||
| } | ||
|
|
||
| return ( | ||
| <ImageCard | ||
| href={`#`} | ||
| counter={({ | ||
| amount: quantity, | ||
| setAmount: handleUpdateCart | ||
| })} | ||
| image={image || ""} | ||
| > | ||
| <div className="flex justify-between"> | ||
| <h1 className="font-semibold">{name}</h1> | ||
| </div> | ||
|
|
||
| <div className="mt-1 w-full max-w-24 overflow-hidden text-ellipsis text-wrap text-xs text-muted-foreground"> | ||
| $ {price} | ||
| </div> | ||
| </ImageCard> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,76 +1,70 @@ | ||
| "use client"; | ||
|
|
||
| import { useState } from "react"; | ||
|
|
||
| import Image from "next/image"; | ||
| import Link from "next/link"; | ||
| import { useRouter } from "next/navigation"; | ||
|
|
||
| import { Card } from "../ui/card"; | ||
| import { PlusCircle, MinusCircle } from "lucide-react"; | ||
|
|
||
| import { cn } from "@/lib/utils"; | ||
|
|
||
| export default function ImageCard({ | ||
| children, | ||
| href, | ||
| isCounter, | ||
| initAmount, | ||
| counter, | ||
| image, | ||
| }: { | ||
| children: React.ReactNode; | ||
| href?: string; | ||
| isCounter?: boolean; | ||
| initAmount?: number; | ||
| image?: string; | ||
| counter?: { | ||
| amount: number; | ||
| setAmount: (number: number) => Promise<void>; | ||
| }; | ||
| image: string; | ||
| }) { | ||
| const [amount, setAmount] = useState(initAmount || 0); | ||
|
|
||
| const updateAmount = (type: string) => { | ||
| if (type == "minus") { | ||
| if (amount > 0) { | ||
| setAmount(amount - 1); | ||
| } | ||
| } else [setAmount(amount + 1)]; | ||
| const router = useRouter(); | ||
| const handleRouting = () => { | ||
| if (href) { | ||
| router.push(href); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <Link href={href || "/"}> | ||
| <Card className="z-0 flex max-h-32 w-full cursor-pointer overflow-hidden text-ellipsis text-center"> | ||
| <Image | ||
| src={image || "/1.jpeg"} | ||
| alt="image" | ||
| className="aspect-[1/1] object-cover" | ||
| width={100} | ||
| height={100} | ||
| /> | ||
| <Card | ||
| onClick={() => handleRouting()} | ||
| className="z-0 flex max-h-32 w-full cursor-pointer overflow-hidden text-ellipsis text-center" | ||
| > | ||
| <Image | ||
| src={image} | ||
| alt="image" | ||
| className="aspect-[1/1] object-cover" | ||
| width={100} | ||
| height={100} | ||
| /> | ||
|
|
||
| <div className="flex w-full justify-between"> | ||
| <div className="flex flex-col px-4 py-3 text-left">{children}</div> | ||
| <div className="flex w-full justify-between"> | ||
| <div className="flex flex-col px-4 py-3 text-left">{children}</div> | ||
|
|
||
| <div | ||
| className={cn( | ||
| "mr-4 flex items-center justify-between space-x-2", | ||
| !isCounter && "hidden", | ||
| )} | ||
| > | ||
| {counter && ( | ||
| <div className="mr-4 flex items-center justify-between space-x-2"> | ||
| <MinusCircle | ||
| className="h-5 w-5 cursor-pointer" | ||
| onClick={(e) => { | ||
| e.stopPropagation(); | ||
| updateAmount("minus"); | ||
| counter.setAmount( | ||
| counter.amount - 1 < 0 ? 0 : counter.amount - 1, | ||
| ); | ||
| }} | ||
| /> | ||
| <p className="min-w-4">{amount}</p> | ||
| <p className="min-w-4">{counter.amount}</p> | ||
| <PlusCircle | ||
| className="h-5 w-5 cursor-pointer" | ||
| onClick={(e) => { | ||
| e.stopPropagation(); | ||
| updateAmount("add"); | ||
| counter.setAmount(counter.amount + 1); | ||
| }} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </Card> | ||
| </Link> | ||
| )} | ||
| </div> | ||
| </Card> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import { useState } from "react"; | ||
|
|
||
| import { useRouter } from "next/navigation"; | ||
|
|
||
| import handleFetch from "./utils"; | ||
|
|
||
| export default function useCart() { | ||
| const [loading, setLoading] = useState(false); | ||
| const router = useRouter(); | ||
|
|
||
| const updateCart = async (id: number, quantity: number) => { | ||
| setLoading(true); | ||
|
|
||
| try { | ||
| await handleFetch({ | ||
| data: { id, quantity }, | ||
| method: "PUT", | ||
| url: `/api/cart`, | ||
| }); | ||
|
|
||
| setLoading(false); | ||
| router.refresh(); | ||
| } catch (error) { | ||
| console.error("Error updating cart item quantity:", error); | ||
| } | ||
|
|
||
| setLoading(false); | ||
| }; | ||
|
|
||
| return { | ||
| updateCart, | ||
| loading, | ||
| }; | ||
| } |
Oops, something went wrong.