From de1e3c668cf66329ad2f27ec42a4295c7fdbc96f Mon Sep 17 00:00:00 2001
From: hta218 <hta218.dev@gmail.com>
Date: Fri, 13 Dec 2024 11:46:54 +0700
Subject: [PATCH] Fix open cart drawer on header

---
 app/components/header/cart-count.tsx     | 16 ++------
 app/components/header/desktop-header.tsx |  8 +---
 app/components/header/index.tsx          | 47 +++---------------------
 app/components/header/mobile-header.tsx  | 14 ++-----
 4 files changed, 13 insertions(+), 72 deletions(-)

diff --git a/app/components/header/cart-count.tsx b/app/components/header/cart-count.tsx
index 34a715d6..dba7e42b 100644
--- a/app/components/header/cart-count.tsx
+++ b/app/components/header/cart-count.tsx
@@ -7,11 +7,9 @@ import { useIsHydrated } from "~/hooks/use-is-hydrated";
 import type { RootLoader } from "~/root";
 
 export function CartCount({
-  isHome,
   openCart,
   isTransparent,
 }: {
-  isHome: boolean;
   openCart: () => void;
   isTransparent: boolean;
 }) {
@@ -19,18 +17,12 @@ export function CartCount({
   return (
     <Suspense
       fallback={
-        <Badge
-          count={0}
-          dark={isHome}
-          openCart={openCart}
-          isTransparent={isTransparent}
-        />
+        <Badge count={0} openCart={openCart} isTransparent={isTransparent} />
       }
     >
       <Await resolve={rootData?.cart}>
         {(cart) => (
           <Badge
-            dark={isHome}
             openCart={openCart}
             count={cart?.totalQuantity || 0}
             cart={cart}
@@ -44,13 +36,11 @@ export function CartCount({
 
 function Badge({
   openCart,
-  dark,
   count,
   cart,
   isTransparent,
 }: {
   count: number;
-  dark: boolean;
   openCart: () => void;
   cart?: any;
   isTransparent: boolean;
@@ -63,11 +53,11 @@ function Badge({
         {count > 0 && (
           <div
             className={clsx(
-              "text-[12px] leading-none text-center font-medium subpixel-antialiased",
+              "text-sm leading-none text-center font-medium subpixel-antialiased",
               "flex items-center justify-center min-w-4 rounded-full p-0.5",
               "absolute top-0 -right-1",
               "transition-colors duration-300",
-              "group-hover/header:bg-[var(--color-header-text)] group-hover/header:text-[--color-header-bg]",
+              "group-hover/header:bg-[--color-header-text] group-hover/header:text-[--color-header-bg]",
               isTransparent
                 ? "text-[--color-header-text] bg-[--color-transparent-header-text]"
                 : "bg-[--color-header-text] text-[--color-header-bg]",
diff --git a/app/components/header/desktop-header.tsx b/app/components/header/desktop-header.tsx
index 3bf5fb70..2146924f 100644
--- a/app/components/header/desktop-header.tsx
+++ b/app/components/header/desktop-header.tsx
@@ -13,9 +13,9 @@ import { Logo } from "~/components/logo";
 import { cn } from "~/lib/cn";
 import { useIsHomePath } from "~/lib/utils";
 import type { RootLoader } from "~/root";
+import { CartDrawer } from "./cart-drawer";
 import { DesktopMenu } from "./menu/desktop-menu";
 import { PredictiveSearchButton } from "./predictive-search";
-import { CartCount } from "./cart-count";
 
 let variants = cva("", {
   variants: {
@@ -72,11 +72,7 @@ export function DesktopHeader() {
         <div className="flex items-center gap-1 z-1">
           <PredictiveSearchButton />
           <AccountLink className="relative flex items-center justify-center w-8 h-8" />
-          <CartCount
-            isHome={isHome}
-            openCart={() => {}}
-            isTransparent={isTransparent}
-          />
+          <CartDrawer isTransparent={isTransparent} />
         </div>
       </div>
     </header>
diff --git a/app/components/header/index.tsx b/app/components/header/index.tsx
index 33f5e605..e70e7004 100644
--- a/app/components/header/index.tsx
+++ b/app/components/header/index.tsx
@@ -1,21 +1,13 @@
-import { Await, useRouteLoaderData } from "@remix-run/react";
-import { CartForm, type CartReturn } from "@shopify/hydrogen";
-import { Suspense, useEffect } from "react";
+import { CartForm } from "@shopify/hydrogen";
+import { useEffect } from "react";
 import { useCartFetchers } from "~/hooks/use-cart-fetchers";
-import { Cart } from "~/modules/cart";
-import type { RootLoader } from "~/root";
-import { CartLoading } from "../../modules/cart-loading";
-import { Drawer, useDrawer } from "../../modules/drawer";
+import { useDrawer } from "../../modules/drawer";
 import { DesktopHeader } from "./desktop-header";
 import { MobileHeader } from "./mobile-header";
 import { ScrollingAnnouncement } from "./scrolling-announcement";
 
 export function Header() {
-  let {
-    isOpen: isCartOpen,
-    openDrawer: openCart,
-    closeDrawer: closeCart,
-  } = useDrawer();
+  let { isOpen: isCartOpen, openDrawer: openCart } = useDrawer();
 
   let addToCartFetchers = useCartFetchers(CartForm.ACTIONS.LinesAdd);
   // toggle cart drawer when adding to cart
@@ -26,38 +18,9 @@ export function Header() {
 
   return (
     <>
-      {/* <CartDrawer isOpen={isCartOpen} onClose={closeCart} /> */}
       <ScrollingAnnouncement />
       <DesktopHeader />
-      <MobileHeader openCart={openCart} />
+      <MobileHeader />
     </>
   );
 }
-
-function CartDrawer({
-  isOpen,
-  onClose,
-}: {
-  isOpen: boolean;
-  onClose: () => void;
-}) {
-  const rootData = useRouteLoaderData<RootLoader>("root");
-
-  return (
-    <Drawer open={isOpen} onClose={onClose} heading="Cart" openFrom="right">
-      <div className="grid">
-        <Suspense fallback={<CartLoading />}>
-          <Await resolve={rootData?.cart}>
-            {(cart) => (
-              <Cart
-                layout="drawer"
-                onClose={onClose}
-                cart={cart as CartReturn}
-              />
-            )}
-          </Await>
-        </Suspense>
-      </div>
-    </Drawer>
-  );
-}
diff --git a/app/components/header/mobile-header.tsx b/app/components/header/mobile-header.tsx
index abea793b..293f3ae7 100644
--- a/app/components/header/mobile-header.tsx
+++ b/app/components/header/mobile-header.tsx
@@ -13,14 +13,10 @@ import { Logo } from "~/components/logo";
 import { cn } from "~/lib/cn";
 import { useIsHomePath } from "~/lib/utils";
 import type { RootLoader } from "~/root";
-import { CartCount } from "./cart-count";
+import { CartDrawer } from "./cart-drawer";
 import { MobileMenu } from "./menu/mobile-menu";
 
-export function MobileHeader({
-  openCart,
-}: {
-  openCart: () => void;
-}) {
+export function MobileHeader() {
   let isHome = useIsHomePath();
   let { enableTransparentHeader } = useThemeSettings();
   let { y } = useWindowScroll();
@@ -65,11 +61,7 @@ export function MobileHeader({
       <Logo isTransparent={isTransparent} />
       <div className="flex items-center justify-end w-full">
         <AccountLink className="relative flex items-center justify-center w-8 h-8" />
-        <CartCount
-          isHome={isHome}
-          openCart={openCart}
-          isTransparent={isTransparent}
-        />
+        <CartDrawer isTransparent={isTransparent} />
       </div>
     </header>
   );