Replace the categories page API with an Astro Action.

Author: jyasskin

webserver/src/actions/index.ts

@@ -1,7 +1,9 @@
-import cookingHistory from './cooking-history';
+import cookingHistory from "./cooking-history";
+import { recipesInCategory } from "./recipes-in-category";
 import recipesInMonth from "./recipes-in-month";
 
 export const server = {
   cookingHistory,
   recipesInMonth,
+  recipesInCategory
 };

webserver/src/actions/recipes-in-category.ts

@@ -0,0 +1,52 @@
+import { getLogin } from "@lib/login-cookie";
+import { prisma } from "@lib/prisma";
+import type { CookingHistory, Prisma } from "@prisma/client";
+import { defineAction, type ActionAPIContext } from "astro:actions";
+import { z } from "astro:schema";
+
+export type RecipesInCategoryResponse = {
+  name: string;
+  slug: string;
+  author: {
+    username: string;
+  };
+  cookingHistory: CookingHistory[] | undefined;
+}[];
+
+const input = z.object({
+  categoryIds: z.array(z.number().int()),
+  author: z.string().optional(),
+});
+type Input = z.infer<typeof input>;
+
+async function handler(
+  { categoryIds, author }: Input,
+  { cookies }: ActionAPIContext
+): Promise<RecipesInCategoryResponse> {
+  const activeUser = await getLogin(cookies);
+
+  const where: Prisma.RecipeWhereInput = {
+    categories: {
+      some: {
+        id: { in: [...categoryIds] },
+      },
+    },
+  };
+  if (author !== null) {
+    where.author = { username: author };
+  }
+
+  return await prisma.recipe.findMany({
+    where,
+    select: {
+      name: true,
+      slug: true,
+      author: { select: { username: true } },
+      cookingHistory:
+        activeUser === null ? undefined : { where: { cookId: activeUser.id } },
+    },
+    orderBy: { name: "asc" },
+  });
+}
+
+export const recipesInCategory = defineAction({ input, handler });

webserver/src/components/CategoryList.tsx

@@ -1,5 +1,6 @@
-import { escapeRegExp, filterListWithInitialMatchesFirst } from '@lib/util';
-import type { Category } from '@prisma/client';
+import { escapeRegExp, filterListWithInitialMatchesFirst } from "@lib/util";
+import type { Category } from "@prisma/client";
+import { actions } from "astro:actions";
 import {
   type Accessor,
   type Component,
@@ -12,56 +13,47 @@ import {
   type Setter,
   Suspense,
 } from "solid-js";
-import { OneRecipe, type RecipeTitleWithLinkFields } from './OneRecipe';
-import { QueryDrivenTextField } from './QueryDrivenTextField';
-
-async function fetchRecipesForCategory(categoryId: number, username: string | undefined) {
-  const searchParams = new URLSearchParams();
-  searchParams.set("id", `${categoryId}`);
-  if (username) {
-    searchParams.set("user", username);
-  }
-  let response = await fetch(`/api/recipes-in-category?${searchParams.toString()}`);
-  let recipes = await response.json() as {
-    name: string;
-    slug: string;
-    author: {
-      username: string;
-    };
-  }[];
-  return recipes;
-}
+import { OneRecipe, type RecipeTitleWithLinkFields } from "./OneRecipe";
+import { QueryDrivenTextField } from "./QueryDrivenTextField";
 
 export const CategoryList: Component<{
   categories: Category[];
-  username?: string;
   initialQuery: string;
-}> = props => {
+}> = (props) => {
   // Keeping the search filter updated:
-  const [filter, setFilter] = createSignal(new URLSearchParams(props.initialQuery).get("filter") ?? "");
+  const [filter, setFilter] = createSignal(
+    new URLSearchParams(props.initialQuery).get("filter") ?? ""
+  );
 
   // Search for categories:
 
-  const filterRE = createMemo(() => new RegExp(escapeRegExp(filter()), 'i'));
+  const filterRE = createMemo(() => new RegExp(escapeRegExp(filter()), "i"));
 
   type PendingRecipeList = {
     needRecipes: Accessor<boolean>;
     setNeedRecipes: Setter<boolean>;
     recipes: Resource<RecipeTitleWithLinkFields[]>;
-  }
+  };
 
   const recipesByCategory = createMemo(() => {
-    const username = props.username;
-    return new Map<number, PendingRecipeList>(props.categories.map(category => {
-      const [needRecipes, setNeedRecipes] = createSignal(false);
-      const [recipes] = createResource(needRecipes, () => fetchRecipesForCategory(category.id, username));
-      return [category.id, { needRecipes, setNeedRecipes, recipes }];
-    }));
+    return new Map<number, PendingRecipeList>(
+      props.categories.map((category) => {
+        const [needRecipes, setNeedRecipes] = createSignal(false);
+        const [recipes] = createResource(needRecipes, () =>
+          actions.recipesInCategory.orThrow({ categoryIds: [category.id] })
+        );
+        return [category.id, { needRecipes, setNeedRecipes, recipes }];
+      })
+    );
   });
 
-
   const filteredCategories = createMemo(() =>
-    filterListWithInitialMatchesFirst(props.categories, filterRE(), c => c.name));
+    filterListWithInitialMatchesFirst(
+      props.categories,
+      filterRE(),
+      (c) => c.name
+    )
+  );
 
   function onToggleCategory(categoryId: number) {
     recipesByCategory().get(categoryId)?.setNeedRecipes(true);
@@ -75,27 +67,44 @@ export const CategoryList: Component<{
     }
   });
 
-  return <>
-    <QueryDrivenTextField queryParam='filter' value={filter()} onInput={setFilter}>Filter</QueryDrivenTextField>
-    <section id="categories">
-      <ul class="details">
-        <For each={filteredCategories()}>{category =>
-          <li>
-            <details
-              open={filteredCategories().length === 1}
-              onToggle={[onToggleCategory, category.id]}>
-              <summary>{category.name}</summary>
-              <Suspense fallback={<p>Loading...</p>}>
-                <ul>
-                  <For each={recipesByCategory().get(category.id)?.recipes()}>{recipe =>
-                    <li><OneRecipe recipe={recipe} /></li>
-                  }</For>
-                </ul>
-              </Suspense>
-            </details>
-          </li>
-        }</For>
-      </ul>
-    </section>
-  </>;
-}
+  return (
+    <>
+      <QueryDrivenTextField
+        queryParam="filter"
+        value={filter()}
+        onInput={setFilter}
+      >
+        Filter
+      </QueryDrivenTextField>
+      <section id="categories">
+        <ul class="details">
+          <For each={filteredCategories()}>
+            {(category) => (
+              <li>
+                <details
+                  open={filteredCategories().length === 1}
+                  onToggle={[onToggleCategory, category.id]}
+                >
+                  <summary>{category.name}</summary>
+                  <Suspense fallback={<p>Loading...</p>}>
+                    <ul>
+                      <For
+                        each={recipesByCategory().get(category.id)?.recipes()}
+                      >
+                        {(recipe) => (
+                          <li>
+                            <OneRecipe recipe={recipe} />
+                          </li>
+                        )}
+                      </For>
+                    </ul>
+                  </Suspense>
+                </details>
+              </li>
+            )}
+          </For>
+        </ul>
+      </section>
+    </>
+  );
+};