Set image value in Item to list, to support more images in the future

Set all pages to Typescript

front/src/components/AnnouncementBanner.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     import { getAnnouncements } from '../lib/test-api';
 
     let announcement = getAnnouncements();

front/src/components/BasketItem.svelte

@@ -9,28 +9,28 @@
 
     function reduce() {
         if (item.amount > 1) {
-            Cart.addToCart(item.uuid, -1)
+            Cart.addToCart(item.data.uuid, -1)
         }
     }
     function add() {
         if (item.amount < 99) {
-            Cart.addToCart(item.uuid, 1);
+            Cart.addToCart(item.data.uuid, 1);
         }
     }
     function yeet() {
-        Cart.removeByUUID(item.uuid)
+        Cart.removeByUUID(item.data.uuid)
     }
 </script>
 
 <div class="container">
-    {#if item.data.image}
+    {#if item.data.images}
-        <img src="{item.data.image}" alt="Item" class="basket-item-image">
+        <img src="{item.data.images[0]}" alt="Item" class="basket-item-image">
     {:else}
-        <img src="/MenuItemLoadingAlt.svg" alt="Item" class="basket-item-image">
+        <img src="/MenuItemLoading.svg" alt="Item" class="basket-item-image">
     {/if}
 
     <ul class="basket-item-data">
-        <li class="basket-item-name"><a href="/item/{item.uuid}" use:link>{item.data.name}</a></li>
+        <li class="basket-item-name"><a href="/item/{item.data.uuid}" use:link>{item.data.name}</a></li>
         <li class="basket-item-controls">
             <button class="button" class:disabled={item.amount <= 1} on:click={reduce}><Minus /></button>
             <p>{item.amount}</p>

front/src/components/DropDown.svelte

@@ -1,8 +1,8 @@
-<script>
+<script lang="ts">
     import { CaretDown } from "phosphor-svelte";
 
     export let open = false;
-    export let name;
+    export let name: string;
 </script>
 
 <div class="dropdown" class:open={open}>

front/src/components/LoadingBar.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     export let bottom = false
 </script>
 

front/src/components/MenuItem.svelte

@@ -1,18 +1,18 @@
-<script>
+<script lang="ts">
     import { link } from 'svelte-spa-router';
     import { Acorn, Fish, Leaf, Pepper, ArrowUpRight, GrainsSlash } from 'phosphor-svelte';
 
-    import { Labels } from "../lib/types";
+    import { type Item, Labels} from "../lib/types";
     import LoadingImage from '/MenuItemLoadingAlt.svg';
 
-    export let item = {};
+    export let item: Item;
 </script>
 
 <div class="menu-item">
-    {#if !item.image}
+    {#if item.images}
-        <img src={LoadingImage} alt="" class="menu-item-image">
+        <img src={item.images[0]} alt="" class="menu-item-image">
     {:else}
-        <img src={item.image} alt="" class="menu-item-image">
+        <img src={LoadingImage} alt="" class="menu-item-image">
     {/if}
 
     <div class="menu-item-header">

front/src/components/MenuList.svelte

@@ -1,7 +1,8 @@
-<script>
+<script lang="ts">
+    import { type Item } from "../lib/types";
     import MenuItem from "./MenuItem.svelte";
 
-    export let items = [];
+    export let items: Item[];
 </script>
 
 <ul>

front/src/lib/test-api.ts

@@ -127,13 +127,12 @@ export async function postVerifyCart(
 
     const newCartData: Record<string, CartItem> = {};
 
-    Object.entries(currentCartData).forEach(([key, value]) => {
+    Object.entries(currentCartData).forEach(([uuid, currentData]) => {
         verifiedItems.forEach((verifiedItem: Item) => {
-            if (verifiedItem.uuid === key) {
+            if (verifiedItem.uuid === uuid) {
-                console.log(verifiedItem, key);
+                console.log(verifiedItem, uuid);
-                newCartData[key] = {
+                newCartData[uuid] = {
-                    uuid: value.uuid,
+                    amount: currentData.amount,
-                    amount: value.amount,
                     data: verifiedItem,
                 };
             }

front/src/lib/test-data.ts

@@ -7,65 +7,65 @@ const TestData: Item[] = [
         name: "Bar of Soap",
         price: 69.99,
         labels: [Labels.vegan, Labels.spicy],
-        detail: "Example",
+        description: "Example",
     },
     {
         uuid: "sock",
         name: "Sock",
         price: 21,
         labels: [Labels.vegan, Labels.fish, Labels.nut, Labels.spicy],
-        detail: "Example",
+        description: "Example",
     },
     {
         uuid: "brick",
         name: "Brick",
         price: 0,
         labels: [Labels.spicy],
-        detail: "Example",
+        description: "Example",
     },
     {
         uuid: "toast",
         name: "Toast",
         price: 4382749832743,
         labels: [Labels.gluten],
-        detail: "Example",
+        description: "Example",
     },
     {
         uuid: "water",
         name: "water",
         price: 1,
         labels: [Labels.fish],
-        detail: "Example",
+        description: "Example",
     },
     {
         uuid: "mouldy_bread",
         name: "half eaten mouldy bread",
         price: -99,
         labels: [Labels.nut],
-        detail: "Example",
+        description: "Example",
     },
     {
         uuid: "gwagwa",
         name: "GwaGwa",
         price: 69,
         labels: [Labels.nut],
-        image: "/dab.jpg",
+        images: ["/dab.jpg"],
     },
     {
         uuid: "hogmelon",
         name: "Hogermellon",
         price: 1111,
         labels: [Labels.fish],
-        image: "/wathog.jpg",
+        images: ["/wathog.jpg"],
-        detail: "Example",
+        description: "Example",
     },
     {
         uuid: "bluhog",
         name: "Blue HOGGGGG",
         price: 0,
         labels: [Labels.nut, Labels.gluten, Labels.spicy],
-        image: "/sonichog.jpg",
+        images: ["/sonichog.jpg"],
-        detail: "Example",
+        description: "Example",
     },
 ];
 

front/src/lib/types.ts

@@ -10,15 +10,13 @@ export interface Item {
     uuid: string;
     name: string;
     price: number;
-    detail?: string;
     labels: Labels[];
-    image?: string;
+    description?: string;
+    images?: string[];
 }
 
-// UUID is stored in both Item and CartItem, this isn't the best, I don't like it
+
-// But it's the simplest way of doing this shit
 export interface CartItem {
-    uuid: string;
     amount: number;
     data: Item;
 }

front/src/pages/Page404.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     import { SmileySad } from "phosphor-svelte";
 </script>
 

front/src/pages/Page500.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     import { SmileySad } from "phosphor-svelte";
 </script>
 

front/src/pages/PageContact.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     import { PaperPlaneRight, SealWarning, SealCheck } from "phosphor-svelte";
 
     import { postContactEmail } from "../lib/test-api";
@@ -7,7 +7,7 @@
 
     const minMessageLength = 150;
 
-    let formMessage;
+    let formMessage: Promise<string>;
 
     let name = "";
     let email = "";
@@ -32,13 +32,13 @@
         emailValid = true;
         messageValid = false;
 
-        formMessage = postContactEmail(name, email, message);
+        formMessage = postContactEmail(name, email, message)
-
+            .catch((error) => {
-        formMessage.catch(() => {
+                validateName();
-            validateName();
+                validateEmail();
-            validateEmail();
+                validateMessage();
-            validateMessage();
+                return error;
-        });
+            });
     }
 </script>
 

front/src/pages/PageIndex.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     import { onMount } from "svelte";
     import { link } from 'svelte-spa-router';
     import { ArrowUpRight } from "phosphor-svelte";

front/src/pages/PageItem.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     import { SmileySad } from "phosphor-svelte";
 
     import { getPopularToday, getItemByUUID } from "../lib/test-api";
@@ -7,7 +7,9 @@
     import LoadingBar from "../components/LoadingBar.svelte";
     import LoadingImage from "/MenuItemLoading.svg";
 
-    export let params;
+    export let params: {
+        uuid?: string;
+    };
 
     $: item = getItemByUUID(params.uuid);
     $: popularToday = getPopularToday();
@@ -37,7 +39,11 @@
     {:then item}
         <div id="images">
             <div>
-                <img src={item.image} alt="">
+                {#if item.images}
+                    <img src="{item.images[0]}" alt="Item">
+                {:else}
+                    <img src="/MenuItemLoading.svg" alt="Item">
+                {/if}
             </div>
             <ul>
                 <li><img src={LoadingImage} alt=""></li>
@@ -53,7 +59,7 @@
             <p>£{item.price}</p>
 
             <div class="container">
-                <p>{item.detail}</p>
+                <p>{item.description}</p>
             </div>
 
             <button on:click={() => { Cart.addToCart(item.uuid, 1) }} id="add-to-cart">Add to Cart</button>

front/src/pages/PageLoading.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     import LoadingBar from "../components/LoadingBar.svelte";
 
     const FunnyMessages = [

front/src/pages/PageMenu.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     import { ArrowClockwise } from "phosphor-svelte";
 
     import { getMenuItems } from "../lib/test-api";