[PIE-28] Switch to type-safe API (#12)

Custom API client to handle a lot of the more type safe queries

Reviewed-on: #12
Co-authored-by: june <self@breadone.net>
Co-committed-by: june <self@breadone.net>

src/components/Card/OverviewCard.astro

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

src/components/Card/TagRow.astro

@@ -1,27 +1,10 @@
 ---
-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
-        }
-      }))
-    : []
+const { tags } = Astro.props
 ---
 
 <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,17 +1,7 @@
 ---
 import client from "@/data/pocketbase";
 const { class: className, recipe } = Astro.props
-
-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))
-)
+const links = await client.getRecipeImages(recipe as string)
 
 ---
 

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 tagIds={re.tags}/>
+<TagRow tags={re.expand.tags}/>

src/components/Detail/StepIngredientSideView.astro

@@ -3,13 +3,10 @@ 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}>
-    {ings.map(i => (
+    {ingredients.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.ingredients} />
+                        <StepIngredientSideView class="text-left" ingredients={s.expand.ingredients} />
                     </div>
                 )}
             </div>