Test out API requests from frontend to backend

front/src/lib/api.js

@@ -1,7 +1,14 @@
 import Items from '%/lib/testData.js';
 
-export function getPopularToday() {
-    return Items;
+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() {

front/src/pages/PageIndex.svelte

@@ -3,7 +3,7 @@
     import { link } from 'svelte-spa-router';
     import { ArrowUpRight } from "phosphor-svelte";
     import { map, tileLayer, marker } from 'leaflet';
-    import { getPopularToday } from "%/lib/APIDEV.js";
+    import { getPopularToday } from "%/lib/api.js";
     import AnnouncementBanner from "%/pages/elements/AnnouncementBanner.svelte";
     import MenuList from "%/pages/elements/MenuList.svelte";
 
@@ -18,7 +18,8 @@
             {maxZoom: 19, attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'}
         ).addTo(Map);
         marker([50.82304922105467, -0.432780150496344]).addTo(Map);
-    })
+
+    });
 </script>
 
 <svelte:head>
@@ -86,7 +87,13 @@
 <div class="spacer" />
 
 <h2>Popular Today</h2>
-<MenuList {items} />
+{#await items}
+    <p>Loading...</p>
+{:then items}
+    <MenuList {items} />
+{:catch error}
+    <p>Failed to get todays specials!</p>
+{/await}
 <a href="/menu" use:link>See All <ArrowUpRight /></a>
 <div class="spacer" />
 

front/src/pages/PageMenu.svelte

@@ -2,7 +2,7 @@
     import { ArrowClockwise } from "phosphor-svelte";
     import MenuList from "%/pages/elements/MenuList.svelte";
     import DropDown from "%/components/DropDown.svelte";
-    import { getMenuItems } from "%/lib/APIDEV.js";
+    import { getMenuItems } from "%/lib/api.js";
 
     let items = getMenuItems();
 </script>