feat: add product collections

src/modules/categories/server/procedures.ts

@@ -6,7 +6,8 @@ export const categoriesRouter = createTRPCRouter({
 
     const data = await ctx.db.find({
       collection: 'categories',
-      depth: 1,
+      depth: 1, // Populated subcategories, subcategories.[0] will be a type of "Category"
+      pagination: false,
       where: {
         parent: {
           exists: false,

src/modules/products/server/procedures.ts

@@ -0,0 +1,58 @@
+import type { Where } from "payload";
+import { baseProcedure, createTRPCRouter } from "@/trpc/init";
+import { z } from "zod";
+import { Category } from "@/payload-types";
+
+export const productsRouter = createTRPCRouter({
+  getMany: baseProcedure.input(z.object({
+    category: z.string().nullable().optional(),
+  })).query(async ({ ctx, input }) => {
+    const where: Where = {}
+
+    if (input.category) {
+      const categoriesData = await ctx.db.find({
+        collection: 'categories',
+        limit: 1,
+        depth: 1, // Populated subcategories, subcategories.[0] will be a type of "Category"
+        pagination: false,
+        where: {
+          slug: {
+            equals: input.category
+          }
+        }
+      })
+
+      const formattedData = categoriesData.docs.map((category) => ({
+        ...category,
+        subcategories: (category.subcategories?.docs ?? []).map((doc) => ({
+          // Because of "depth: 1" we are confident "doc" will be a tpe of "Category"
+          ...(doc as Category),
+          subcategories: undefined,
+        })),
+      }));
+
+      const subCategoriesSlugs = [];
+      const parentCategory = formattedData[0];
+
+      if (parentCategory) {
+        subCategoriesSlugs.push(
+          ...parentCategory.subcategories.map((subcategory) => subcategory.slug)
+        );
+      }
+
+      if (parentCategory) {
+        where['category.slug'] = {
+          in: [parentCategory.slug, ...subCategoriesSlugs],
+        }
+      }
+    }
+
+    const data = await ctx.db.find({
+      collection: 'products',
+      depth: 1, // Populated "category" & "image"
+      where,
+    });
+
+    return data;
+  })
+})

src/modules/products/type.ts

@@ -0,0 +1,5 @@
+import { inferRouterOutputs } from "@trpc/server";
+
+import { AppRouter } from "@/trpc/routers/_app";
+
+export type ProductsGetManyOutput = inferRouterOutputs<AppRouter>["products"]["getMany"];

src/modules/products/ui/components/product-list.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { useTRPC } from '@/trpc/client';
+
+interface Props {
+	category: string;
+}
+
+
+export const ProductList = ({ category }: Props) => {
+	const trpc = useTRPC();
+	const { data } = useSuspenseQuery(trpc.products.getMany.queryOptions({
+		category
+	}));
+
+	return <div>{JSON.stringify(data)}</div>;
+};
+
+export const ProductListSkeleton = () => {
+	return <div>Loading...</div>;
+};