Refactor mosaic

src/app/portfolio/images/page.tsx

@@ -5,31 +5,50 @@ import prisma from "@/lib/prisma";
 import { PlusCircleIcon } from "lucide-react";
 import Link from "next/link";
 
-export default async function PortfolioImagesPage(
-  { searchParams }:
-    { searchParams: { type: string, published: string } }
+export default async function PortfolioImagesPage({
+  searchParams
+}: {
+  searchParams?: {
+    type?: string;
+    published?: string;
+    groupBy?: string;
+    year?: string;
+    album?: string;
+  }
+}
 ) {
-  const { type, published } = await searchParams;
+  const {
+    type = "all",
+    published = "all",
+    groupBy = "year",
+    year,
+    album,
+  } = searchParams ?? {};
 
-  const types = await prisma.portfolioType.findMany({
-    orderBy: { sortIndex: "asc" },
-  });
-
-  const typeFilter = type ?? "all";
-  const publishedFilter = published ?? "all";
+  const groupMode = groupBy === "album" ? "album" : "year";
+  const groupId = groupMode === "album" ? album ?? "all" : year ?? "all";
 
   const where: Prisma.PortfolioImageWhereInput = {};
 
-  if (typeFilter !== "all") {
-    where.typeId = typeFilter === "none" ? null : typeFilter;
+  // Filter by type
+  if (type !== "all") {
+    where.typeId = type === "none" ? null : type;
   }
 
-  if (publishedFilter === "published") {
+  // Filter by published status
+  if (published === "published") {
     where.published = true;
-  } else if (publishedFilter === "unpublished") {
+  } else if (published === "unpublished") {
     where.published = false;
   }
 
+  // Filter by group (year or album)
+  if (groupMode === "year" && groupId !== "all") {
+    where.year = parseInt(groupId);
+  } else if (groupMode === "album" && groupId !== "all") {
+    where.albumId = groupId;
+  }
+
   const images = await prisma.portfolioImage.findMany(
     {
       where,
@@ -37,6 +56,21 @@ export default async function PortfolioImagesPage(
     }
   )
 
+  const [types, albums, yearsRaw] = await Promise.all([
+    prisma.portfolioType.findMany({ orderBy: { sortIndex: "asc" } }),
+    prisma.portfolioAlbum.findMany({ orderBy: { sortIndex: "asc" } }),
+    prisma.portfolioImage.findMany({
+      where: {},
+      distinct: ['year'],
+      select: { year: true },
+      orderBy: { year: 'desc' },
+    }),
+  ]);
+
+  const years = yearsRaw
+    .map((y) => y.year)
+    .filter((y): y is number => y !== null && y !== undefined);
+
   return (
     <div>
       <div className="flex justify-between pb-4 items-end">
@@ -46,7 +80,15 @@ export default async function PortfolioImagesPage(
         </Link>
       </div>
 
-      <FilterBar types={types} currentType={typeFilter} currentPublished={publishedFilter} />
+      <FilterBar
+        types={types}
+        albums={albums}
+        years={years}
+        currentType={type}
+        currentPublished={published}
+        groupBy={groupMode}
+        groupId={groupId}
+      />
       <div className="mt-6">
         {images && images.length > 0 ? <ImageList images={images} /> : <p>There are no images yet. Consider adding some!</p>}
       </div>