Test out API requests from frontend to backend

api/api.go

@@ -1,6 +1,8 @@
 package api
 
 import (
+	"net/http"
+
 	"github.com/Fluffy-Bean/TastyBites/front"
 	"github.com/labstack/echo/v4"
 	"github.com/labstack/echo/v4/middleware"
@@ -16,11 +18,17 @@ func Serve(c Config) {
 
 	if c.Logging {
 		r.Use(middleware.Logger())
+		r.Use(middleware.CORS())
 	}
 	r.Use(middleware.Recover())
 
 	r.StaticFS("/", front.DistDir)
 
+	api := r.Group("/api")
+	api.GET("/items", func(e echo.Context) error {
+		return e.JSON(http.StatusOK, sampleData)
+	})
+
 	r.HideBanner = true
 	r.Logger.Fatal(r.Start(c.Host))
 }

api/testData.go

@@ -0,0 +1,59 @@
+package api
+
+type menuItem struct {
+	Name   string   `json:"name"`
+	Price  float32  `json:"price"`
+	Labels []string `json:"labels"`
+	Image  string   `json:"image"`
+}
+
+var sampleData = []menuItem{
+	{
+		Name:   "Bar of Soap",
+		Price:  69.99,
+		Labels: []string{"vegan", "spicy"},
+	},
+	{
+		Name:   "Sock",
+		Price:  21,
+		Labels: []string{"vegan", "fish", "nut", "spicy"},
+	},
+	{
+		Name:   "Brick",
+		Price:  0,
+		Labels: []string{"spicy"},
+	},
+	{
+		Name:   "Toast",
+		Price:  4382749832743,
+		Labels: []string{"gluten"},
+	},
+	{
+		Name:   "water",
+		Price:  1,
+		Labels: []string{"fish"},
+	},
+	{
+		Name:   "half eaten mouldy bread",
+		Price:  -9999,
+		Labels: []string{"nut"},
+	},
+	{
+		Name:   "GwaGwa",
+		Price:  69,
+		Labels: []string{"nut"},
+		Image:  "/dab.jpg",
+	},
+	{
+		Name:   "Hogermellon",
+		Price:  1111,
+		Labels: []string{"fish"},
+		Image:  "/wathog.jpg",
+	},
+	{
+		Name:   "Blue HOGGGGG",
+		Price:  0,
+		Labels: []string{"nut", "gluten", "spicy"},
+		Image:  "/sonichog.jpg",
+	},
+}

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>