Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

trying to make the cart functional #126

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

trying to make the cart functional #126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 52 additions & 2 deletions src/app/(lobby)/build-a-board/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { type Metadata } from "next"
import { cookies } from "next/headers"
import Link from "next/link"
import { db } from "@/db"
import { carts } from "@/db/schema"
import { carts, products, stores } from "@/db/schema"
import { eq } from "drizzle-orm"

import { productCategories } from "@/config/products"
Expand All @@ -13,6 +13,7 @@ import { Icons } from "@/components/icons"
import { Shell } from "@/components/shell"
import { getCartItemsAction } from "@/app/_actions/cart"
import { getProductsAction } from "@/app/_actions/product"
import { desc } from "drizzle-orm"

export const metadata: Metadata = {
title: "Build a Board",
Expand All @@ -24,6 +25,14 @@ interface BuildABoadPageProps {
[key: string]: string | string[] | undefined
}
}
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import { ProductCard } from "@/components/product-card"

export default async function BuildABoardPage({
searchParams,
Expand All @@ -49,6 +58,17 @@ export default async function BuildABoardPage({
// Get cart items
const cartItems = await getCartItemsAction()

const allProducts = await db
.select()
.from(products)
.limit(8)
.orderBy(desc(products.createdAt))

const allStores = await db
.select()
.from(stores)
.limit(4)
.orderBy(desc(stores.createdAt))
return (
<Shell className="gap-4">
<Header
Expand All @@ -69,7 +89,7 @@ export default async function BuildABoardPage({
className={cn(
"inline-flex items-center justify-center whitespace-nowrap rounded border-b-2 border-transparent px-3 py-1.5 text-sm font-medium ring-offset-background transition-all hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
subcategory.slug === activeSubcategory &&
"rounded-none border-primary text-foreground hover:rounded-t"
"rounded-none border-primary text-foreground hover:rounded-t"
)}
>
{cartItems
Expand All @@ -86,11 +106,41 @@ export default async function BuildABoardPage({
</div>
</div>
</div>
{allProducts.map((product) => (
<ProductCard key={product.id} product={product} />
))}
{allStores.map((store) => (
<Card key={store.id} className="flex h-full flex-col">
<CardHeader className="flex-1">
<CardTitle className="line-clamp-1">{store.name}</CardTitle>
<CardDescription className="line-clamp-2">
{store.description}
</CardDescription>
</CardHeader>
<CardContent>

<Link href={`/products?store_ids=${store.id}`}>
<div
// className={cn(
// // buttonVariants({
// // size: "sm",
// // className: "h-8 w-full",
// // })
// )}
>
View products
<span className="sr-only">{`${store.name} store products`}</span>
</div>
</Link>
</CardContent>
</Card>
))}
<BoardBuilder
products={productsTransaction.items}
pageCount={pageCount}
subcategory={activeSubcategory}
cartItems={cartItems ?? []}
app={allProducts}
/>
</Shell>
)
Expand Down
12 changes: 9 additions & 3 deletions src/app/(lobby)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { Header } from "@/components/header"
import { Hero } from "@/components/hero"
import { ProductCard } from "@/components/product-card"
import { Shell } from "@/components/shell"
import { BoardBuilder } from "@/components/board-builder"

export const runtime = "edge"

Expand Down Expand Up @@ -173,9 +174,8 @@ export default async function IndexPage() {
]?.subcategories.map((subcategory) => (
<Link
key={subcategory.slug}
href={`/categories/${String(productCategories[0]?.title)}/${
subcategory.slug
}`}
href={`/categories/${String(productCategories[0]?.title)}/${subcategory.slug
}`}
>
<Badge variant="secondary" className="rounded px-3 py-1">
{subcategory.title}
Expand All @@ -184,6 +184,12 @@ export default async function IndexPage() {
</Link>
))}
</div>
{/* <BoardBuilder
products={productsTransaction.items}
pageCount={pageCount}
subcategory={activeSubcategory}
cartItems={cartItems ?? []}
/> */}
</Shell>
</div>
)
Expand Down
14 changes: 7 additions & 7 deletions src/app/_actions/cart.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,14 +66,14 @@ export async function getCartItemsAction() {
// throw new Error("Invalid cartId, please try again.")
// }

if (!cartId) {
const cart = await db.insert(carts).values({
items: [],
})
// if (!cartId) {
// const cart = await db.insert(carts).values({
// items: [],
// })

// Convert to string because cookieStore.set() only accepts string values
cookieStore.set("cartId", String(cart.insertId))
}
// // Convert to string because cookieStore.set() only accepts string values
// cookieStore.set("cartId", String(cart.insertId))
// }

const cart = await db.query.carts.findFirst({
where: eq(carts.id, cartId),
Expand Down
19 changes: 16 additions & 3 deletions src/components/board-builder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@

import * as React from "react"
import { usePathname, useRouter, useSearchParams } from "next/navigation"
import { type Product } from "@/db/schema"
import { productsRelations, type Product,products as PR } from "@/db/schema"
import type { CartItem } from "@/types"
import { toast } from "sonner"
// import { carts, products, stores } from "@/db/schema"
import { db } from "@/db"

import { sortOptions } from "@/config/products"
import { cn } from "@/lib/utils"
Expand Down Expand Up @@ -33,25 +35,35 @@ import { Icons } from "@/components/icons"
import { PaginationButton } from "@/components/pagination-button"
import { ProductCard } from "@/components/product-card"
import { addToCartAction, deleteCartItemAction } from "@/app/_actions/cart"
import { desc } from "drizzle-orm"

interface BoardBuilderProps {
products: Product[]
pageCount: number
subcategory: string | null
cartItems: CartItem[]
app?: any
}

export function BoardBuilder({
export function BoardBuilder({
products,
pageCount,
subcategory,
cartItems,
app
}: BoardBuilderProps) {
const router = useRouter()
const pathname = usePathname()
const searchParams = useSearchParams()
const [isPending, startTransition] = React.useTransition()


// const allProducts = await db
// .select()
// .from(app)
// .limit(8)
// .orderBy(desc(app.createdAt))

// Search params
const page = searchParams?.get("page") ?? "1"
const per_page = searchParams?.get("per_page") ?? "8"
Expand Down Expand Up @@ -79,6 +91,7 @@ export function BoardBuilder({
const [priceRange, setPriceRange] = React.useState<[number, number]>([0, 100])
const debouncedPrice = useDebounce(priceRange, 500)


React.useEffect(() => {
const [min, max] = debouncedPrice
startTransition(() => {
Expand Down Expand Up @@ -254,7 +267,7 @@ export function BoardBuilder({
</div>
) : null}
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{products.map((product) => (
{app?.map((product) => (
<ProductCard
key={product.id}
variant="switchable"
Expand Down