From 3820197f29c869a0853773caa472c6e0e28d48ab Mon Sep 17 00:00:00 2001
From: "Juan P. Prieto" <juanpablo.prieto@shopify.com>
Date: Mon, 24 Oct 2022 16:02:46 -0700
Subject: [PATCH] remove `useCart` and `useCountries` hooks

---
 app/components/CountrySelector.tsx |  5 +--
 app/components/Layout.tsx          | 64 ++++++++++++++++++++++--------
 app/hooks/useCart.tsx              | 20 ----------
 app/hooks/useCountries.tsx         | 20 ----------
 app/hooks/useRouteData.tsx         |  8 ----
 5 files changed, 50 insertions(+), 67 deletions(-)
 delete mode 100644 app/hooks/useCart.tsx
 delete mode 100644 app/hooks/useCountries.tsx
 delete mode 100644 app/hooks/useRouteData.tsx

diff --git a/app/components/CountrySelector.tsx b/app/components/CountrySelector.tsx
index c85b07c621..7445e5ac01 100644
--- a/app/components/CountrySelector.tsx
+++ b/app/components/CountrySelector.tsx
@@ -3,11 +3,10 @@ import {Listbox} from '@headlessui/react';
 import {IconCaret, IconCheck} from './Icon';
 import {useRef} from 'react';
 import {getLocalizationFromLang} from '~/lib/utils';
-import {useCountries} from '~/hooks/useCountries';
 import {Heading} from '~/components';
+import {Country} from '@shopify/hydrogen-ui-alpha/storefront-api-types';
 
