refactor: make changes in existing files in place instead separate and move to the components in src/ui directory

Author: grzegorzpokorski

src/app/[channel]/(main)/cart/DeleteLineButton.tsx

@@ -0,0 +1,17 @@
+import { SubmitButton } from "./SubmitButton";
+import { deleteLineFromCheckout } from "./actions";
+
+type Props = {
+	lineId: string;
+	checkoutId: string;
+};
+
+export const DeleteLineForm = ({ lineId, checkoutId }: Props) => {
+	return (
+		<form action={deleteLineFromCheckout}>
+			<input type="hidden" name="checkoutId" value={checkoutId} />
+			<input type="hidden" name="lineId" value={lineId} />
+			<SubmitButton />
+		</form>
+	);
+};

src/app/[channel]/(main)/cart/DeleteLineForm.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { useFormStatus } from "react-dom";
+
+export const SubmitButton = () => {
+	const { pending } = useFormStatus();
+
+	return (
+		<button type="submit" className="text-sm text-neutral-500 hover:text-neutral-900" aria-disabled={pending}>
+			{pending ? "Removing" : "Remove"}
+			<span className="sr-only">line from cart</span>
+		</button>
+	);
+};

src/app/[channel]/(main)/cart/SubmitButton.tsx

@@ -4,19 +4,25 @@ import { revalidatePath } from "next/cache";
 import { executeGraphQL } from "@/lib/graphql";
 import { CheckoutDeleteLinesDocument } from "@/gql/graphql";
 
-type deleteLineFromCheckoutArgs = {
-	lineId: string;
-	checkoutId: string;
-};
+export const deleteLineFromCheckout = async (formData: FormData) => {
+	const lineId = formData.get("lineId")?.toString();
+	const checkoutId = formData.get("checkoutId")?.toString();
+
+	try {
+		if (!checkoutId || !lineId) {
+			throw Error("Missing `lineId and/or `checkoutId`.");
+		}
 
-export const deleteLineFromCheckout = async ({ lineId, checkoutId }: deleteLineFromCheckoutArgs) => {
-	await executeGraphQL(CheckoutDeleteLinesDocument, {
-		variables: {
-			checkoutId,
-			lineIds: [lineId],
-		},
-		cache: "no-cache",
-	});
+		await executeGraphQL(CheckoutDeleteLinesDocument, {
+			variables: {
+				checkoutId,
+				lineIds: [lineId],
+			},
+			cache: "no-cache",
+		});
+	} catch (e) {
+		// TODO: handle erorrs
+	}
 
 	revalidatePath("/cart");
 };

src/app/[channel]/(main)/cart/actions.ts

@@ -1,6 +1,6 @@
 import Image from "next/image";
 import { CheckoutLink } from "./CheckoutLink";
-import { DeleteLineButton } from "./DeleteLineButton";
+import { DeleteLineForm } from "./DeleteLineForm";
 import * as Checkout from "@/lib/checkout";
 import { formatMoney, getHrefForVariant } from "@/lib/utils";
 import { LinkWithChannel } from "@/ui/atoms/LinkWithChannel";
@@ -34,7 +34,7 @@ export default async function Page({ params }: { params: { channel: string } })
 	return (
 		<section className="mx-auto max-w-7xl p-8">
 			<h1 className="mt-8 text-3xl font-bold text-neutral-900">Your Shopping Cart</h1>
-			<form className="mt-12">
+			<div className="mt-12">
 				<ul
 					data-testid="CartProductList"
 					role="list"
@@ -75,7 +75,7 @@ export default async function Page({ params }: { params: { channel: string } })
 								</div>
 								<div className="flex justify-between">
 									<div className="text-sm font-bold">Qty: {item.quantity}</div>
-									<DeleteLineButton checkoutId={checkoutId} lineId={item.id} />
+									<DeleteLineForm checkoutId={checkoutId} lineId={item.id} />
 								</div>
 							</div>
 						</li>
@@ -102,7 +102,7 @@ export default async function Page({ params }: { params: { channel: string } })
 						/>
 					</div>
 				</div>
-			</form>
+			</div>
 		</section>
 	);
 }