Test out Item table

Add to real API
Update air config
Fix bug in MenuItem

front/src/components/MenuItem.svelte

@@ -23,26 +23,28 @@
 <svelte:window on:resize={keepSquare}></svelte:window>
 
 <div class="menu-item" bind:this={element}>
-    {#if item.images}
+    {#if item.images && item.images[0]}
         <img src={item.images[0]} alt="" class="menu-item-image">
     {:else}
         <img src={LoadingImage} alt="" class="menu-item-image">
     {/if}
 
     <ul class="menu-item-labels">
-        {#each item.labels as label}
-            {#if label === Labels.vegan}
-                <li class="vegan"><Leaf weight="fill" /></li>
-            {:else if label === Labels.fish}
-                <li class="fish"><Fish weight="fill" /></li>
-            {:else if label === Labels.nut}
-                <li class="nut"><Acorn weight="fill" /></li>
-            {:else if label === Labels.gluten}
-                <li class="gluten"><GrainsSlash weight="fill" /></li>
-            {:else if label === Labels.spicy}
-                <li class="spicy"><Pepper weight="fill" /></li>
-            {/if}
-        {/each}
+        {#if item.labels}
+            {#each item.labels as label}
+                {#if label === Labels.vegan}
+                    <li class="vegan"><Leaf weight="fill" /></li>
+                {:else if label === Labels.fish}
+                    <li class="fish"><Fish weight="fill" /></li>
+                {:else if label === Labels.nut}
+                    <li class="nut"><Acorn weight="fill" /></li>
+                {:else if label === Labels.gluten}
+                    <li class="gluten"><GrainsSlash weight="fill" /></li>
+                {:else if label === Labels.spicy}
+                    <li class="spicy"><Pepper weight="fill" /></li>
+                {/if}
+            {/each}
+        {/if}
     </ul>
 
     <a class="menu-item-link" href="/item/{item.uuid}" use:link>

front/src/lib/api.js

@@ -1,29 +0,0 @@
-import TestData from "%/lib/test-data.ts";
-
-export async function getPopularToday() {
-    const res = await fetch("/api/items");
-    const data = res.json();
-
-    if (res.ok) {
-        return data;
-    } else {
-        throw new Error("Failed to fetch popular today");
-    }
-}
-
-export function getMenuItems() {
-    return [
-        {
-            name: "Main Menu",
-            items: TestData,
-        },
-        {
-            name: "Breakfast",
-            items: [],
-        },
-        {
-            name: "Seasonal",
-            items: TestData,
-        },
-    ];
-}

front/src/lib/api.ts

@@ -0,0 +1,36 @@
+import { type Item, type JSONResponse } from "./types";
+import TestData from "./test-data";
+
+const API_URL = "http://127.0.0.1:8080";
+
+export async function getPopularToday(): Promise<Item[]> {
+    const response = await fetch(API_URL + "/api/items");
+    const {data, error}: JSONResponse = await response.json();
+
+    if (response.ok) {
+        if (data?.item) {
+            return data?.item;
+        } else {
+            return Promise.reject(new Error("Failed to fetch popular today"))
+        }
+    } else {
+        return Promise.reject(error)
+    }
+}
+
+export function getMenuItems() {
+    return [
+        {
+            name: "Main Menu",
+            items: TestData,
+        },
+        {
+            name: "Breakfast",
+            items: [],
+        },
+        {
+            name: "Seasonal",
+            items: TestData,
+        },
+    ];
+}

front/src/lib/types.ts

@@ -6,17 +6,22 @@ export enum Labels {
     gluten = "GLUTEN",
 }
 
-export interface Item {
+export type Item = {
     uuid: string;
-    availability: boolean;
+    availability?: boolean;
     name: string;
     price: number;
-    labels: Labels[];
-    description?: string;
+    description: string;
+    labels?: Labels[];
     images?: string[];
 }
 
-export interface CartItem {
+export type CartItem = {
     amount: number;
     data: Item;
 }
+
+export type JSONResponse = {
+    data?: { item: Item[] }
+    error?: string,
+}