src/components/Card/OverviewCard.astro

@@ -4,7 +4,8 @@ import TagRow from "./TagRow.astro"
 
 const { recipe } = Astro.props;
 
-const image = (await client.getRecipeImages(recipe.id))[0]
+const headerImage = await client.collection("images").getOne(recipe.images[0])
+const image = await client.files.getRelativeURL(headerImage, headerImage.image)
 ---
 
 <div class="relative z-0 flex h-50">
@@ -18,7 +19,7 @@ const image = (await client.getRecipeImages(recipe.id))[0]
         <!-- <p id="recipe-desc" class="text-white text-[10pt]"> {recipe.description} </p> -->
 
         <div id="tag-row" class="">
-            <TagRow tags={recipe.expand.tags}/>
+            <TagRow tagIds={recipe.tags}/>
         </div>
     </div>
 

src/components/Card/TagRow.astro

@@ -1,10 +1,27 @@
 ---
-const { tags } = Astro.props
+import client from "../../data/pocketbase"
+
+interface Props {
+    tagIds: string[]
+}
+
+const { tagIds } = Astro.props
+
+const tags = tagIds && tagIds.length > 0 
+    ? await Promise.all(tagIds.map(async (tagId: string) => {
+        try {
+            const tagData = await client.collection("tags").getOne(tagId)
+            return { name: tagData.name, id: tagId }
+        } catch (error) {
+            return null
+        }
+      }))
+    : []
 ---
 
 <div class="">
     {
-        (tags ?? []).map(tag => (
+        tags.map(tag => (
             <a 
                 href={`/tag/${tag.id}`}
                 class="text-white bg-white/20 px-2 mr-2 mt-2 rounded-md inline-block hover:bg-white/30" 

src/components/Detail/ImageCarousel.astro

@@ -1,7 +1,17 @@
 ---
 import client from "@/data/pocketbase";
 const { class: className, recipe } = Astro.props
-const links = await client.getRecipeImages(recipe as string)
+
+async function getLink(img: string) {
+    const record = await client.collection("images").getOne(img)
+    const link = await client.files.getRelativeURL(record, record.image)
+    return link
+}
+
+// Use Promise.all to wait for all async operations to complete
+const links = await Promise.all(
+    recipe.images.map((img: string) => getLink(img))
+)
 
 ---
 

src/components/Detail/InfoView.astro

@@ -26,4 +26,4 @@ const waitTime = formatTime(re.waittime)
     {waitTime && (<p class="border-r px-2">{waitTime} Wait</p>)}
     {re.rating !== 0 && (<p class="pl-2">{re.rating}</p><p class="text-white/40 text-xs">/10</p>)}
 </div>
-<TagRow tags={re.expand.tags}/>
+<TagRow tagIds={re.tags}/>

src/components/Detail/StepIngredientSideView.astro

@@ -3,10 +3,13 @@ import client from "@/data/pocketbase";
 
 const { ingredients, class: className } = Astro.props;
 
+const ings = await Promise.all(
+    ingredients.map(async i => await client.collection("ingredients").getOne(i))
+)
 ---
 
 <div class={className}>
-    {ingredients.map(i => (
+    {ings.map(i => (
         <div class="text-sm">
             <p>• {i.quantity} {i.unit || " "}  {i.name}</p>
         </div>

src/components/Detail/StepView.astro

@@ -16,7 +16,7 @@ const { steps, class: className } = Astro.props
                 <p class="w-full md:flex-2/3 pr-1 text-left">{s.instruction}</p>
                 {s.ingredients && s.ingredients.length > 0 && (
                     <div class="w-full md:w-auto md:flex-2/5 mt-2 md:mt-0 md:ml-2 md:pl-3 md:border-l text-white/70 border-white/70">
-                        <StepIngredientSideView class="text-left" ingredients={s.expand.ingredients} />
+                        <StepIngredientSideView class="text-left" ingredients={s.ingredients} />
                     </div>
                 )}
             </div>

src/data/pocketbase.ts

@@ -7,16 +7,16 @@ import {
     Collection
 } from './schema'
 
-const raw_client = new Pocketbase("http://localhost:4321")
-raw_client.autoCancellation(false)
+const client = new Pocketbase("http://localhost:4321")
+client.autoCancellation(false)
 
 // Return a relative url for file instead of full path including localhost, which breaks external access
-raw_client.files.getRelativeURL = (record: { [key: string]: any; }, filename: string, queryParams?: FileOptions | undefined) => {
-    const res = raw_client.files.getURL(record, filename)
+client.files.getRelativeURL = (record: { [key: string]: any; }, filename: string, queryParams?: FileOptions | undefined) => {
+    const res = client.files.getURL(record, filename)
     return res.substring(21)
 }
 
-export { raw_client };
+export default client;
 
 class APIClient {
     client: Pocketbase
@@ -26,35 +26,17 @@ class APIClient {
         this.client.autoCancellation(false)
     }
 
-    async getRecipesPage(page: number, perPage: number = 30, options: RecordListOptions) {
+    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: 'ingredients,tags,steps,images,steps.ingredients' })
+        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,images,steps.ingredients' })
+        return await this.client.collection<Recipe>(Collection.RECIPES).getOne(id, { expand: 'ingredients,tags,steps' })
     }
-
-    // IMAGE
-    async getImageURL(imgID: string, relative: boolean = true) {
-        const record = await this.client.collection("images").getOne(imgID)
-        const res = this.client.files.getURL(record, record.image)
-        return relative ? res.substring(21) : res
-    }
-
-    async getRecipeImages(recipeID: string) {
-        const re = await this.getRecipe(recipeID)
-        const imgIDs = re.images ?? []
-
-        const urls = Promise.all(
-            imgIDs.map(img => this.getImageURL(img))
-        )
-        return urls
-    }
-
 }
-const client = new APIClient()
-export default client;
+
+export const client2 = new APIClient()

src/data/schema.ts

@@ -25,8 +25,6 @@ export interface Tag extends BaseRecord {
 // it is here in case it is (a good idea)
 export interface Image extends BaseRecord {
     id: string
-    filename: string
-    url?: string
 }
 
 export interface Recipe extends BaseRecord {

src/pages/index.astro

@@ -3,7 +3,7 @@ import PageLayout from "@/layouts/base"
 import client from "@/data/pocketbase"
 import OverviewCard from "@/components/Card/OverviewCard"
 
-const recipes = await client.getAllRecipes()
+const recipies = await client.collection("recipes").getFullList()
 ---
 
 <PageLayout>	
@@ -11,7 +11,7 @@ const recipes = await client.getAllRecipes()
 
 	<div class="grid md:gap-2 gap-3 grid-cols-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-8">
 		{
-			recipes.map(r => (
+			recipies.map(r => (
 				<OverviewCard recipe={r} />
 			))
 		}

src/pages/recipe/[recipeid].astro

@@ -1,5 +1,5 @@
 ---
-import client from "@/data/pocketbase";
+import client, { client2 } from "@/data/pocketbase";
 
 import SiteLayout from "@/layouts/base";
 import ImageCarousel from "@/components/Detail/ImageCarousel";
@@ -9,25 +9,25 @@ import InfoView from "@/components/Detail/InfoView";
 
 const { recipeid } = Astro.params;
 
-const re = await client.getRecipe(recipeid as string)
+const re = await client2.getRecipe(recipeid as string)
 ---
 
 <SiteLayout>
     <div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2">
         <div class="flex md:flex-1/3 flex-col mt-2 md:mt-4 sticky">
-            <ImageCarousel class="w-full" recipe={recipeid} />
+            <ImageCarousel class="w-full" recipe={re} />
             <p class="text-[28pt] font-bold leading-11 mt-2">{re.name}</p>
 
             <!-- Details -->
             <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={re.expand.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={re.expand.steps} />
         </div>
 
     </div>