feat: update lobby

src/app/(dashboard)/dashboard/stores/[storeId]/customers/page.tsx

@@ -29,7 +29,7 @@ export default async function CustomersPage({
   params,
   searchParams,
 }: CustomersPageProps) {
-  const storeId = Number(params.storeId)
+  const storeId = decodeURIComponent(params.storeId)
 
   const { page, per_page, sort, email, from, to } =
     customersSearchParamsSchema.parse(searchParams)

src/app/(dashboard)/dashboard/stores/[storeId]/layout.tsx

@@ -4,7 +4,7 @@ import { stores } from "@/db/schema"
 import { eq } from "drizzle-orm"
 
 import { getCacheduser } from "@/lib/actions/auth"
-import { getSubscriptionPlan } from "@/lib/fetchers/stripe"
+import { getSubscriptionPlan } from "@/lib/actions/stripe"
 import { getDashboardRedirectPath } from "@/lib/subscription"
 import {
   PageHeader,
@@ -25,7 +25,7 @@ export default async function StoreLayout({
   children,
   params,
 }: StoreLayoutProps) {
-  const storeId = Number(params.storeId)
+  const storeId = decodeURIComponent(params.storeId)
 
   const user = await getCacheduser()
 

src/app/(dashboard)/dashboard/stores/[storeId]/orders/[orderId]/page.tsx

@@ -30,8 +30,8 @@ interface OrderPageProps {
 }
 
 export default async function OrderPage({ params }: OrderPageProps) {
-  const storeId = Number(params.storeId)
-  const orderId = Number(params.orderId)
+  const storeId = decodeURIComponent(params.storeId)
+  const orderId = decodeURIComponent(params.orderId)
 
   const order = await db.query.orders.findFirst({
     where: and(eq(orders.id, orderId), eq(products.storeId, storeId)),

src/app/(dashboard)/dashboard/stores/[storeId]/orders/page.tsx

@@ -30,7 +30,7 @@ export default async function OrdersPage({
   params,
   searchParams,
 }: OrdersPageProps) {
-  const storeId = Number(params.storeId)
+  const storeId = decodeURIComponent(params.storeId)
 
   const { page, per_page, sort, customer, status, from, to } =
     ordersSearchParamsSchema.parse(searchParams)

src/app/(dashboard)/dashboard/stores/[storeId]/products/[productId]/page.tsx

@@ -31,8 +31,8 @@ interface UpdateProductPageProps {
 export default async function UpdateProductPage({
   params,
 }: UpdateProductPageProps) {
-  const storeId = Number(params.storeId)
-  const productId = Number(params.productId)
+  const storeId = decodeURIComponent(params.storeId)
+  const productId = decodeURIComponent(params.productId)
 
   const product = await db.query.products.findFirst({
     where: and(eq(products.id, productId), eq(products.storeId, storeId)),

src/app/(dashboard)/dashboard/stores/[storeId]/products/page.tsx

@@ -3,7 +3,7 @@ import { type Metadata } from "next"
 import { unstable_noStore as noStore } from "next/cache"
 import { notFound } from "next/navigation"
 import { db } from "@/db"
-import { products, stores, type Product } from "@/db/schema"
+import { categories, products, stores, type Product } from "@/db/schema"
 import { env } from "@/env.js"
 import type { SearchParams } from "@/types"
 import { and, asc, desc, eq, gte, inArray, like, lte, sql } from "drizzle-orm"
@@ -30,7 +30,7 @@ export default async function ProductsPage({
   params,
   searchParams,
 }: ProductsPageProps) {
-  const storeId = Number(params.storeId)
+  const storeId = decodeURIComponent(params.storeId)
 
   // Parse search params using zod schema
   const { page, per_page, sort, name, category, from, to } =
@@ -60,7 +60,7 @@ export default async function ProductsPage({
     "asc" | "desc" | undefined,
   ]) ?? ["createdAt", "desc"]
 
-  const categories = (category?.split(".") as Product["category"][]) ?? []
+  const categoryIds = category?.split(".") ?? []
 
   const fromDay = from ? new Date(from) : undefined
   const toDay = to ? new Date(to) : undefined
@@ -73,7 +73,7 @@ export default async function ProductsPage({
         .select({
           id: products.id,
           name: products.name,
-          category: products.category,
+          category: categories.name,
           price: products.price,
           inventory: products.inventory,
           rating: products.rating,
@@ -82,14 +82,15 @@ export default async function ProductsPage({
         .from(products)
         .limit(limit)
         .offset(offset)
+        .leftJoin(categories, eq(products.categoryId, categories.id))
         .where(
           and(
             eq(products.storeId, storeId),
             // Filter by name
             name ? like(products.name, `%${name}%`) : undefined,
             // Filter by category
-            categories.length > 0
-              ? inArray(products.category, categories)
+            categoryIds.length > 0
+              ? inArray(products.categoryId, categoryIds)
               : undefined,
             // Filter by createdAt
             fromDay && toDay
@@ -119,8 +120,8 @@ export default async function ProductsPage({
             // Filter by name
             name ? like(products.name, `%${name}%`) : undefined,
             // Filter by category
-            categories.length > 0
-              ? inArray(products.category, categories)
+            categoryIds.length > 0
+              ? inArray(products.categoryId, categoryIds)
               : undefined,
             // Filter by createdAt
             fromDay && toDay

src/app/(lobby)/_components/category-card-skeleton.tsx

@@ -0,0 +1,18 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card"
+import { Skeleton } from "@/components/ui/skeleton"
+
+export function CategoryCardSkeleton() {
+  return (
+    <Card className="relative flex size-full flex-col items-center justify-center overflow-hidden rounded-lg bg-transparent transition-colors hover:bg-muted/50">
+      <CardHeader>
+        <div className="grid size-11 place-items-center rounded-full border-2">
+          <Skeleton className="size-5" />
+        </div>
+      </CardHeader>
+      <CardContent className="flex flex-col items-center space-y-1.5">
+        <Skeleton className="h-7 w-44" />
+        <Skeleton className="h-4 w-20" />
+      </CardContent>
+    </Card>
+  )
+}

src/app/(lobby)/_components/category-card.tsx

@@ -1,8 +1,8 @@
 import * as React from "react"
 import Link from "next/link"
-import type { Category } from "@/types"
+import { BoxIcon } from "@radix-ui/react-icons"
 
-import { getProductCount } from "@/lib/actions/product"
+import { getProductCount, type getCategories } from "@/lib/actions/product"
 import {
   Card,
   CardContent,
@@ -13,23 +13,25 @@ import {
 import { Skeleton } from "@/components/ui/skeleton"
 
 interface CategoryCardProps {
-  category: Category
+  category: Awaited<ReturnType<typeof getCategories>>[number]
 }
 
 export function CategoryCard({ category }: CategoryCardProps) {
-  const productCountPromise = getProductCount({ category })
+  const productCountPromise = getProductCount({
+    categoryName: category.name,
+  })
 
   return (
-    <Link href={`/categories/${category.title}`}>
-      <span className="sr-only">{category.title}</span>
+    <Link href={`/categories/${category.name}`}>
+      <span className="sr-only">{category.name}</span>
       <Card className="relative flex size-full flex-col items-center justify-center overflow-hidden rounded-lg bg-transparent transition-colors hover:bg-muted/50">
         <CardHeader>
           <div className="grid size-11 place-items-center rounded-full border-2">
-            <category.icon className="size-5" aria-hidden="true" />
+            <BoxIcon className="size-5" aria-hidden="true" />
           </div>
         </CardHeader>
         <CardContent className="flex flex-col items-center space-y-1.5">
-          <CardTitle className="capitalize">{category.title}</CardTitle>
+          <CardTitle className="capitalize">{category.name}</CardTitle>
           <React.Suspense fallback={<Skeleton className="h-4 w-20" />}>
             <ProductCount productCountPromise={productCountPromise} />
           </React.Suspense>
@@ -46,5 +48,5 @@ interface ProductCountProps {
 async function ProductCount({ productCountPromise }: ProductCountProps) {
   const { data } = await productCountPromise
 
-  return <CardDescription>{data} products</CardDescription>
+  return <CardDescription>{data.count} products</CardDescription>
 }

src/app/(lobby)/_components/lobby-skeleton.tsx

@@ -1,14 +1,13 @@
 import Link from "next/link"
 
-import { productCategories } from "@/config/product"
 import { Button } from "@/components/ui/button"
 import { Skeleton } from "@/components/ui/skeleton"
 import { ContentSection } from "@/components/shells/content-section"
 import { Shell } from "@/components/shells/shell"
 import { ProductCardSkeleton } from "@/components/skeletons/product-card-skeleton"
 import { StoreCardSkeleton } from "@/components/skeletons/store-card-skeleton"
 
-import { CategoryCard } from "./category-card"
+import { CategoryCardSkeleton } from "./category-card-skeleton"
 
 export function LobbySkeleton() {
   return (
@@ -39,8 +38,8 @@ export function LobbySkeleton() {
         </div>
       </section>
       <section className="grid grid-cols-1 gap-4 xs:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-        {productCategories.map((category) => (
-          <CategoryCard key={category.title} category={category} />
+        {Array.from({ length: 4 }).map((_, i) => (
+          <CategoryCardSkeleton key={i} />
         ))}
       </section>
       <ContentSection

src/app/(lobby)/_components/lobby.tsx

@@ -1,9 +1,8 @@
 import Link from "next/link"
 
-import { productCategories } from "@/config/product"
 import { siteConfig } from "@/config/site"
 import { type getGithubStars } from "@/lib/actions/github"
-import { type getFeaturedProducts } from "@/lib/actions/product"
+import type { getCategories, getFeaturedProducts } from "@/lib/actions/product"
 import { type getFeaturedStores } from "@/lib/actions/store"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
@@ -16,21 +15,24 @@ import { Shell } from "@/components/shells/shell"
 import { CategoryCard } from "./category-card"
 
 interface LobbyProps {
+  githubStarsPromise: ReturnType<typeof getGithubStars>
   productsPromise: ReturnType<typeof getFeaturedProducts>
+  categoriesPromise: ReturnType<typeof getCategories>
   storesPromise: ReturnType<typeof getFeaturedStores>
-  githubStarsPromise: ReturnType<typeof getGithubStars>
 }
 
 export async function Lobby({
+  githubStarsPromise,
   productsPromise,
+  categoriesPromise,
   storesPromise,
-  githubStarsPromise,
 }: LobbyProps) {
   // See the "Parallel data fetching" docs: https://nextjs.org/docs/app/building-your-application/data-fetching/patterns#parallel-data-fetching
-  const [products, stores, githubStars] = await Promise.all([
+  const [githubStars, products, categories, stores] = await Promise.all([
+    githubStarsPromise,
     productsPromise,
+    categoriesPromise,
     storesPromise,
-    githubStarsPromise,
   ])
 
   return (
@@ -80,8 +82,8 @@ export async function Lobby({
         </div>
       </section>
       <section className="grid grid-cols-1 gap-4 xs:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-        {productCategories.map((category) => (
-          <CategoryCard key={category.title} category={category} />
+        {categories.map((category) => (
+          <CategoryCard key={category.name} category={category} />
         ))}
       </section>
       <ContentSection

src/app/(lobby)/page.tsx

@@ -1,20 +1,26 @@
 import * as React from "react"
 
 import { getGithubStars } from "@/lib/actions/github"
-import { getFeaturedProducts } from "@/lib/actions/product"
+import { getCategories, getFeaturedProducts } from "@/lib/actions/product"
 import { getFeaturedStores } from "@/lib/actions/store"
 
 import { Lobby } from "./_components/lobby"
 import { LobbySkeleton } from "./_components/lobby-skeleton"
 
 export default function IndexPage() {
+  const githubStarsPromise = getGithubStars()
   const productsPromise = getFeaturedProducts()
+  const categoriesPromise = getCategories()
   const storesPromise = getFeaturedStores()
-  const githubStarsPromise = getGithubStars()
 
   return (
     <React.Suspense fallback={<LobbySkeleton />}>
-      <Lobby {...{ githubStarsPromise, productsPromise, storesPromise }} />
+      <Lobby
+        githubStarsPromise={githubStarsPromise}
+        productsPromise={productsPromise}
+        categoriesPromise={categoriesPromise}
+        storesPromise={storesPromise}
+      />
     </React.Suspense>
   )
 }

src/components/cards/product-card.tsx

@@ -8,7 +8,7 @@ import { CheckIcon, EyeOpenIcon, PlusIcon } from "@radix-ui/react-icons"
 import { toast } from "sonner"
 
 import { addToCart } from "@/lib/actions/cart"
-import { catchError, cn, formatPrice } from "@/lib/utils"
+import { cn, formatPrice } from "@/lib/utils"
 import { AspectRatio } from "@/components/ui/aspect-ratio"
 import { Button, buttonVariants } from "@/components/ui/button"
 import {
@@ -23,10 +23,9 @@ import { Icons } from "@/components/icons"
 import { PlaceholderImage } from "@/components/placeholder-image"
 
 interface ProductCardProps extends React.HTMLAttributes<HTMLDivElement> {
-  product: Pick<
-    Product,
-    "id" | "name" | "price" | "images" | "category" | "inventory"
-  >
+  product: Pick<Product, "id" | "name" | "price" | "images" | "inventory"> & {
+    category: string | null
+  }
   variant?: "default" | "switchable"
   isAddedToCart?: boolean
   onSwitch?: () => Promise<void>
@@ -40,7 +39,7 @@ export function ProductCard({
   className,
   ...props
 }: ProductCardProps) {
-  const [isAddingToCart, startAddingToCart] = React.useTransition()
+  const [isUpdatePending, startUpdateTransition] = React.useTransition()
 
   return (
     <Card
@@ -83,22 +82,20 @@ export function ProductCard({
               aria-label="Add to cart"
               size="sm"
               className="h-8 w-full rounded-sm"
-              onClick={() => {
-                startAddingToCart(async () => {
-                  try {
-                    await addToCart({
-                      productId: product.id,
-                      quantity: 1,
-                    })
-                    toast.success("Added to cart.")
-                  } catch (err) {
-                    catchError(err)
-                  }
+              onClick={async () => {
+                startUpdateTransition(() => {})
+                const { error } = await addToCart({
+                  productId: product.id,
+                  quantity: 1,
                 })
+
+                if (error) {
+                  toast.error(error)
+                }
               }}
-              disabled={isAddingToCart}
+              disabled={isUpdatePending}
             >
-              {isAddingToCart && (
+              {isUpdatePending && (
                 <Icons.spinner
                   className="mr-2 size-4 animate-spin"
                   aria-hidden="true"
@@ -126,14 +123,13 @@ export function ProductCard({
             aria-label={isAddedToCart ? "Remove from cart" : "Add to cart"}
             size="sm"
             className="h-8 w-full rounded-sm"
-            onClick={() => {
-              startAddingToCart(async () => {
-                await onSwitch?.()
-              })
+            onClick={async () => {
+              startUpdateTransition(async () => {})
+              await onSwitch?.()
             }}
-            disabled={isAddingToCart}
+            disabled={isUpdatePending}
           >
-            {isAddingToCart ? (
+            {isUpdatePending ? (
               <Icons.spinner
                 className="mr-2 size-4 animate-spin"
                 aria-hidden="true"

src/components/pagers/store-tabs.tsx

@@ -9,7 +9,7 @@ import { ScrollArea } from "@/components/ui/scroll-area"
 import { Separator } from "@/components/ui/separator"
 
 interface StoreTabsProps {
-  storeId: number
+  storeId: string
 }
 
 export function StoreTabs({ storeId }: StoreTabsProps) {