click to open cart instead of hover (#109)

jekabolt · Jul 11, 2024 · 57a5bb1 · 57a5bb1
1 parent 49a05a5
commit 57a5bb1
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 25 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/actions/cart.tsx b/src/actions/cart.tsx
@@ -15,7 +15,11 @@ export async function addItemToCookie(slug: string, size?: string) {
       GRBPWR_CART,
       JSON.stringify({
         products: {
-          [cartId]: { slug: slug, size: size, quantity: 1 },
+          [cartId]: {
+            slug: slug.replace("/product", ""),
+            size: size,
+            quantity: 1,
+          },
         },
       }),
     );

diff --git a/src/components/cart/HoverCart.tsx → src/components/cart/CartPopup.tsx b/src/components/cart/HoverCart.tsx → src/components/cart/CartPopup.tsx
@@ -1,22 +1,41 @@
+"use client";
+
 import Button from "@/components/ui/Button";
-import CartProductsList from "./CartProductsList";
-import { Suspense } from "react";
+import { useState } from "react";
 import { ButtonStyle } from "../ui/Button/styles";
 import Link from "next/link";
+import { cn } from "@/lib/utils";
+import { useClickAway } from "@uidotdev/usehooks";
+
+export default function CartPopup({ children }: { children: React.ReactNode }) {
+  const [open, setOpenStatus] = useState(false);
+
+  const ref = useClickAway<HTMLDivElement>(() => {
+    setOpenStatus(false);
+  });
 
-export default function HoverCart({ children }: { children: React.ReactNode }) {
   return (
     <div>
-      <div className="group relative">
-        {children}
+      <div className="group relative" ref={ref}>
+        <Button
+          onClick={() => setOpenStatus(!open)}
+          style={ButtonStyle.underlinedButton}
+        >
+          cart
+        </Button>
         <div className="blueTheme">
-          <div className="absolute -top-1 right-0 z-30 hidden w-[500px] bg-bgColor p-5 group-hover:block">
+          <div
+            className={cn(
+              "absolute -top-1 right-0 z-30 hidden w-[500px] bg-bgColor p-5",
+              {
+                block: open,
+              },
+            )}
+          >
             <div className="mb-6 text-textColor">added to cart {"[06]"}</div>
             <div className="relative">
               <div className="no-scroll-bar relative max-h-[800px] space-y-5 overflow-y-scroll pb-5">
-                <Suspense fallback={"LOADING......LOADING......LOADING......"}>
-                  <CartProductsList />
-                </Suspense>
+                {children}
               </div>
               <div className="absolute bottom-0 left-0 h-28 w-full bg-gradient-to-t from-bgColor"></div>
             </div>

diff --git a/src/components/cart/CartProductsList.tsx b/src/components/cart/CartProductsList.tsx
@@ -11,13 +11,26 @@ export default async function CartProductsList() {
   if (!cart || !cart.products) return null;
 
   const cartItems = Object.values(cart.products) as {
+    // todo: add price to calculate total amount in any place in the app
     quantity: number;
     slug: string;
     size?: string;
   }[];
 
+  console.log("cartItems22");
+  console.log(cartItems);
+
   const productsPromises = cartItems.map(async (item) => {
     const [gender, brand, name, id] = item.slug.split("/");
+
+    console.log("23232323e, id");
+    console.log({
+      gender,
+      brand,
+      name,
+      id: parseInt(id),
+    });
+
     const response = await serviceClient.GetProduct({
       gender,
       brand,

diff --git a/src/components/layouts/CoreLayout.tsx b/src/components/layouts/CoreLayout.tsx
@@ -2,8 +2,10 @@ import Footer from "@/components/global/Footer";
 import Header from "@/components/global/Header";
 import Button from "@/components/ui/Button";
 import { ButtonStyle } from "@/components/ui/Button/styles";
-import HoverCart from "@/components/cart/HoverCart";
+import CartPopup from "@/components/cart/CartPopup";
 import Link from "next/link";
+import { Suspense } from "react";
+import CartProductsList from "../cart/CartProductsList";
 
 export default function CoreLayout({
   children,
@@ -37,11 +39,11 @@ export default function CoreLayout({
 
           <div className="relative hidden w-24 md:block">
             <nav className="sticky top-24 flex flex-col items-center gap-60">
-              <HoverCart>
-                <Button style={ButtonStyle.underlinedButton}>
-                  <Link href="/cart">cart</Link>
-                </Button>
-              </HoverCart>
+              <CartPopup>
+                <Suspense fallback={null}>
+                  <CartProductsList />
+                </Suspense>
+              </CartPopup>
               <Button style={ButtonStyle.underlinedButton}>
                 <Link href="/about">about</Link>
               </Button>