-export function CountrySelector() {
-  const countries = useCountries();
+export function CountrySelector({countries}: {countries: Country[]}) {
   const closeRef = useRef<HTMLButtonElement>(null);
   const {pathname, search} = useLocation();
   const {lang} = useParams();
diff --git a/app/components/Layout.tsx b/app/components/Layout.tsx
index c58f00174d..c043071a87 100644
--- a/app/components/Layout.tsx
+++ b/app/components/Layout.tsx
@@ -20,13 +20,20 @@ import {
   CartEmpty,
   Link,
 } from '~/components';
-import {useFetcher, useParams, Form, useFetchers} from '@remix-run/react';
+import {
+  useFetcher,
+  useParams,
+  Form,
+  useFetchers,
+  Await,
+  useMatches,
+} from '@remix-run/react';
 import {useWindowScroll} from 'react-use';
 import {Disclosure} from '@headlessui/react';
 import type {LayoutData} from '~/data';
 import {Suspense, useEffect, useMemo} from 'react';
-import {useCart} from '~/hooks/useCart';
 import {useIsHydrated} from '~/hooks/useIsHydrated';
+import {Cart} from '@shopify/hydrogen-ui-alpha/storefront-api-types';
 
 export function Layout({
   children,
@@ -63,6 +70,7 @@ export function Layout({
 function Header({title, menu}: {title: string; menu?: EnhancedMenu}) {
   const isHome = useIsHomePath();
   const fetchers = useFetchers();
+  const [root] = useMatches();
 
   const {
     isOpen: isCartOpen,
@@ -90,7 +98,11 @@ function Header({title, menu}: {title: string; menu?: EnhancedMenu}) {
   return (
     <>
       <Suspense fallback={null}>
-        <CartDrawer isOpen={isCartOpen} onClose={closeCart} />
+        <Await resolve={root.data.cart}>
+          {(cart) => (
+            <CartDrawer cart={cart} isOpen={isCartOpen} onClose={closeCart} />
+          )}
+        </Await>
       </Suspense>
       {menu && (
         <MenuDrawer isOpen={isMenuOpen} onClose={closeMenu} menu={menu} />
@@ -111,8 +123,15 @@ function Header({title, menu}: {title: string; menu?: EnhancedMenu}) {
   );
 }
 
-function CartDrawer({isOpen, onClose}: {isOpen: boolean; onClose: () => void}) {
-  const cart = useCart();
+function CartDrawer({
+  cart,
+  isOpen,
+  onClose,
+}: {
+  cart: Cart;
+  isOpen: boolean;
+  onClose: () => void;
+}) {
   /**
    * Whenever a component that uses a fetcher is _unmounted_, that fetcher is removed
    * from the internal Remix cache. By defining the fetcher outside of the component,
@@ -217,6 +236,7 @@ function MobileHeader({
   openMenu: () => void;
 }) {
   const {y} = useWindowScroll();
+  const [root] = useMatches();
 
   const styles = {
     button: 'relative flex items-center justify-center w-8 h-8',
@@ -274,7 +294,15 @@ function MobileHeader({
         <Suspense
           fallback={<Badge count={0} dark={isHome} openCart={openCart} />}
         >
-          <CartBadge dark={isHome} openCart={openCart} />
+          <Await resolve={root.data.cart}>
+            {(cart) => (
+              <Badge
+                dark={isHome}
+                openCart={openCart}
+                count={cart.totalQuantity || 0}
+              />
+            )}
+          </Await>
         </Suspense>
       </div>
     </header>
@@ -294,6 +322,7 @@ function DesktopHeader({
 }) {
   const {y} = useWindowScroll();
   const params = useParams();
+  const [root] = useMatches();
 
   const styles = {
     link: 'pb-1',
@@ -359,7 +388,15 @@ function DesktopHeader({
         <Suspense
           fallback={<Badge count={0} dark={isHome} openCart={openCart} />}
         >
-          <CartBadge dark={isHome} openCart={openCart} />
+          <Await resolve={root.data.cart}>
+            {(cart) => (
+              <Badge
+                dark={isHome}
+                openCart={openCart}
+                count={cart.totalQuantity || 0}
+              />
+            )}
+          </Await>
         </Suspense>
       </div>
     </header>
@@ -416,15 +453,8 @@ function Badge({
   );
 }
 
-function CartBadge({openCart, dark}: {dark: boolean; openCart: () => void}) {
-  const cart = useCart();
-
-  return (
-    <Badge openCart={openCart} count={cart?.totalQuantity || 0} dark={dark} />
-  );
-}
-
 function Footer({menu}: {menu?: EnhancedMenu}) {
+  const [root] = useMatches();
   const isHome = useIsHomePath();
   const itemsCount = menu
     ? menu?.items?.length + 1 > 4
@@ -443,7 +473,9 @@ function Footer({menu}: {menu?: EnhancedMenu}) {
     >
       <FooterMenu menu={menu} />
       <Suspense fallback="Loading countries...">
-        <CountrySelector />
+        <Await resolve={root.data.countries}>
+          {(countries) => <CountrySelector countries={countries} />}
+        </Await>
       </Suspense>
       <div
         className={`self-end pt-8 opacity-50 md:col-span-2 lg:col-span-${itemsCount}`}
diff --git a/app/hooks/useCart.tsx b/app/hooks/useCart.tsx
deleted file mode 100644
index 99385ffa74..0000000000
--- a/app/hooks/useCart.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import {useParentRouteData} from './useRouteData';
-
-import type {Cart} from '@shopify/hydrogen-ui-alpha/storefront-api-types';
-
-/*
-  This is an experimental pattern that helps prevent props drilling
-*/
-export function useCart(): Cart | null {
-  const rootData = useParentRouteData('/');
-
-  if (typeof rootData?.cart === 'undefined') {
-    return null;
-  }
-
-  if (rootData?.cart?._data) {
-    return rootData?.cart?._data;
-  }
-
-  throw rootData?.cart;
-}
diff --git a/app/hooks/useCountries.tsx b/app/hooks/useCountries.tsx
deleted file mode 100644
index ffe33da708..0000000000
--- a/app/hooks/useCountries.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import {useParentRouteData} from './useRouteData';
-
-import type {Country} from '@shopify/hydrogen-ui-alpha/storefront-api-types';
-
-/*
-  This is an experimental pattern that helps prevent props drilling
-*/
-export function useCountries(): Array<Country> | null {
-  const rootData = useParentRouteData('/');
-
-  if (typeof rootData?.countries === 'undefined') {
-    return null;
-  }
-
-  if (rootData?.countries?._data) {
-    return rootData?.countries?._data;
-  }
-
-  throw rootData?.countries;
-}
diff --git a/app/hooks/useRouteData.tsx b/app/hooks/useRouteData.tsx
deleted file mode 100644
index 7d473dad1a..0000000000
--- a/app/hooks/useRouteData.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import {useMatches} from '@remix-run/react';
-
-export function useParentRouteData(pathname: string): any {
-  const matches = useMatches();
-  const parentMatch = matches.find((match) => match.pathname === pathname);
-  if (!parentMatch) return null;
-  return parentMatch.data;
-}