Fix hydration error (#1117)

---------

Co-authored-by: Michael Novotny <manovotny@gmail.com>

components/cart/add-to-cart.tsx

@@ -15,7 +15,7 @@ export function AddToCart({
   variants: ProductVariant[];
   availableForSale: boolean;
 }) {
-  const [selectedVariantId, setSelectedVariantId] = useState(variants[0]?.id);
+  const [selectedVariantId, setSelectedVariantId] = useState<string | undefined>(undefined);
   const router = useRouter();
   const searchParams = useSearchParams();
   const [isPending, startTransition] = useTransition();
@@ -27,17 +27,24 @@ export function AddToCart({
       )
     );
 
-    if (variant) {
+    setSelectedVariantId(variant?.id);
-      setSelectedVariantId(variant.id);
-    }
   }, [searchParams, variants, setSelectedVariantId]);
 
+  const title = !availableForSale
+    ? 'Out of stock'
+    : !selectedVariantId
+    ? 'Please select options'
+    : undefined;
+
   return (
     <button
       aria-label="Add item to cart"
-      disabled={isPending}
+      disabled={isPending || !availableForSale || !selectedVariantId}
+      title={title}
       onClick={() => {
-        if (!availableForSale) return;
+        // Safeguard in case someone messes with `disabled` in devtools.
+        if (!availableForSale || !selectedVariantId) return;
+
         startTransition(async () => {
           const error = await addItem(selectedVariantId);
 
@@ -52,7 +59,7 @@ export function AddToCart({
       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': !availableForSale,
+          'cursor-not-allowed opacity-60 hover:opacity-60': !availableForSale || !selectedVariantId,
           'cursor-not-allowed': isPending
         }
       )}

components/product/variant-selector.tsx

@@ -4,17 +4,12 @@ import clsx from 'clsx';
 import { ProductOption, ProductVariant } from 'lib/shopify/types';
 import { createUrl } from 'lib/utils';
 import Link from 'next/link';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { usePathname, useSearchParams } from 'next/navigation';
 
-type ParamsMap = {
+type Combination = {
-  [key: string]: string; // ie. { color: 'Red', size: 'Large', ... }
-};
-
-type OptimizedVariant = {
   id: string;
   availableForSale: boolean;
-  params: URLSearchParams;
+  [key: string]: string | boolean; // ie. { color: 'Red', size: 'Large', ... }
-  [key: string]: string | boolean | URLSearchParams; // ie. { color: 'Red', size: 'Large', ... }
 };
 
 export function VariantSelector({
@@ -25,8 +20,7 @@ export function VariantSelector({
   variants: ProductVariant[];
 }) {
   const pathname = usePathname();
-  const currentParams = useSearchParams();
+  const searchParams = useSearchParams();
-  const router = useRouter();
   const hasNoOptionsOrJustOneOption =
     !options.length || (options.length === 1 && options[0]?.values.length === 1);
 
@@ -34,78 +28,55 @@ export function VariantSelector({
     return null;
   }
 
-  // Discard any unexpected options or values from url and create params map.
+  const combinations: Combination[] = variants.map((variant) => ({
-  const paramsMap: ParamsMap = Object.fromEntries(
+    id: variant.id,
-    Array.from(currentParams.entries()).filter(([key, value]) =>
+    availableForSale: variant.availableForSale,
-      options.find((option) => option.name.toLowerCase() === key && option.values.includes(value))
+    // Adds key / value pairs for each variant (ie. "color": "Black" and "size": 'M").
+    ...variant.selectedOptions.reduce(
+      (accumulator, option) => ({ ...accumulator, [option.name.toLowerCase()]: option.value }),
+      {}
     )
-  );
+  }));
-
-  // Optimize variants for easier lookups.
-  const optimizedVariants: OptimizedVariant[] = variants.map((variant) => {
-    const optimized: OptimizedVariant = {
-      id: variant.id,
-      availableForSale: variant.availableForSale,
-      params: new URLSearchParams()
-    };
-
-    variant.selectedOptions.forEach((selectedOption) => {
-      const name = selectedOption.name.toLowerCase();
-      const value = selectedOption.value;
-
-      optimized[name] = value;
-      optimized.params.set(name, value);
-    });
-
-    return optimized;
-  });
-
-  // Find the first variant that is:
-  //
-  // 1. Available for sale
-  // 2. Matches all options specified in the url (note that this
-  //    could be a partial match if some options are missing from the url).
-  //
-  // If no match (full or partial) is found, use the first variant that is
-  // available for sale.
-  const selectedVariant: OptimizedVariant | undefined =
-    optimizedVariants.find(
-      (variant) =>
-        variant.availableForSale &&
-        Object.entries(paramsMap).every(([key, value]) => variant[key] === value)
-    ) || optimizedVariants.find((variant) => variant.availableForSale);
-
-  const selectedVariantParams = new URLSearchParams(selectedVariant?.params);
-  const currentUrl = createUrl(pathname, currentParams);
-  const selectedVariantUrl = createUrl(pathname, selectedVariantParams);
-
-  if (currentUrl !== selectedVariantUrl) {
-    router.replace(selectedVariantUrl);
-  }
 
   return options.map((option) => (
     <dl className="mb-8" key={option.id}>
       <dt className="mb-4 text-sm uppercase tracking-wide">{option.name}</dt>
       <dd className="flex flex-wrap gap-3">
         {option.values.map((value) => {
-          // Base option params on selected variant params.
+          const optionNameLowerCase = option.name.toLowerCase();
-          const optionParams = new URLSearchParams(selectedVariantParams);
-          // Update the params using the current option to reflect how the url would change.
-          optionParams.set(option.name.toLowerCase(), value);
 
-          const optionUrl = createUrl(pathname, optionParams);
+          // Base option params on current params so we can preserve any other param state in the url.
+          const optionSearchParams = new URLSearchParams(searchParams.toString());
 
-          // The option is active if it in the url params.
+          // Update the option params using the current option to reflect how the url *would* change,
-          const isActive = selectedVariantParams.get(option.name.toLowerCase()) === value;
+          // if the option was clicked.
+          optionSearchParams.set(optionNameLowerCase, value);
+          const optionUrl = createUrl(pathname, optionSearchParams);
 
-          // The option is available for sale if it fully matches the variant in the option's url params.
+          // In order to determine if an option is available for sale, we need to:
-          // It's super important to note that this is the options params, *not* the selected variant's params.
+          //
-          // This is the "magic" that will cross check possible future variant combinations and preemptively
+          // 1. Filter out all other param state
-          // disable combinations that are not possible.
+          // 2. Filter out invalid options
-          const isAvailableForSale = optimizedVariants.find((a) =>
+          // 3. Check if the option combination is available for sale
-            Array.from(optionParams.entries()).every(([key, value]) => a[key] === value)
+          //
-          )?.availableForSale;
+          // This is the "magic" that will cross check possible variant combinations and preemptively
+          // disable combinations that are not available. For example, if the color gray is only available in size medium,
+          // then all other sizes should be disabled.
+          const filtered = Array.from(optionSearchParams.entries()).filter(([key, value]) =>
+            options.find(
+              (option) => option.name.toLowerCase() === key && option.values.includes(value)
+            )
+          );
+          const isAvailableForSale = combinations.find((combination) =>
+            filtered.every(
+              ([key, value]) => combination[key] === value && combination.availableForSale
+            )
+          );
 
+          // The option is active if it's in the url params.
+          const isActive = searchParams.get(optionNameLowerCase) === value;
+
+          // You can't disable a link, so we need to render something that isn't clickable.
           const DynamicTag = isAvailableForSale ? Link : 'p';
           const dynamicProps = {
             ...(isAvailableForSale && { scroll: false })