Use array of UUIDs + Amount for cart data

This is very unstable, but works on the power of will and hope

front/src/lib/cart.ts

@@ -12,14 +12,37 @@ try {
 function createCartStore() {
     const cart = writable(local);
 
-    function addToCart(item: any) {
+    function addToCart(uuid: string, amount: number) {
-        cart.update((cart) => [...cart, item]);
+        let found = false;
+
+        get(cart).forEach((item) => {
+            if (item.uuid === uuid) {
+                item.amount += amount;
+                found = true;
+            }
+        });
+
+        if (!found) {
+            cart.update((cart) => [...cart, {uuid:uuid,amount:amount}]);
+        }
+
+        // Remove items that have an amount of 0 or lower
+        cart.update((cart) => cart.filter((item) => item.amount > 0))
     }
 
     function getLength() {
         return get(cart).length;
     }
 
+    function getByUUID(uuid: string) {
+        get(cart).forEach((item) => {
+            if (item.uuid === uuid) {
+                return item;
+            }
+        })
+        return {};
+    }
+
     function removeByUUID(uuid: string) {
         cart.update((cart) => cart.filter((item) => item.uuid !== uuid))
     }
@@ -28,6 +51,7 @@ function createCartStore() {
         ...cart,
         addToCart,
         getLength,
+        getByUUID,
         removeByUUID,
     }
 }

front/src/lib/test-api.js

@@ -18,7 +18,7 @@ export async function getAnnouncements() {
         image: "/BannerExampleImage.jpg",
     };
     cache.announcement_banner = data;
-    await fakeDelay(5000)
+    await fakeDelay(200)
     return data;
 }
 
@@ -30,7 +30,7 @@ export async function getPopularToday() {
 
     const data = Items;
     cache.popular_today = data;
-    await fakeDelay(2000)
+    await fakeDelay(200)
     return data;
 }
 
@@ -62,9 +62,9 @@ export async function getItemByUUID(uuid) {
         if (item.uuid === uuid) {
             data = item;
         }
-    })
+    });
 
-    await fakeDelay(1000)
+    await fakeDelay(200)
 
     if (!data) {
         throw new Error("Resource could not be found");
@@ -74,8 +74,29 @@ export async function getItemByUUID(uuid) {
 }
 
 
+export async function getItemsByUUID(items) {
+    let data = [];
+
+    Items.forEach((itemInDatabase) => {
+        items.forEach((itemInRequest) => {
+            if (itemInDatabase.uuid === itemInRequest) {
+                data.push(itemInDatabase);
+            }
+        });
+    });
+
+    await fakeDelay(200)
+
+    if (data.length < 0) {
+        throw new Error("Resource could not be found");
+    }
+
+    return data;
+}
+
+
 export async function postContactEmail(name, email, message) {
-    await fakeDelay(1000)
+    await fakeDelay(200)
 
     if (!name) {
         throw new Error("Namey missing");

front/src/pages/PageCart.svelte

@@ -1,22 +1,32 @@
 <script>
     import { link } from 'svelte-spa-router';
 
+    import { getItemsByUUID } from "%/lib/test-api.js";
+    import LoadingBar from "%/components/LoadingBar.svelte";
     import Cart from '%/lib/cart.ts';
     import MenuList from "%/components/MenuList.svelte";
 
-    console.log($Cart);
+    $: items = getItemsByUUID($Cart.map((item) => item.uuid));
 </script>
 
 <h1>Shopping Cart</h1>
 
-<MenuList items={$Cart} />
+{#await items}
+    <LoadingBar />
+{:then items}
+    {#if items.length}
+        <MenuList items={items} />
+    {:else}
+        <p>Empty.....</p>
+    {/if}
 
-<ul>
+    <ul>
-    {#each $Cart as item}
+        {#each items as item}
-        <li>
+            <li>
-            <button on:click={() => {Cart.removeByUUID(item.uuid)}}>Yeet {item.name}</button>
+                <button on:click={() => {Cart.removeByUUID(item.uuid)}}>Yeet {item.name}</button>
-        </li>
+            </li>
-    {/each}
+        {/each}
-</ul>
+    </ul>
+{/await}
 
 <p>Looking past orders? Check out the <a href="/contact" use:link>commonly asked questions</a></p>

front/src/pages/PageItem.svelte

@@ -1,5 +1,4 @@
 <script>
-    import { replace } from "svelte-spa-router";
     import { SmileySad } from "phosphor-svelte";
 
     import Cart from "%/lib/cart.ts";
@@ -11,15 +10,7 @@
     export let params;
 
     $: item = getItemByUUID(params.uuid)
-        // ToDo: Fix this, keeps fucking breaking
+
-        // NOT WORKING FUCK
-        // .catch((error) => {
-        //     console.error(error);
-        //     if (error === "404") {
-        //         replace("/ForOhFor");
-        //     }
-        //     replace("/ServerError");
-        // });
     let popularToday = getPopularToday();
 </script>
 
@@ -66,7 +57,7 @@
                 <p>{item.detail}</p>
             </div>
 
-            <button on:click={() => { Cart.addToCart(item) }}>Add to Cart</button>
+            <button on:click={() => { Cart.addToCart(item.uuid, 1) }}>Add to Cart</button>
         </div>
     {:catch error}
         <div id="error">