Deployment issues

app/(marketing)/checkout/_components/CheckoutContent.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import React from "react";
+import axios from "axios";
+import { CartType } from "@/types";
+import Empty from "@/components/Empty";
+import OrderSummary from "./OrderSummary";
+import { useQuery } from "@tanstack/react-query";
+import CartItem from "@/components/cart/CartItem";
+import CheckoutSkeleton from "@/components/CheckoutSkeleton";
+
+const CheckoutContent = () => {
+  const {
+    data: cart,
+    isLoading,
+    isError,
+  } = useQuery({
+    queryKey: ["get-cart-item"],
+    queryFn: async () => {
+      const res = await axios.get("/api/cart");
+
+      return res.data as CartType;
+    },
+  });
+
+  return (
+    <>
+      {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>
+      )}
+    </>
+  );
+};
+
+export default CheckoutContent;

app/(marketing)/checkout/page.tsx

@@ -1,21 +1,13 @@
-"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";
+import CheckoutContent from "./_components/CheckoutContent";
 
-export default function CheckoutPage() {
-  const { user } = useCurrentUser();
+export default async function CheckoutPage() {
+  const { user } = await currentUser();
 
   if (!user) {
     return redirect("/auth/sign-in");
@@ -25,62 +17,13 @@ export default function CheckoutPage() {
     return redirect("/");
   }
 
-  const {
-    data: cart,
-    isLoading,
-    isError,
-  } = useQuery({
-    queryKey: ["get-cart-item"],
-    queryFn: async () => {
-      const res = await axios.get("/api/cart");
-
-      return res.data as CartType;
-    },
-  });
-
   return (
     <Container>
       <Heading title="Checkout" description="Finalize Your Purchase" />
 
       <Separator className="my-4" />
 
-      {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>
-      )}
+      <CheckoutContent />
     </Container>
   );
 }

app/(marketing)/stores/[storeId]/_components/ProductFilters.tsx

@@ -23,7 +23,7 @@ const ProductFilters = ({ storeId }: Props) => {
     if (value.trim() === "") {
       router.push(`/stores/${storeId}`);
     }
-  }, [value, router]);
+  }, [value, router, storeId]);
 
   return (
     <form

components/OrderFilters.tsx

@@ -31,7 +31,7 @@ const OrderFilters = ({ path }: Props) => {
     };
 
     pushToUrl();
-  }, [value]);
+  }, [path, value]);
 
   return (
     <Combobox frameworks={orderCategories} value={value} setValue={setValue} />