Worked on checkout page

app/(marketing)/checkout/page.tsx

@@ -1,16 +1,21 @@
-import prismadb from "@/lib/prisma";
+"use client";
+
+import axios from "axios";
+import { CartType } from "@/types";
 import Empty from "@/components/Empty";
-import { currentUser } from "@/lib/auth";
 import { UserRole } from "@prisma/client";
 import { redirect } from "next/navigation";
 import Heading from "@/components/Heading";
 import Container from "@/components/Container";
+import { useQuery } from "@tanstack/react-query";
 import CartItem from "@/components/cart/CartItem";
 import { Separator } from "@/components/ui/separator";
 import OrderSummary from "./_components/OrderSummary";
+import useCurrentUser from "@/hooks/use-current-user";
+import CheckoutSkeleton from "@/components/CheckoutSkeleton";
 
-export default async function CheckoutPage() {
-  const { user } = await currentUser();
+export default function CheckoutPage() {
+  const { user } = useCurrentUser();
 
   if (!user) {
     return redirect("/auth/sign-in");
@@ -20,29 +25,16 @@ export default async function CheckoutPage() {
     return redirect("/");
   }
 
-  const cart = await prismadb.cart.findUnique({
-    where: {
-      userId: user.id,
-    },
-    include: {
-      cartItems: {
-        include: {
-          product: {
-            include: {
-              category: true,
-            },
-          },
-          productItem: true,
-          availableItem: {
-            include: {
-              size: true,
-            },
-          },
-        },
-        orderBy: {
-          createdAt: "desc",
-        },
-      },
+  const {
+    data: cart,
+    isLoading,
+    isError,
+  } = useQuery({
+    queryKey: ["get-cart-item"],
+    queryFn: async () => {
+      const res = await axios.get("/api/cart");
+
+      return res.data as CartType;
     },
   });
 
@@ -52,24 +44,43 @@ export default async function CheckoutPage() {
 
       <Separator className="my-4" />
 
-      <main className="grid md:grid-cols-3 gap-5">
-        <div className="md:col-span-2">
-          {cart?.cartItems && cart?.cartItems?.length > 0 ? (
-            <div className="space-y-5">
-              {cart.cartItems.map((item, i) => (
-                <CartItem key={item.id} cartItem={item} isCheckout index={i} />
-              ))}
-            </div>
-          ) : (
-            <Empty message="Looks like you haven't added anything to your cart yet. Ready to start shopping? Browse our collection to find something you'll love!" />
-          )}
+      {isError && (
+        <Empty message="Something went wrong! could not get cart items." />
+      )}
+
+      {isLoading && (
+        <div className="space-y-5">
+          {new Array(5).fill("").map((_, i) => (
+            <CheckoutSkeleton key={i} />
+          ))}
         </div>
+      )}
+
+      {!isError && !isLoading && cart && (
+        <main className="grid md:grid-cols-3 gap-5">
+          <div className="md:col-span-2">
+            {cart?.cartItems && cart?.cartItems?.length > 0 ? (
+              <div className="space-y-5">
+                {cart.cartItems.map((item, i) => (
+                  <CartItem
+                    key={item.id}
+                    cartItem={item}
+                    isCheckout
+                    index={i}
+                  />
+                ))}
+              </div>
+            ) : (
+              <Empty message="Looks like you haven't added anything to your cart yet. Ready to start shopping? Browse our collection to find something you'll love!" />
+            )}
+          </div>
 
-        <OrderSummary
-          cartId={cart?.id || ""}
-          cartItems={cart?.cartItems || []}
-        />
-      </main>
+          <OrderSummary
+            cartId={cart?.id || ""}
+            cartItems={cart?.cartItems || []}
+          />
+        </main>
+      )}
     </Container>
   );
 }

components/CheckoutSkeleton.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import React from "react";
+import { Skeleton } from "./ui/skeleton";
+
+const CheckoutSkeleton = () => {
+  return (
+    <div className="bg-white p-5 space-y-4 rounded-lg border-none shadow-sm">
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex flex-1 items-center gap-2">
+          <Skeleton className="w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 rounded-lg" />
+
+          <div className="flex flex-col gap-0.5">
+            <Skeleton className="w-20 h-4 rounded-lg" />
+
+            <Skeleton className="w-20 h-4 rounded-lg" />
+
+            <Skeleton className="w-20 h-4 rounded-lg" />
+          </div>
+        </div>
+
+        <Skeleton className="w-20 h-4 rounded-lg" />
+      </div>
+
+      <div className="flex items-center justify-between gap-4">
+        <div className="flex items-center gap-1">
+          <Skeleton className="w-10 h-10 rounded-lg" />
+
+          <Skeleton className="w-10 h-4 rounded-lg" />
+
+          <Skeleton className="w-10 h-10 rounded-lg" />
+        </div>
+
+        <Skeleton className="w-36 h-10 rounded-lg" />
+      </div>
+    </div>
+  );
+};
+
+export default CheckoutSkeleton;

components/cart/CartItem.tsx

@@ -32,6 +32,8 @@ const CartItem = ({ cartItem, isCheckout, index }: Props) => {
       queryClient.invalidateQueries({
         queryKey: ["get-cart-item"],
       });
+
+      isCheckout && router.refresh();
     },
     onError: (err) => {
       if (err instanceof AxiosError) {