update product-card

src/app/(lobby)/page.tsx

@@ -33,6 +33,7 @@ export default async function IndexPage() {
           category: products.category,
           price: products.price,
           inventory: products.inventory,
+          rating: products.rating,
           stripeAccountId: stores.stripeAccountId,
         })
         .from(products)

src/app/(lobby)/product/[productId]/page.tsx

@@ -4,7 +4,7 @@ import { notFound } from "next/navigation"
 import { db } from "@/db"
 import { products, stores } from "@/db/schema"
 import { env } from "@/env.mjs"
-import { and, desc, eq, not } from "drizzle-orm"
+import { and, desc, eq, not, sql } from "drizzle-orm"
 
 import { formatPrice, toTitleCase } from "@/lib/utils"
 import {
@@ -87,6 +87,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
           images: products.images,
           category: products.category,
           inventory: products.inventory,
+          rating: products.rating,
         })
         .from(products)
         .limit(4)

src/components/cards/product-card.tsx

@@ -4,10 +4,16 @@ import * as React from "react"
 import Image from "next/image"
 import Link from "next/link"
 import { type Product } from "@/db/schema"
-import { CheckIcon, PlusIcon } from "@radix-ui/react-icons"
+import {
+  CheckIcon,
+  EyeOpenIcon,
+  HeartIcon,
+  PlusIcon,
+} from "@radix-ui/react-icons"
 import { toast } from "sonner"
 
 import { addToCart } from "@/lib/actions/cart"
+import { updateProductRating } from "@/lib/actions/product"
 import { catchError, cn, formatPrice } from "@/lib/utils"
 import { AspectRatio } from "@/components/ui/aspect-ratio"
 import { Button } from "@/components/ui/button"
@@ -21,10 +27,12 @@ import {
 } from "@/components/ui/card"
 import { Icons } from "@/components/icons"
 
