use useoptimistic for incrementing cart values

Remove stray revalidate
Update dependencies. (#1314 )
2024-04-03 13:34:31 -05:00 · 2024-03-31 08:50:39 -05:00 · 2024-03-26 16:15:01 -05:00
16 changed files with 1184 additions and 848 deletions
--- a/app/[page]/page.tsx
+++ b/app/[page]/page.tsx
@@ -6,8 +6,6 @@ import { notFound } from 'next/navigation';

 export const runtime = 'edge';

-export const revalidate = 43200; // 12 hours in seconds
-
 export async function generateMetadata({
  params
 }: {
--- a/app/error.tsx
+++ b/app/error.tsx
@@ -2,7 +2,7 @@

 export default function Error({ reset }: { reset: () => void }) {
  return (
-    <div className="mx-auto my-4 flex max-w-xl flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12">
+    <div className="mx-auto my-4 flex max-w-xl flex-col rounded-lg border border-neutral-200 bg-white p-8 md:p-12 dark:border-neutral-800 dark:bg-black">
      <h2 className="text-xl font-bold">Oh no!</h2>
      <p className="my-2">
        There was an issue with our storefront. This could be a temporary issue, please try your
--- a/app/product/[handle]/page.tsx
+++ b/app/product/[handle]/page.tsx
@@ -82,14 +82,20 @@ export default async function ProductPage({ params }: { params: { handle: string
        }}
      />
      <div className="mx-auto max-w-screen-2xl px-4">
-        <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12 lg:flex-row lg:gap-8">
+        <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 md:p-12 lg:flex-row lg:gap-8 dark:border-neutral-800 dark:bg-black">
          <div className="h-full w-full basis-full lg:basis-4/6">
-            <Gallery
-              images={product.images.map((image: Image) => ({
-                src: image.url,
-                altText: image.altText
-              }))}
-            />
+            <Suspense
+              fallback={
+                <div className="relative aspect-square h-full max-h-[550px] w-full overflow-hidden" />
+              }
+            >
+              <Gallery
+                images={product.images.map((image: Image) => ({
+                  src: image.url,
+                  altText: image.altText
+                }))}
+              />
+            </Suspense>
          </div>

          <div className="basis-full lg:basis-2/6">
--- a/app/search/layout.tsx
+++ b/app/search/layout.tsx
@@ -7,7 +7,7 @@ import { Suspense } from 'react';
 export default function SearchLayout({ children }: { children: React.ReactNode }) {
  return (
    <Suspense>
-      <div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 text-black dark:text-white md:flex-row">
+      <div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 text-black md:flex-row dark:text-white">
        <div className="order-first w-full flex-none md:max-w-[125px]">
          <Collections />
        </div>
--- a/components/cart/edit-item-quantity-button.tsx
+++ b/components/cart/edit-item-quantity-button.tsx
@@ -5,6 +5,7 @@ import clsx from 'clsx';
 import { updateItemQuantity } from 'components/cart/actions';
 import LoadingDots from 'components/loading-dots';
 import type { CartItem } from 'lib/shopify/types';
+import { useOptimistic, useState } from 'react';
 import { useFormState, useFormStatus } from 'react-dom';

 function SubmitButton({ type }: { type: 'plus' | 'minus' }) {
@@ -29,29 +30,67 @@ function SubmitButton({ type }: { type: 'plus' | 'minus' }) {
      {pending ? (
        <LoadingDots className="bg-black dark:bg-white" />
      ) : type === 'plus' ? (
-        <PlusIcon className="h-4 w-4 dark:text-neutral-500" />
+        <PlusIcon className="w-4 h-4 dark:text-neutral-500" />
      ) : (
-        <MinusIcon className="h-4 w-4 dark:text-neutral-500" />
+        <MinusIcon className="w-4 h-4 dark:text-neutral-500" />
      )}
    </button>
  );
 }
-
-export function EditItemQuantityButton({ item, type }: { item: CartItem; type: 'plus' | 'minus' }) {
+export function EditItemQuantityButton({ item, type, onQuantityChange }: { item: CartItem; type: 'plus' | 'minus'; onQuantityChange: (quantity: number) => void }) {
  const [message, formAction] = useFormState(updateItemQuantity, null);
-  const payload = {
-    lineId: item.id,
-    variantId: item.merchandise.id,
-    quantity: type === 'plus' ? item.quantity + 1 : item.quantity - 1
-  };
-  const actionWithVariant = formAction.bind(null, payload);
+  
+  const [optimisticQuantity, setOptimisticQuantity] = useOptimistic(item.quantity, (state: number, change: number) => state + change);
+
+  // const handleSubmit = async (event: React.FormEvent) => {
+  //   event.preventDefault();
+  //   const change = type === 'plus' ? 1 : -1;
+  //   setOptimisticQuantity(change);
+  //   onQuantityChange(optimisticQuantity + change);
+    
+    // const updatedPayload = {
+    //   lineId: item.id,
+    //   variantId: item.merchandise.id,
+    //   quantity: optimisticQuantity + change
+    // };
+  //   await formAction(updatedPayload);
+  // };
+

  return (
-    <form action={actionWithVariant}>
-      <SubmitButton type={type} />
+    <form action={async () => {
+      const change = type === 'plus' ? 1 : -1;
+      setOptimisticQuantity(change);
+      onQuantityChange(optimisticQuantity + change);
+      const updatedPayload = {
+        lineId: item.id,
+        variantId: item.merchandise.id,
+        quantity: optimisticQuantity + change
+      };
+      const actionWithVariant = formAction.bind(null, updatedPayload);
+      await actionWithVariant();
+    
+    }}>
+      <SubmitButton type={type} pending={!!message} />
      <p aria-live="polite" className="sr-only" role="status">
        {message}
      </p>
    </form>
  );
 }
+
+export function EditItemQuantity({ item }: { item: CartItem }) {
+  const [quantity, setQuantity] = useState(item.quantity);
+
+  const handleQuantityChange = (newQuantity: number) => setQuantity(newQuantity);
+
+  return (
+    <div className="flex flex-row items-center ml-auto border rounded-full h-9 border-neutral-200 dark:border-neutral-700">
+      <EditItemQuantityButton item={{ ...item, quantity }} type="minus" onQuantityChange={handleQuantityChange} />
+      <p className="w-6 text-center">
+        <span className="w-full text-sm">{quantity}</span>
+      </p>
+      <EditItemQuantityButton item={{ ...item, quantity }} type="plus" onQuantityChange={handleQuantityChange} />
+    </div>
+  );
+}
--- a/components/cart/modal.tsx
+++ b/components/cart/modal.tsx
@@ -11,7 +11,7 @@ import Link from 'next/link';
 import { Fragment, useEffect, useRef, useState } from 'react';
 import CloseCart from './close-cart';
 import { DeleteItemButton } from './delete-item-button';
-import { EditItemQuantityButton } from './edit-item-quantity-button';
+import { EditItemQuantity } from './edit-item-quantity-button';
 import OpenCart from './open-cart';

 type MerchandiseSearchParams = {
@@ -64,7 +64,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
            leaveFrom="translate-x-0"
            leaveTo="translate-x-full"
          >
-            <Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white/80 p-6 text-black backdrop-blur-xl dark:border-neutral-700 dark:bg-black/80 dark:text-white md:w-[390px]">
+            <Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white/80 p-6 text-black backdrop-blur-xl md:w-[390px] dark:border-neutral-700 dark:bg-black/80 dark:text-white">
              <div className="flex items-center justify-between">
                <p className="text-lg font-semibold">My Cart</p>

@@ -74,13 +74,13 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
              </div>

              {!cart || cart.lines.length === 0 ? (
-                <div className="mt-20 flex w-full flex-col items-center justify-center overflow-hidden">
+                <div className="flex flex-col items-center justify-center w-full mt-20 overflow-hidden">
                  <ShoppingCartIcon className="h-16" />
-                  <p className="mt-6 text-center text-2xl font-bold">Your cart is empty.</p>
+                  <p className="mt-6 text-2xl font-bold text-center">Your cart is empty.</p>
                </div>
              ) : (
-                <div className="flex h-full flex-col justify-between overflow-hidden p-1">
-                  <ul className="flex-grow overflow-auto py-4">
+                <div className="flex flex-col justify-between h-full p-1 overflow-hidden">
+                  <ul className="flex-grow py-4 overflow-auto">
                    {cart.lines.map((item, i) => {
                      const merchandiseSearchParams = {} as MerchandiseSearchParams;

@@ -98,9 +98,9 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                      return (
                        <li
                          key={i}
-                          className="flex w-full flex-col border-b border-neutral-300 dark:border-neutral-700"
+                          className="flex flex-col w-full border-b border-neutral-300 dark:border-neutral-700"
                        >
-                          <div className="relative flex w-full flex-row justify-between px-1 py-4">
+                          <div className="relative flex flex-row justify-between w-full px-1 py-4">
                            <div className="absolute z-40 -mt-2 ml-[55px]">
                              <DeleteItemButton item={item} />
                            </div>
@@ -109,9 +109,9 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                              onClick={closeCart}
                              className="z-30 flex flex-row space-x-4"
                            >
-                              <div className="relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-neutral-300 bg-neutral-300 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800">
+                              <div className="relative w-16 h-16 overflow-hidden border rounded-md cursor-pointer border-neutral-300 bg-neutral-300 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800">
                                <Image
-                                  className="h-full w-full object-cover"
+                                  className="object-cover w-full h-full"
                                  width={64}
                                  height={64}
                                  alt={
@@ -122,7 +122,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                                />
                              </div>

-                              <div className="flex flex-1 flex-col text-base">
+                              <div className="flex flex-col flex-1 text-base">
                                <span className="leading-tight">
                                  {item.merchandise.product.title}
                                </span>
@@ -133,19 +133,13 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                                ) : null}
                              </div>
                            </Link>
-                            <div className="flex h-16 flex-col justify-between">
+                            <div className="flex flex-col justify-between h-16">
                              <Price
-                                className="flex justify-end space-y-2 text-right text-sm"
+                                className="flex justify-end space-y-2 text-sm text-right"
                                amount={item.cost.totalAmount.amount}
                                currencyCode={item.cost.totalAmount.currencyCode}
                              />
-                              <div className="ml-auto flex h-9 flex-row items-center rounded-full border border-neutral-200 dark:border-neutral-700">
-                                <EditItemQuantityButton item={item} type="minus" />
-                                <p className="w-6 text-center">
-                                  <span className="w-full text-sm">{item.quantity}</span>
-                                </p>
-                                <EditItemQuantityButton item={item} type="plus" />
-                              </div>
+                              <EditItemQuantity item={item} />
                            </div>
                          </div>
                        </li>
@@ -153,22 +147,22 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                    })}
                  </ul>
                  <div className="py-4 text-sm text-neutral-500 dark:text-neutral-400">
-                    <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 dark:border-neutral-700">
+                    <div className="flex items-center justify-between pb-1 mb-3 border-b border-neutral-200 dark:border-neutral-700">
                      <p>Taxes</p>
                      <Price
-                        className="text-right text-base text-black dark:text-white"
+                        className="text-base text-right text-black dark:text-white"
                        amount={cart.cost.totalTaxAmount.amount}
                        currencyCode={cart.cost.totalTaxAmount.currencyCode}
                      />
                    </div>
-                    <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1 dark:border-neutral-700">
+                    <div className="flex items-center justify-between pt-1 pb-1 mb-3 border-b border-neutral-200 dark:border-neutral-700">
                      <p>Shipping</p>
                      <p className="text-right">Calculated at checkout</p>
                    </div>
-                    <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1 dark:border-neutral-700">
+                    <div className="flex items-center justify-between pt-1 pb-1 mb-3 border-b border-neutral-200 dark:border-neutral-700">
                      <p>Total</p>
                      <Price
-                        className="text-right text-base text-black dark:text-white"
+                        className="text-base text-right text-black dark:text-white"
                        amount={cart.cost.totalAmount.amount}
                        currencyCode={cart.cost.totalAmount.currencyCode}
                      />
@@ -176,7 +170,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                  </div>
                  <a
                    href={cart.checkoutUrl}
-                    className="block w-full rounded-full bg-blue-600 p-3 text-center text-sm font-medium text-white opacity-90 hover:opacity-100"
+                    className="block w-full p-3 text-sm font-medium text-center text-white bg-blue-600 rounded-full opacity-90 hover:opacity-100"
                  >
                    Proceed to Checkout
                  </a>
--- a/components/layout/footer-menu.tsx
+++ b/components/layout/footer-menu.tsx
@@ -19,7 +19,7 @@ const FooterMenuItem = ({ item }: { item: Menu }) => {
      <Link
        href={item.path}
        className={clsx(
-          'block p-2 text-lg underline-offset-4 hover:text-black hover:underline dark:hover:text-neutral-300 md:inline-block md:text-sm',
+          'block p-2 text-lg underline-offset-4 hover:text-black hover:underline md:inline-block md:text-sm dark:hover:text-neutral-300',
          {
            'text-black dark:text-neutral-300': active
          }
--- a/components/layout/footer.tsx
+++ b/components/layout/footer.tsx
@@ -16,9 +16,9 @@ export default async function Footer() {

  return (
    <footer className="text-sm text-neutral-500 dark:text-neutral-400">
-      <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-neutral-200 px-6 py-12 text-sm dark:border-neutral-700 md:flex-row md:gap-12 md:px-4 min-[1320px]:px-0">
+      <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-neutral-200 px-6 py-12 text-sm md:flex-row md:gap-12 md:px-4 min-[1320px]:px-0 dark:border-neutral-700">
        <div>
-          <Link className="flex items-center gap-2 text-black dark:text-white md:pt-1" href="/">
+          <Link className="flex items-center gap-2 text-black md:pt-1 dark:text-white" href="/">
            <LogoSquare size="sm" />
            <span className="uppercase">{SITE_NAME}</span>
          </Link>
--- a/components/layout/navbar/index.tsx
+++ b/components/layout/navbar/index.tsx
@@ -6,7 +6,7 @@ import { Menu } from 'lib/shopify/types';
 import Link from 'next/link';
 import { Suspense } from 'react';
 import MobileMenu from './mobile-menu';
-import Search from './search';
+import Search, { SearchSkeleton } from './search';
 const { SITE_NAME } = process.env;

 export default async function Navbar() {
@@ -15,7 +15,9 @@ export default async function Navbar() {
  return (
    <nav className="relative flex items-center justify-between p-4 lg:px-6">
      <div className="block flex-none md:hidden">
-        <MobileMenu menu={menu} />
+        <Suspense fallback={null}>
+          <MobileMenu menu={menu} />
+        </Suspense>
      </div>
      <div className="flex w-full items-center">
        <div className="flex w-full md:w-1/3">
@@ -41,7 +43,9 @@ export default async function Navbar() {
          ) : null}
        </div>
        <div className="hidden justify-center md:flex md:w-1/3">
-          <Search />
+          <Suspense fallback={<SearchSkeleton />}>
+            <Search />
+          </Suspense>
        </div>
        <div className="flex justify-end md:w-1/3">
          <Suspense fallback={<OpenCart />}>
--- a/components/layout/navbar/mobile-menu.tsx
+++ b/components/layout/navbar/mobile-menu.tsx
@@ -3,11 +3,11 @@
 import { Dialog, Transition } from '@headlessui/react';
 import Link from 'next/link';
 import { usePathname, useSearchParams } from 'next/navigation';
-import { Fragment, useEffect, useState } from 'react';
+import { Fragment, Suspense, useEffect, useState } from 'react';

 import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
 import { Menu } from 'lib/shopify/types';
-import Search from './search';
+import Search, { SearchSkeleton } from './search';

 export default function MobileMenu({ menu }: { menu: Menu[] }) {
  const pathname = usePathname();
@@ -35,7 +35,7 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
      <button
        onClick={openMobileMenu}
        aria-label="Open mobile menu"
-        className="flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white md:hidden"
+        className="flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors md:hidden dark:border-neutral-700 dark:text-white"
      >
        <Bars3Icon className="h-4" />
      </button>
@@ -72,7 +72,9 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
                </button>

                <div className="mb-4 w-full">
-                  <Search />
+                  <Suspense fallback={<SearchSkeleton />}>
+                    <Search />
+                  </Suspense>
                </div>
                {menu.length ? (
                  <ul className="flex w-full flex-col">
--- a/components/layout/navbar/search.tsx
+++ b/components/layout/navbar/search.tsx
@@ -41,3 +41,17 @@ export default function Search() {
    </form>
  );
 }
+
+export function SearchSkeleton() {
+  return (
+    <form className="w-max-[550px] relative w-full lg:w-80 xl:w-full">
+      <input
+        placeholder="Search for products..."
+        className="w-full rounded-lg border bg-white px-4 py-2 text-sm text-black placeholder:text-neutral-500 dark:border-neutral-800 dark:bg-transparent dark:text-white dark:placeholder:text-neutral-400"
+      />
+      <div className="absolute right-0 top-0 mr-3 flex h-full items-center">
+        <MagnifyingGlassIcon className="h-4" />
+      </div>
+    </form>
+  );
+}
--- a/components/layout/search/filter/index.tsx
+++ b/components/layout/search/filter/index.tsx
@@ -1,4 +1,5 @@
 import { SortFilterItem } from 'lib/constants';
+import { Suspense } from 'react';
 import FilterItemDropdown from './dropdown';
 import { FilterItem } from './item';

@@ -20,15 +21,19 @@ export default function FilterList({ list, title }: { list: ListItem[]; title?:
    <>
      <nav>
        {title ? (
-          <h3 className="hidden text-xs text-neutral-500 dark:text-neutral-400 md:block">
+          <h3 className="hidden text-xs text-neutral-500 md:block dark:text-neutral-400">
            {title}
          </h3>
        ) : null}
        <ul className="hidden md:block">
-          <FilterItemList list={list} />
+          <Suspense fallback={null}>
+            <FilterItemList list={list} />
+          </Suspense>{' '}
        </ul>
        <ul className="md:hidden">
-          <FilterItemDropdown list={list} />
+          <Suspense fallback={null}>
+            <FilterItemDropdown list={list} />
+          </Suspense>{' '}
        </ul>
      </nav>
    </>
--- a/components/layout/search/filter/item.tsx
+++ b/components/layout/search/filter/item.tsx
@@ -1,7 +1,7 @@
 'use client';

 import clsx from 'clsx';
-import { SortFilterItem } from 'lib/constants';
+import type { SortFilterItem } from 'lib/constants';
 import { createUrl } from 'lib/utils';
 import Link from 'next/link';
 import { usePathname, useSearchParams } from 'next/navigation';
--- a/components/product/product-description.tsx
+++ b/components/product/product-description.tsx
@@ -2,6 +2,7 @@ import { AddToCart } from 'components/cart/add-to-cart';
 import Price from 'components/price';
 import Prose from 'components/prose';
 import { Product } from 'lib/shopify/types';
+import { Suspense } from 'react';
 import { VariantSelector } from './variant-selector';

 export function ProductDescription({ product }: { product: Product }) {
@@ -16,7 +17,9 @@ export function ProductDescription({ product }: { product: Product }) {
          />
        </div>
      </div>
-      <VariantSelector options={product.options} variants={product.variants} />
+      <Suspense fallback={null}>
+        <VariantSelector options={product.options} variants={product.variants} />
+      </Suspense>

      {product.descriptionHtml ? (
        <Prose
@@ -25,7 +28,9 @@ export function ProductDescription({ product }: { product: Product }) {
        />
      ) : null}

-      <AddToCart variants={product.variants} availableForSale={product.availableForSale} />
+      <Suspense fallback={null}>
+        <AddToCart variants={product.variants} availableForSale={product.availableForSale} />
+      </Suspense>
    </>
  );
 }
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
    "pnpm": ">=7"
  },
  "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
@@ -22,31 +22,31 @@
    "*": "prettier --write --ignore-unknown"
  },
  "dependencies": {
-    "@headlessui/react": "^1.7.17",
-    "@heroicons/react": "^2.0.18",
-    "clsx": "^2.0.0",
-    "geist": "^1.0.0",
-    "next": "14.0.0",
+    "@headlessui/react": "^1.7.18",
+    "@heroicons/react": "^2.1.3",
+    "clsx": "^2.1.0",
+    "geist": "^1.3.0",
+    "next": "14.1.4",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/typography": "^0.5.10",
-    "@types/node": "20.8.9",
-    "@types/react": "18.2.33",
-    "@types/react-dom": "18.2.14",
+    "@tailwindcss/typography": "^0.5.11",
+    "@types/node": "20.11.30",
+    "@types/react": "18.2.72",
+    "@types/react-dom": "18.2.22",
    "@vercel/git-hooks": "^1.0.0",
-    "autoprefixer": "^10.4.16",
-    "eslint": "^8.52.0",
-    "eslint-config-next": "^14.0.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-unicorn": "^48.0.1",
-    "lint-staged": "^15.0.2",
-    "postcss": "^8.4.31",
-    "prettier": "3.0.3",
-    "prettier-plugin-tailwindcss": "^0.5.6",
-    "tailwindcss": "^3.3.5",
-    "typescript": "5.2.2"
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^14.1.4",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-unicorn": "^51.0.1",
+    "lint-staged": "^15.2.2",
+    "postcss": "^8.4.38",
+    "prettier": "3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.12",
+    "tailwindcss": "^3.4.1",
+    "typescript": "5.4.3"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
Author	SHA1	Message	Date
StephDietz	c12f18d39d	use useoptimistic for incrementing cart values	2024-04-03 13:34:31 -05:00
Lee Robinson	610b0e8692	Remove stray revalidate	2024-03-31 08:50:39 -05:00
Lee Robinson	25ddc5e643	Update dependencies. (#1314 )	2024-03-26 16:15:01 -05:00