From 9dce9235d6d57c07302696bb112fc4e2f5360712 Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Sun, 5 May 2024 11:12:01 +0100
Subject: [PATCH] Set image value in Item to list, to support more images in
 the future Set all pages to Typescript

---
 .../src/components/AnnouncementBanner.svelte  |  2 +-
 front/src/components/BasketItem.svelte        | 14 ++++++------
 front/src/components/DropDown.svelte          |  4 ++--
 front/src/components/LoadingBar.svelte        |  2 +-
 front/src/components/MenuItem.svelte          | 12 +++++-----
 front/src/components/MenuList.svelte          |  5 +++--
 front/src/lib/test-api.ts                     | 11 +++++-----
 front/src/lib/test-data.ts                    | 22 +++++++++----------
 front/src/lib/types.ts                        |  8 +++----
 front/src/pages/Page404.svelte                |  2 +-
 front/src/pages/Page500.svelte                |  2 +-
 front/src/pages/PageContact.svelte            | 18 +++++++--------
 front/src/pages/PageIndex.svelte              |  2 +-
 front/src/pages/PageItem.svelte               | 14 ++++++++----
 front/src/pages/PageLoading.svelte            |  2 +-
 front/src/pages/PageMenu.svelte               |  2 +-
 16 files changed, 63 insertions(+), 59 deletions(-)

diff --git a/front/src/components/AnnouncementBanner.svelte b/front/src/components/AnnouncementBanner.svelte
index af74852..f1ca0dd 100644
--- a/front/src/components/AnnouncementBanner.svelte
+++ b/front/src/components/AnnouncementBanner.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     import { getAnnouncements } from '../lib/test-api';
 
     let announcement = getAnnouncements();
diff --git a/front/src/components/BasketItem.svelte b/front/src/components/BasketItem.svelte
index 9932ee0..6c99c6f 100644
--- a/front/src/components/BasketItem.svelte
+++ b/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}
-        <img src="{item.data.image}" alt="Item" class="basket-item-image">
+    {#if item.data.images}
+        <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>
diff --git a/front/src/components/DropDown.svelte b/front/src/components/DropDown.svelte
index e1e9404..2ad8b56 100644
--- a/front/src/components/DropDown.svelte
+++ b/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}>
diff --git a/front/src/components/LoadingBar.svelte b/front/src/components/LoadingBar.svelte
index 44d836c..eaa3d59 100644
--- a/front/src/components/LoadingBar.svelte
+++ b/front/src/components/LoadingBar.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     export let bottom = false
 </script>
 
diff --git a/front/src/components/MenuItem.svelte b/front/src/components/MenuItem.svelte
index 02a4650..23e8a09 100644
--- a/front/src/components/MenuItem.svelte
+++ b/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}
-        <img src={LoadingImage} alt="" class="menu-item-image">
+    {#if item.images}
+        <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">
diff --git a/front/src/components/MenuList.svelte b/front/src/components/MenuList.svelte
index 38cfaf4..b0e8dd1 100644
--- a/front/src/components/MenuList.svelte
+++ b/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>
diff --git a/front/src/lib/test-api.ts b/front/src/lib/test-api.ts
index 25d4331..13ca0c0 100644
--- a/front/src/lib/test-api.ts
+++ b/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) {
-                console.log(verifiedItem, key);
-                newCartData[key] = {
-                    uuid: value.uuid,
-                    amount: value.amount,
+            if (verifiedItem.uuid === uuid) {
+                console.log(verifiedItem, uuid);
+                newCartData[uuid] = {
+                    amount: currentData.amount,
                     data: verifiedItem,
                 };
             }
diff --git a/front/src/lib/test-data.ts b/front/src/lib/test-data.ts
index b9f5e28..c6d914c 100644
--- a/front/src/lib/test-data.ts
+++ b/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",
-        detail: "Example",
+        images: ["/wathog.jpg"],
+        description: "Example",
     },
     {
         uuid: "bluhog",
         name: "Blue HOGGGGG",
         price: 0,
         labels: [Labels.nut, Labels.gluten, Labels.spicy],
-        image: "/sonichog.jpg",
-        detail: "Example",
+        images: ["/sonichog.jpg"],
+        description: "Example",
     },
 ];
 
diff --git a/front/src/lib/types.ts b/front/src/lib/types.ts
index 4dc36d8..caba824 100644
--- a/front/src/lib/types.ts
+++ b/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;
 }
diff --git a/front/src/pages/Page404.svelte b/front/src/pages/Page404.svelte
index d2957b9..fd10d2c 100644
--- a/front/src/pages/Page404.svelte
+++ b/front/src/pages/Page404.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     import { SmileySad } from "phosphor-svelte";
 </script>
 
diff --git a/front/src/pages/Page500.svelte b/front/src/pages/Page500.svelte
index c052fc0..2a6bbe6 100644
--- a/front/src/pages/Page500.svelte
+++ b/front/src/pages/Page500.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     import { SmileySad } from "phosphor-svelte";
 </script>
 
diff --git a/front/src/pages/PageContact.svelte b/front/src/pages/PageContact.svelte
index 1e1ef61..a1fe001 100644
--- a/front/src/pages/PageContact.svelte
+++ b/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.catch(() => {
-            validateName();
-            validateEmail();
-            validateMessage();
-        });
+        formMessage = postContactEmail(name, email, message)
+            .catch((error) => {
+                validateName();
+                validateEmail();
+                validateMessage();
+                return error;
+            });
     }
 </script>
 
diff --git a/front/src/pages/PageIndex.svelte b/front/src/pages/PageIndex.svelte
index 131376a..3fc3e85 100644
--- a/front/src/pages/PageIndex.svelte
+++ b/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";
diff --git a/front/src/pages/PageItem.svelte b/front/src/pages/PageItem.svelte
index 01f723b..f6ff2a0 100644
--- a/front/src/pages/PageItem.svelte
+++ b/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>
diff --git a/front/src/pages/PageLoading.svelte b/front/src/pages/PageLoading.svelte
index 27199bb..39d86c5 100644
--- a/front/src/pages/PageLoading.svelte
+++ b/front/src/pages/PageLoading.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     import LoadingBar from "../components/LoadingBar.svelte";
 
     const FunnyMessages = [
diff --git a/front/src/pages/PageMenu.svelte b/front/src/pages/PageMenu.svelte
index 0e47728..bffe986 100644
--- a/front/src/pages/PageMenu.svelte
+++ b/front/src/pages/PageMenu.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     import { ArrowClockwise } from "phosphor-svelte";
 
     import { getMenuItems } from "../lib/test-api";