+import { Rating } from "../rating"
+
 interface ProductCardProps extends React.HTMLAttributes<HTMLDivElement> {
   product: Pick<
     Product,
-    "id" | "name" | "price" | "images" | "category" | "inventory"
+    "id" | "name" | "price" | "images" | "category" | "inventory" | "rating"
   >
   variant?: "default" | "switchable"
   isAddedToCart?: boolean
@@ -39,7 +47,8 @@ export function ProductCard({
   className,
   ...props
 }: ProductCardProps) {
-  const [isPending, startTransition] = React.useTransition()
+  const [isAddingToCart, startAddingToCart] = React.useTransition()
+  const [isFavoriting, startFavoriting] = React.useTransition()
 
   return (
     <Card
@@ -78,55 +87,98 @@ export function ProductCard({
         <span className="sr-only">{product.name}</span>
       </Link>
       <Link href={`/product/${product.id}`} tabIndex={-1}>
-        <CardContent className="grid gap-2.5 p-4">
+        <CardContent className="space-y-1.5 p-4">
           <CardTitle className="line-clamp-1">{product.name}</CardTitle>
-          <CardDescription className="line-clamp-2">
+          <CardDescription className="line-clamp-1">
             {formatPrice(product.price)}
           </CardDescription>
+          <Rating rating={Math.round(product.rating / 10)} />
         </CardContent>
       </Link>
-      <CardFooter className="p-4">
+      <CardFooter className="p-4 pt-2.5">
         {variant === "default" ? (
-          <Button
-            aria-label="Add to cart"
-            size="sm"
-            className="h-8 w-full rounded-sm"
-            onClick={() => {
-              startTransition(async () => {
-                try {
-                  await addToCart({
-                    productId: product.id,
-                    quantity: 1,
-                  })
-                  toast.success("Added to cart.")
-                } catch (err) {
-                  catchError(err)
-                }
-              })
-            }}
-            disabled={isPending}
-          >
-            {isPending && (
-              <Icons.spinner
-                className="mr-2 h-4 w-4 animate-spin"
-                aria-hidden="true"
-              />
-            )}
-            Add to cart
-          </Button>
+          <div className="flex w-full items-center space-x-2">
+            <Button
+              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)
+                  }
+                })
+              }}
+              disabled={isAddingToCart}
+            >
+              {isAddingToCart && (
+                <Icons.spinner
+                  className="mr-2 h-4 w-4 animate-spin"
+                  aria-hidden="true"
+                />
+              )}
+              Add to cart
+            </Button>
+            <Button
+              title="Favorite"
+              variant="secondary"
+              size="icon"
+              className="h-8 w-8 shrink-0"
+              onClick={() => {
+                startFavoriting(async () => {
+                  try {
+                    await updateProductRating({
+                      id: product.id,
+                      rating: product.rating + 1,
+                    })
+                    toast.success("Favorited product.")
+                  } catch (err) {
+                    catchError(err)
+                  }
+                })
+              }}
+              disabled={isFavoriting}
+            >
+              {isFavoriting ? (
+                <Icons.spinner
+                  className="h-4 w-4 animate-spin"
+                  aria-hidden="true"
+                />
+              ) : (
+                <HeartIcon className="h-4 w-4" aria-hidden="true" />
+              )}
+              <span className="sr-only">Favorite</span>
+            </Button>
+            <Button
+              title="Preview"
+              variant="secondary"
+              size="icon"
+              className="h-8 w-8 shrink-0"
+              disabled={isFavoriting}
+            >
+              <EyeOpenIcon className="h-4 w-4" aria-hidden="true" />
+              <span className="sr-only">Preview</span>
+            </Button>
+          </div>
         ) : (
           <Button
             aria-label={isAddedToCart ? "Remove from cart" : "Add to cart"}
             size="sm"
             className="h-8 w-full rounded-sm"
             onClick={() => {
-              startTransition(async () => {
+              startAddingToCart(async () => {
                 await onSwitch?.()
               })
             }}
-            disabled={isPending}
+            disabled={isAddingToCart}
           >
-            {isPending ? (
+            {isAddingToCart ? (
               <Icons.spinner
                 className="mr-2 h-4 w-4 animate-spin"
                 aria-hidden="true"

src/components/rating.tsx

@@ -0,0 +1,24 @@
+import { StarIcon } from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+
+interface RatingProps {
+  rating: number
+}
+
+export function Rating({ rating }: RatingProps) {
+  return (
+    <div className="flex items-center space-x-1">
+      {Array.from({ length: 5 }).map((_, i) => (
+        <StarIcon
+          key={i}
+          className={cn(
+            "h-4 w-4",
+            rating >= i + 1 ? "text-yellow-500" : "text-muted-foreground"
+          )}
+          aria-hidden="true"
+        />
+      ))}
+    </div>
+  )
+}

src/components/skeletons/product-card-skeleton.tsx

@@ -11,11 +11,11 @@ export function ProductCardSkeleton() {
           <PlaceholderImage asChild className="rounded-none" />
         </AspectRatio>
       </CardHeader>
-      <CardContent className="grid gap-2.5 p-4">
+      <CardContent className="space-y-1.5 p-4">
         <Skeleton className="h-4 w-1/2" />
         <Skeleton className="h-4 w-1/4" />
       </CardContent>
-      <CardFooter className="p-4">
+      <CardFooter className="p-4 pt-2.5">
         <Skeleton className="h-8 w-full" />
       </CardFooter>
     </Card>

src/lib/actions/product.ts

@@ -8,7 +8,11 @@ import { and, desc, eq, like, not } from "drizzle-orm"
 import { z } from "zod"
 
 import { getSubcategories, productTags } from "@/config/products"
-import { getProductSchema, productSchema } from "@/lib/validations/product"
+import {
+  getProductSchema,
+  productSchema,
+  updateProductRatingSchema,
+} from "@/lib/validations/product"
 
 export async function seedProducts({
   storeId,
@@ -159,6 +163,31 @@ export async function updateProduct(
   revalidatePath(`/dashboard/stores/${input.storeId}/products/${input.id}`)
 }
 
+export async function updateProductRating(
+  rawInput: z.infer<typeof updateProductRatingSchema>
+) {
+  const input = updateProductRatingSchema.parse(rawInput)
+
+  const product = await db.query.products.findFirst({
+    columns: {
+      id: true,
+      rating: true,
+    },
+    where: eq(products.id, input.id),
+  })
+
+  if (!product) {
+    throw new Error("Product not found.")
+  }
+
+  await db
+    .update(products)
+    .set({ rating: input.rating })
+    .where(eq(products.id, input.id))
+
+  revalidatePath("/")
+}
+
 export async function deleteProduct(
   rawInput: z.infer<typeof getProductSchema>
 ) {

src/lib/validations/product.ts

@@ -51,3 +51,8 @@ export const getProductsSchema = z.object({
   store_ids: z.string().optional().nullable(),
   active: z.string().optional().nullable(),
 })
+
+export const updateProductRatingSchema = z.object({
+  id: z.number(),
+  rating: z.number(),
+})