feat: breadcrumb in single product, navbar refactor

src/app/categories/[id]/page.tsx

@@ -1,27 +1,19 @@
 import { ProductCard } from "~/components/ui/ProductCard";
 import { db } from "~/server/db";
+import { getCategory } from "~/server/queries";
 
 export default async function SingleCategory({
   params: { id: id },
 }: {
   params: { id: string };
 }) {
-  const category = await db.query.categories.findFirst({
-    where: (categories, { eq }) => eq(categories.id, Number(id)),
-    with: {
-      products: {
-        with: {
-          reviews: true,
-        },
-      },
-    },
-  });
+  const category = await getCategory(Number(id));
   console.log(category?.products);
   return (
     <>
-      <section className="mt-32 flex h-fit flex-col gap-24 px-4 py-4 md:px-8">
+      <section className="mt-12 flex h-fit flex-col gap-6 px-4 py-4 md:px-8">
         <h2 className="mb-8 text-3xl font-bold">{category?.name}</h2>
-        <div className="grid grid-cols-[repeat(auto-fit,_minmax(200px,_1fr))] gap-4">
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
           {category?.products?.map((el) => (
             <ProductCard product={el} key={el.id} />
           ))}

src/app/categories/page.tsx

@@ -2,7 +2,7 @@ import CategoryList from "~/components/CategoryList";
 
 export default async function Categories() {
   return (
-    <section className="mt-32 h-fit px-8 py-4">
+    <section className="mt-12 h-fit px-8 py-4">
       <h2 className="mb-8 text-3xl font-bold">All Categories</h2>
       <CategoryList />
     </section>

src/app/layout.tsx

@@ -34,10 +34,10 @@ export default function RootLayout({
           <TRPCReactProvider>
             <CartProvider>
               <Header />
-              <main>{children}</main>
-              <Footer />
-              <Toaster />
             </CartProvider>
+            <main>{children}</main>
+            <Footer />
+            <Toaster />
           </TRPCReactProvider>
         </body>
       </html>

src/app/products/[id]/page.tsx

@@ -5,11 +5,14 @@ import PlusIcon from "public/img/PlusIcon";
 import { useState } from "react";
 import { toast } from "react-toastify";
 import { FeaturedList } from "~/app/_components/FeaturedList";
+import ProductBreadcrumb from "~/components/ProductBreadcrumb";
 import { QuantitywCart } from "~/components/QuantitywCart";
 import { BigButton } from "~/components/ui/Buttons";
 import { ProductReviews } from "~/components/ui/ProductReviews";
 import { getFeaturedProducts, getProduct } from "~/server/queries";
 
+// TODO: Make breadcrumb links
+
 export default async function SingleProductPage({
   params: { id: id },
 }: {
@@ -21,7 +24,7 @@ export default async function SingleProductPage({
 
   const item = await getProduct(Number(id));
   if (!item) return;
-  const { image, title, price, quantity } = item;
+  const { image, title, price, quantity, categoryId } = item;
 
   // return (
   //   <>
@@ -32,9 +35,10 @@ export default async function SingleProductPage({
   //   </>
   // );
   return (
-    <section className="mt-32 flex h-fit flex-col gap-24 px-4 py-4 md:px-8">
+    <section className="flex h-fit flex-col gap-12 px-4 py-4 md:px-8">
+      <ProductBreadcrumb product={item} />
       <div className="flex w-full flex-col items-center justify-between gap-20 md:flex-row md:items-start">
-        <div className="b- border- relative h-72 w-72 rounded-lg border-8 border-amber-400 object-cover">
+        <div className="relative h-72 w-72 rounded-lg border-8 border-amber-400 object-cover">
           <Image
             // changed image to static for data saving
             // src={image}

src/app/products/page.tsx

@@ -20,15 +20,15 @@ export default function AllProducts() {
 
   useEffect(() => {
     if (inView && hasNextPage) {
-      fetchNextPage();
+      void fetchNextPage();
     }
   }, [inView]);
 
   // data will be split in pages
   return (
     <>
-      <section className="mt-32 h-fit px-4 py-4 md:px-8">
-        <div className="relative flex w-full flex-col items-center justify-center">
+      <section className="mt-12 h-fit px-4 py-4 md:px-8">
+        <div className="relative flex w-full flex-col">
           <h2 className="mb-8 text-3xl font-bold">All Products</h2>
           <div className="grid auto-cols-max grid-cols-1 gap-6 md:grid-cols-3 lg:grid-cols-4">
             {data?.pages.map((page) => (

src/components/CartItem.tsx

@@ -5,7 +5,7 @@ import { type CartItemPlus } from "../utils/helpers";
 import CrossIcon from "public/img/CrossIcon";
 import PlusIcon from "public/img/PlusIcon";
 import MinusIcon from "public/img/MinusIcon";
-import { CartItemGuest } from "~/types/cart";
+import { CartItem, CartItemGuest } from "~/types/cart";
 
 type Props = {
   item: CartItemPlus | CartItemGuest;

src/components/CartMenu.tsx

@@ -6,6 +6,8 @@ import { CartItemCard } from "./CartItem";
 import { useCart } from "../context/CartContext";
 import { api } from "~/trpc/react";
 import { ArrowBtn, OutlineBtn } from "./ui/Buttons";
+import { CartItemGuest } from "~/types/cart";
+import { CartItemPlus } from "~/utils/helpers";
 
 export const CartMenu = ({ isOpen }: { isOpen: boolean }) => {
   const { clearCart, createCheckOutSession } = useCartActions();
@@ -38,7 +40,9 @@ export const CartMenu = ({ isOpen }: { isOpen: boolean }) => {
           <div className="flex h-fit w-full flex-col gap-4 overflow-y-auto md:w-[600px]">
             {cartItems
               ? cartItems?.map((el) => {
-                  return <CartItemCard key={el.id} item={el} />;
+                  return (
+                    <CartItemCard key={el.id} item={el as CartItemGuest} />
+                  );
                 })
               : guestItems
                 ? guestItems?.map((el) => {
@@ -54,7 +58,10 @@ export const CartMenu = ({ isOpen }: { isOpen: boolean }) => {
           </div>
           <ArrowBtn
             onClick={() =>
-              createCheckOutSession(cartItems ? cartItems : guestItems)
+              createCheckOutSession(
+                //@ts-expect-error cart items type error
+                cartItems ? (cartItems as CartItemPlus) : guestItems,
+              )
             }
           >
             Checkout

src/components/Header.tsx

@@ -12,59 +12,51 @@ import { usePathname } from "next/navigation";
 import CartIcon from "public/img/CartIcon";
 import ProfileIcon from "public/img/ProfileIcon";
 import { useCart } from "~/context/CartContext";
+import { cn } from "~/lib/utils";
 import { api } from "~/trpc/react";
 
-// TODO: refactor navigation - use client component only when needed, disable links when on that page, use shadcn
-// TODO: Make breadcrumb links
-// TODO: Make header glass effect
+// TODO: use client component only when needed - move client side parts to separate comps.
+
 const NavMain = () => {
   const pathname = usePathname();
+  const LINKS: { text: string; href: string }[] = [
+    { text: "Home", href: "/" },
+    { text: "Categories", href: "/categories" },
+    { text: "All products", href: "/products" },
+  ];
+
   return (
     <ul className="hidden items-center gap-10 sm:flex">
-      <li>
-        <Link
-          href="/"
-          className={`transition-all duration-300 hover:text-violet-300 active:text-amber-300 ${
-            pathname == "/" ? "font-semibold text-amber-400" : "text-slate-50"
-          }`}
-        >
-          Home
-        </Link>
-      </li>
-      <li>
-        <Link
-          href="/categories"
-          className={`transition-all duration-300 hover:text-violet-300 active:text-amber-300 ${
-            pathname == "/categories"
-              ? "font-semibold text-amber-400"
-              : "text-slate-50"
-          }`}
-        >
-          Categories
-        </Link>
-      </li>
-      <li className="w-max">
-        <Link
-          href="/products"
-          className={`transition-all duration-300 hover:text-violet-300 active:text-amber-300 ${
-            pathname == "/products"
-              ? "font-semibold text-amber-400"
-              : "text-white"
-          }`}
-        >
-          All Products
-        </Link>
-      </li>
+      {LINKS.map((link) => (
+        <li key={link.href}>
+          <Link
+            href={link.href}
+            aria-disabled={pathname === link.href}
+            tabIndex={pathname === link.href ? -1 : undefined}
+            className={cn(
+              "transition-all duration-300 hover:text-violet-300 active:text-amber-300",
+              pathname === link.href
+                ? "pointer-events-none font-semibold text-amber-400"
+                : "",
+            )}
+          >
+            {link.text}
+          </Link>
+        </li>
+      ))}
     </ul>
   );
 };
 
 export const Header = () => {
-  // const { data: sessionData } = useSession();
+  const { userId } = useAuth();
   const { toggleCart, getCartQuantity } = useCart();
 
-  // const userId = sessionData?.user?.id;
-  const { data: cartItems } = api.cart.getCartItems.useQuery();
+  const { data: cartItems } = api.cart.getCartItems.useQuery(undefined, {
+    staleTime: 60 * 1000,
+    enabled: !!userId,
+  });
+
   let totalQuantity = 0;
 
   if (cartItems) {

src/components/ProductBreadcrumb.tsx

@@ -0,0 +1,39 @@
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "~/components/ui/breadcrumb";
+import type { ProductWithRelations } from "~/server/db/schema";
+
+export default function ProductBreadcrumb({
+  product,
+}: {
+  product: ProductWithRelations;
+}) {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/products">All products</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href={`/categories/${product.categoryId}`}>
+            {product.category?.name}
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>{product.title}</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+}

src/components/UserOrders.tsx

@@ -38,7 +38,7 @@ export default function UserOrders({ orders }: { orders: OrderModel[] }) {
       {/* <TableCaption>A list of your recent invoices.</TableCaption> */}
       <TableHeader>
         <TableRow>
-          <TableHead className="w-[300px]">Date</TableHead>
+          <TableHead className="w-[150px]">Date</TableHead>
           <TableHead>Status</TableHead>
 
           <TableHead className="text-right">Total Amount</TableHead>