progressively updating to use api

src/data/pocketbase.ts

@@ -26,7 +26,7 @@ class APIClient {
         this.client.autoCancellation(false)
     }
 
-    async getRecipes(page: number, perPage: number = 20, options: RecordListOptions) {
+    async getRecipesPaginated(page: number, perPage: number = 30, options: RecordListOptions) {
         return await this.client.collection<Recipe>(Collection.RECIPES).getList(page, perPage, options)
     }
 
@@ -35,7 +35,7 @@ class APIClient {
     }
 
     async getRecipe(id: string) {
-        return await this.client.collection<Recipe>(Collection.RECIPES).getOne(id, { expand: 'ingredients,tags,steps', })
+        return await this.client.collection<Recipe>(Collection.RECIPES).getOne(id, { expand: 'ingredients,tags,steps' })
     }
 }
 

src/data/schema.ts

@@ -24,7 +24,7 @@ export interface Tag extends BaseRecord {
 // not sure Image is the best type cos it might be quite heavy to get all the fields every time but
 // it is here in case it is (a good idea)
 export interface Image extends BaseRecord {
-    url: string
+    id: string
 }
 
 export interface Recipe extends BaseRecord {
@@ -32,9 +32,17 @@ export interface Recipe extends BaseRecord {
     description?: string,
     servings?: number,
     images?: string[], // image IDs
+    ingredients: string[]
+    steps: string[],
+    tags?: string[]
+
+    expand: {
+        images?: Image[], // image IDs,
+        ingredients: Ingredient[]
         steps: Step[],
         tags?: Tag[]
     }
+}
 
 export const Collection = {
     RECIPES: 'recipes',

src/pages/recipe/[recipeid].astro

@@ -9,26 +9,7 @@ import InfoView from "@/components/Detail/InfoView";
 
 const { recipeid } = Astro.params;
 
-const re2 = await client2.getRecipe(recipeid as string)
+const re = await client2.getRecipe(recipeid as string)
-console.log(re2)
-
-const re = await client.collection("recipes").getOne(recipeid ?? "0");
-
-const stepIds = re.steps
-
-let steps = await Promise.all(
-    stepIds.map(async s =>
-        await client.collection("steps").getOne(s)
-    )
-)
-
-steps = steps.sort((a, b) => a.index - b.index);
-
-const ingredients = await Promise.all(
-    re.ingredients.map(async s =>
-        await client.collection("ingredients").getOne(s)
-    )
-)
 ---
 
 <SiteLayout>
@@ -41,12 +22,12 @@ const ingredients = await Promise.all(
             <InfoView re={re} />
 
             <p class="text-[22pt] font-bold 'md:mt-4'">Ingredients</p>
-            <IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={ingredients}  />
+            <IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={re.expand.ingredients}  />
         </div>
         
         <div class="flex mt-4 md:flex-2/3 w-full flex-col">
             <!-- Steps -->
-            <StepView class="md:ml-3" steps={steps} />
+            <StepView class="md:ml-3" steps={re.expand.steps} />
         </div>
 
     </div>