Improve form submissions, update packages.

components/cart/actions.ts

@@ -1,9 +1,11 @@
 'use server';
 
+import { TAGS } from 'lib/constants';
 import { addToCart, createCart, getCart, removeFromCart, updateCart } from 'lib/shopify';
+import { revalidateTag } from 'next/cache';
 import { cookies } from 'next/headers';
 
-export const addItem = async (variantId: string | undefined): Promise<String | undefined> => {
+export async function addItem(prevState: any, selectedVariantId: string) {
   let cartId = cookies().get('cartId')?.value;
   let cart;
 
@@ -17,12 +19,13 @@ export const addItem = async (variantId: string | undefined): Promise<String | u
     cookies().set('cartId', cartId);
   }
 
-  if (!variantId) {
+  if (!selectedVariantId) {
     return 'Missing product variant ID';
   }
 
   try {
-    await addToCart(cartId, [{ merchandiseId: variantId, quantity: 1 }]);
+    await addToCart(cartId, [{ merchandiseId: selectedVariantId, quantity: 1 }]);
+    revalidateTag(TAGS.cart)
   } catch (e) {
     return 'Error adding item to cart';
   }

components/cart/add-to-cart.tsx

@@ -5,8 +5,54 @@ import clsx from 'clsx';
 import { addItem } from 'components/cart/actions';
 import LoadingDots from 'components/loading-dots';
 import { ProductVariant } from 'lib/shopify/types';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { useTransition } from 'react';
+import { useSearchParams } from 'next/navigation';
+// @ts-ignore
+import { experimental_useFormState as useFormState, experimental_useFormStatus as useFormStatus } from 'react-dom';
+
+function SubmitButton({ availableForSale, selectedVariantId }: {
+  availableForSale: boolean;
+  selectedVariantId: string | undefined;
+}) {
+  const { pending } = useFormStatus()
+  const buttonClasses = 'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white'
+
+  if (!availableForSale) {
+    return <button aria-disabled className={clsx(
+      buttonClasses,
+      'cursor-not-allowed opacity-60 hover:opacity-60'
+    )}>
+    Out Of Stock
+  </button>
+  }
+
+  if (!selectedVariantId) {
+    return <button aria-label="Please select an option" aria-disabled className={clsx(
+      buttonClasses,
+      'cursor-not-allowed opacity-60 hover:opacity-60'
+    )}>
+      <div className="absolute left-0 ml-4">
+      <PlusIcon className="h-5" />
+      </div>
+      Add To Cart
+  </button>
+  }
+
+  return (
+    <button type="submit" aria-disabled={pending} className={clsx(
+      buttonClasses,
+      {
+        'hover:opacity-90': true,
+        'cursor-not-allowed': pending
+      }
+    )}>
+      <div className="absolute left-0 ml-4">
+        {!pending ? <PlusIcon className="h-5" /> : <LoadingDots className="mb-3 bg-white" />}
+      </div>
+      Add To Cart
+    </button> 
+  )
+  
+}
 
 export function AddToCart({
   variants,
@@ -15,9 +61,8 @@ export function AddToCart({
   variants: ProductVariant[];
   availableForSale: boolean;
 }) {
-  const router = useRouter();
+  const [message, formAction] = useFormState(addItem, null)
   const searchParams = useSearchParams();
-  const [isPending, startTransition] = useTransition();
   const defaultVariantId = variants.length === 1 ? variants[0]?.id : undefined;
   const variant = variants.find((variant: ProductVariant) =>
     variant.selectedOptions.every(
@@ -25,44 +70,15 @@ export function AddToCart({
     )
   );
   const selectedVariantId = variant?.id || defaultVariantId;
-  const title = !availableForSale
-    ? 'Out of stock'
-    : !selectedVariantId
-    ? 'Please select options'
-    : undefined;
+  const actionWithVariant = formAction.bind(null, selectedVariantId)
 
   return (
-    <button
-      aria-label="Add item to cart"
-      disabled={isPending || !availableForSale || !selectedVariantId}
-      title={title}
-      onClick={() => {
-        // Safeguard in case someone messes with `disabled` in devtools.
-        if (!availableForSale || !selectedVariantId) return;
-
-        startTransition(async () => {
-          const error = await addItem(selectedVariantId);
-
-          if (error) {
-            // Trigger the error boundary in the root error.js
-            throw new Error(error.toString());
-          }
-
-          router.refresh();
-        });
-      }}
-      className={clsx(
-        'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90',
-        {
-          'cursor-not-allowed opacity-60 hover:opacity-60': !availableForSale || !selectedVariantId,
-          'cursor-not-allowed': isPending
-        }
-      )}
+    <form action={actionWithVariant}
     >
-      <div className="absolute left-0 ml-4">
-        {!isPending ? <PlusIcon className="h-5" /> : <LoadingDots className="mb-3 bg-white" />}
-      </div>
-      <span>{availableForSale ? 'Add To Cart' : 'Out Of Stock'}</span>
-    </button>
-  );
+      <SubmitButton availableForSale={availableForSale} selectedVariantId={selectedVariantId} />
+      <p aria-live="polite" className="sr-only" role="status">
+        {message}
+      </p>
+    </form>
+  )
 }

components/layout/footer.tsx

@@ -58,9 +58,8 @@ export default async function Footer() {
           <hr className="mx-4 hidden h-4 w-[1px] border-l border-neutral-400 md:inline-block" />
           <p>Designed in California</p>
           <p className="md:ml-auto">
-            Crafted by{' '}
             <a href="https://vercel.com" className="text-black dark:text-white">
-              ▲ Vercel
+            Crafted by ▲ Vercel
             </a>
           </p>
         </div>

components/layout/search/filter/index.tsx

@@ -19,7 +19,7 @@ export default function FilterList({ list, title }: { list: ListItem[]; title?:
   return (
     <>
       <nav>
-        {title ? <h3 className="hidden text-xs text-neutral-500 md:block">{title}</h3> : null}
+        {title ? <h3 className="hidden text-xs text-neutral-500 dark:text-neutral-400 md:block">{title}</h3> : null}
         <ul className="hidden md:block">
           <FilterItemList list={list} />
         </ul>

lib/constants.ts

@@ -22,7 +22,8 @@ export const sorting: SortFilterItem[] = [
 
 export const TAGS = {
   collections: 'collections',
-  products: 'products'
+  products: 'products',
+  cart: 'cart',
 };
 
 export const HIDDEN_PRODUCT_TAG = 'nextjs-frontend-hidden';

lib/shopify/index.ts

@@ -258,6 +258,7 @@ export async function getCart(cartId: string): Promise<Cart | undefined> {
   const res = await shopifyFetch<ShopifyCartOperation>({
     query: getCartQuery,
     variables: { cartId },
+    tags: [TAGS.cart],
     cache: 'no-store'
   });
 

package.json

@@ -22,30 +22,30 @@
     "*": "prettier --write --ignore-unknown"
   },
   "dependencies": {
-    "@headlessui/react": "^1.7.15",
+    "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.0.18",
     "clsx": "^2.0.0",
-    "next": "13.4.13-canary.15",
+    "next": "13.5.3",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/typography": "^0.5.9",
-    "@types/node": "20.4.4",
-    "@types/react": "18.2.16",
-    "@types/react-dom": "18.2.7",
+    "@tailwindcss/typography": "^0.5.10",
+    "@types/node": "20.8.0",
+    "@types/react": "18.2.23",
+    "@types/react-dom": "18.2.8",
     "@vercel/git-hooks": "^1.0.0",
-    "autoprefixer": "^10.4.14",
-    "eslint": "^8.45.0",
-    "eslint-config-next": "^13.4.12",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-unicorn": "^48.0.0",
-    "lint-staged": "^13.2.3",
-    "postcss": "^8.4.27",
-    "prettier": "3.0.1",
-    "prettier-plugin-tailwindcss": "^0.4.1",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.50.0",
+    "eslint-config-next": "^13.5.3",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-unicorn": "^48.0.1",
+    "lint-staged": "^14.0.1",
+    "postcss": "^8.4.31",
+    "prettier": "3.0.3",
+    "prettier-plugin-tailwindcss": "^0.5.4",
     "tailwindcss": "^3.3.3",
-    "typescript": "5.1.6"
+    "typescript": "5.2.2"
   }
 }