Skip to content

Commit

Permalink
Merge pull request #26 from ethanniser/new-db
Browse files Browse the repository at this point in the history
Make site work with 1m data
  • Loading branch information
RhysSullivan authored Oct 21, 2024
2 parents aad5453 + fe62d4c commit 14b2279
Show file tree
Hide file tree
Showing 5 changed files with 118 additions and 59 deletions.
53 changes: 53 additions & 0 deletions src/app/(category-sidebar)/[collection]/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { Link } from "@/components/ui/link";
import { db } from "@/db";
import { products } from "@/db/schema";
import { count } from "drizzle-orm";
import Image from "next/image";

export default async function Home(props: {
params: {
collection: string;
};
}) {
const collections = await db.query.collections.findMany({
with: {
categories: true,
},
where: (collections, { eq }) =>
eq(collections.name, decodeURIComponent(props.params.collection)),
orderBy: (collections, { asc }) => asc(collections.name),
});
let imageCount = 0;

return (
<div className="w-full p-4">
{collections.map((collection) => (
<div key={collection.name}>
<h2 className="text-xl font-semibold">{collection.name}</h2>
<div className="flex flex-row flex-wrap justify-center gap-2 border-b-2 py-4 sm:justify-start">
{collection.categories.map((category) => (
<Link
prefetch={true}
key={category.name}
className="flex w-[125px] flex-col items-center text-center"
href={`/products/${category.slug}`}
>
<Image
loading={imageCount++ < 15 ? "eager" : "lazy"}
decoding="sync"
src={category.image_url ?? "/placeholder.svg"}
alt={`A small picture of ${category.name}`}
className="mb-2 h-14 w-14 border hover:bg-yellow-200"
width={48}
height={48}
quality={65}
/>
<span className="text-xs">{category.name}</span>
</Link>
))}
</div>
</div>
))}
</div>
);
}
17 changes: 11 additions & 6 deletions src/app/(category-sidebar)/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,15 @@ export default async function Layout({
}: {
children: React.ReactNode;
}) {
const allCategories = await db.query.categories.findMany({
orderBy: (categories, { asc }) => asc(categories.name),
const allCategories = await db.query.collections.findMany({
with: {
categories: true,
},
orderBy: (collections, { asc }) => asc(collections.name),
});
return (
<div className="flex flex-grow font-helvetica-roman">
<aside className="hidden w-48 min-w-48 border-r border-gray-400 p-3 md:block">
<div className="flex flex-grow overflow-hidden font-helvetica-roman">
<aside className="sticky hidden h-screen w-64 min-w-64 max-w-64 border-r p-4 md:block">
<h2 className="border-b border-green-800 text-sm font-semibold text-green-900">
Choose a Category
</h2>
Expand All @@ -20,7 +23,7 @@ export default async function Layout({
<li key={category.name} className="w-full">
<Link
prefetch={true}
href={`/products/${category.slug}`}
href={`/${category.name}`}
className="block w-full py-1 text-xs text-gray-800 hover:bg-yellow-100 hover:underline"
>
{category.name}
Expand All @@ -29,7 +32,9 @@ export default async function Layout({
))}
</ul>
</aside>
<main className="flex-grow">{children}</main>
<main className="h-[calc(100vh-73px)] flex-grow overflow-y-auto p-4 pt-0">
{children}
</main>
</div>
);
}
6 changes: 3 additions & 3 deletions src/app/(category-sidebar)/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,17 @@ export default async function Home() {
return (
<div className="w-full p-4">
<div className="mb-2 w-full flex-grow border-b-[1px] border-green-800 text-sm font-semibold text-black">
Explore {productCount.at(0)?.count} products
Explore {productCount.at(0)?.count.toLocaleString()} products
</div>
{collections.map((collection) => (
<div key={collection.name}>
<h2 className="text-xl font-semibold">{collection.name}</h2>
<div className="grid grid-cols-2 gap-4 border-b-2 py-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
<div className="flex flex-row flex-wrap justify-center gap-2 border-b-2 py-4 sm:justify-start">
{collection.categories.map((category) => (
<Link
prefetch={true}
key={category.name}
className="flex flex-col items-center text-center"
className="flex w-[125px] flex-col items-center text-center"
href={`/products/${category.slug}`}
>
<Image
Expand Down
98 changes: 49 additions & 49 deletions src/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,24 +54,24 @@ export default async function RootLayout({
return (
<html lang="en" className="h-full">
<body
className={`${helvetica.variable} ${helveticaRoman.variable} ${futura.variable} flex min-h-full flex-col antialiased`}
className={`${helvetica.variable} ${helveticaRoman.variable} ${futura.variable} flex min-h-full flex-col overflow-y-hidden antialiased`}
>
<div className="flex flex-grow flex-col">
<div className="flex w-full justify-end px-4 pt-2 text-sm hover:underline">
<Suspense
fallback={
<button className="flex flex-row items-center gap-1">
<div className="h-[20px]" />
<svg viewBox="0 0 10 6" className="h-[6px] w-[10px]">
<polygon points="0,0 5,6 10,0"></polygon>
</svg>
</button>
}
>
<AuthServer />
</Suspense>
</div>
<header className="flex flex-col items-center justify-between gap-4 border-b-2 border-yellow-300 p-2 pb-[4px] pt-2 font-futura sm:flex-row sm:p-4 sm:pb-[4px] sm:pt-0">
<header className="sticky top-0 z-10 flex w-[100vw] flex-grow flex-col items-center justify-between gap-4 border-b-2 border-yellow-300 bg-background p-2 pb-[4px] pt-2 font-futura sm:flex-row sm:p-4 sm:pb-[4px] sm:pt-0">
<div className="flex flex-grow flex-col">
<div className="flex w-full justify-end px-4 pt-2 font-sans text-sm hover:underline">
<Suspense
fallback={
<button className="flex flex-row items-center gap-1">
<div className="h-[20px]" />
<svg viewBox="0 0 10 6" className="h-[6px] w-[10px]">
<polygon points="0,0 5,6 10,0"></polygon>
</svg>
</button>
}
>
<AuthServer />
</Suspense>
</div>
<div className="flex w-full items-center justify-center sm:w-auto">
<Link
prefetch={true}
Expand All @@ -80,45 +80,45 @@ export default async function RootLayout({
>
NextMaster
</Link>
</div>
<div className="items flex w-full flex-row items-center justify-between gap-4">
<div className="mx-0 flex-grow sm:mx-auto sm:flex-grow-0">
<SearchDropdownComponent />
</div>
<div className="flex flex-row justify-between space-x-4">
<div className="relative">
<div className="items flex w-full flex-row items-center justify-between gap-4">
<div className="mx-0 flex-grow sm:mx-auto sm:flex-grow-0">
<SearchDropdownComponent />
</div>
<div className="flex flex-row justify-between space-x-4">
<div className="relative">
<Link
prefetch={true}
href="/order"
className="text-lg text-green-800 hover:underline"
>
ORDER
</Link>
<Suspense>
<Cart />
</Suspense>
</div>
<Link
prefetch={true}
href="/order-history"
className="hidden text-lg text-green-800 hover:underline md:block"
>
ORDER HISTORY
</Link>
<Link
prefetch={true}
href="/order"
className="text-lg text-green-800 hover:underline"
href="/order-history"
aria-label="Order History"
className="block text-lg text-green-800 hover:underline md:hidden"
>
ORDER
<MenuIcon />
</Link>
<Suspense>
<Cart />
</Suspense>
</div>
<Link
prefetch={true}
href="/order-history"
className="hidden text-lg text-green-800 hover:underline md:block"
>
ORDER HISTORY
</Link>
<Link
prefetch={true}
href="/order-history"
aria-label="Order History"
className="block text-lg text-green-800 hover:underline md:hidden"
>
<MenuIcon />
</Link>
</div>
</div>
</header>
{children}
</div>
<footer className="flex h-auto flex-col items-center justify-between space-y-2 border-t border-gray-400 px-4 font-helvetica text-[11px] sm:h-6 sm:flex-row sm:space-y-0">
</div>
</header>
{children}
<footer className="sticky bottom-0 flex h-auto flex-col items-center justify-between space-y-2 border-t border-gray-400 bg-background px-4 font-helvetica text-[11px] sm:h-6 sm:flex-row sm:space-y-0">
<div className="flex flex-wrap justify-center space-x-2 pt-2 sm:justify-start">
<span className="hover:bg-yellow-100 hover:underline">Home</span>
<span>|</span>
Expand Down
3 changes: 2 additions & 1 deletion src/components/ui/link.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@ async function prefetchImages(href: string) {
const imageResponse = await fetch(`/api/prefetch-images${url.pathname}`, {
priority: "low",
});
if (!imageResponse.ok) {
// only throw in dev
if (!imageResponse.ok && process.env.NODE_ENV === "development") {
throw new Error("Failed to prefetch images");
}
const { images } = await imageResponse.json();
Expand Down

0 comments on commit 14b2279

Please sign in to comment.