src/data/pocketbase.ts

@@ -1,11 +1,4 @@
-import Pocketbase, { type RecordListOptions } from "pocketbase"
-import {
-    type Recipe,
-    type Ingredient,
-    type Step,
-    type Tag,
-    Collection
-} from './schema'
+import Pocketbase from "pocketbase"
 
 const client = new Pocketbase("http://localhost:4321")
 client.autoCancellation(false)
@@ -17,26 +10,3 @@ client.files.getRelativeURL = (record: { [key: string]: any; }, filename: string
 }
 
 export default client;
-
-class APIClient {
-    client: Pocketbase
-
-    constructor() {
-        this.client = new Pocketbase("http://localhost:4321")
-        this.client.autoCancellation(false)
-    }
-
-    async getRecipesPaginated(page: number, perPage: number = 30, options: RecordListOptions) {
-        return await this.client.collection<Recipe>(Collection.RECIPES).getList(page, perPage, options)
-    }
-
-    async getAllRecipes() {
-        return await this.client.collection<Recipe>(Collection.RECIPES).getFullList({ expand: "steps,ingredients,tags" })
-    }
-
-    async getRecipe(id: string) {
-        return await this.client.collection<Recipe>(Collection.RECIPES).getOne(id, { expand: 'ingredients,tags,steps' })
-    }
-}
-
-export const client2 = new APIClient()

src/data/schema.ts

@@ -1,53 +0,0 @@
-// Base PB type
-export interface BaseRecord {
-    id: string,
-    created: string,
-    updated: string
-}
-
-export interface Ingredient extends BaseRecord {
-    quantity: string,
-    unit: string,
-    name: string
-}
-
-export interface Step extends BaseRecord {
-    index: number,
-    instruction: string,
-    ingredients?: Ingredient[]
-}
-
-export interface Tag extends BaseRecord {
-    name: string
-}
-
-// 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 {
-    id: string
-}
-
-export interface Recipe extends BaseRecord {
-    name: string,
-    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',
-    STEPS: 'steps',
-    INGREDIENTS: 'ingredients',
-    TAGS: 'tags',
-    IMAGES: 'images'
-}

src/pages/api/[...proxy].ts

@@ -5,7 +5,8 @@ import type { APIRoute } from "astro";
 const getProxyUrl = (request: Request) => {
   const proxyUrl = new URL(import.meta.env.PUBLIC_PB_URL);
   const requestUrl = new URL(request.url);
-  return new URL(requestUrl.pathname + requestUrl.search, proxyUrl);
+
+  return new URL(requestUrl.pathname, proxyUrl);
 };
 
 export const ALL: APIRoute = async ({ request }) => {

src/pages/recipe/[recipeid].astro

@@ -1,6 +1,5 @@
 ---
-import client, { client2 } from "@/data/pocketbase";
-
+import client from "@/data/pocketbase";
 import SiteLayout from "@/layouts/base";
 import ImageCarousel from "@/components/Detail/ImageCarousel";
 import IngredientTableView from "@/components/Detail/IngredientTableView";
@@ -9,7 +8,23 @@ import InfoView from "@/components/Detail/InfoView";
 
 const { recipeid } = Astro.params;
 
-const re = await client2.getRecipe(recipeid as string)
+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>
@@ -22,12 +37,12 @@ const re = await client2.getRecipe(recipeid as string)
             <InfoView re={re} />
 
             <p class="text-[22pt] font-bold 'md:mt-4'">Ingredients</p>
-            <IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={re.expand.ingredients}  />
+            <IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={ingredients}  />
         </div>
         
         <div class="flex mt-4 md:flex-2/3 w-full flex-col">
             <!-- Steps -->
-            <StepView class="md:ml-3" steps={re.expand.steps} />
+            <StepView class="md:ml-3" steps={steps} />
         </div>
 
     </div>