Effort to transition to TypeScript

Remove commit warnings

front/src/App.svelte

@@ -1,12 +1,11 @@
 <script>
-    import { get } from 'svelte/store';
     import Router from 'svelte-spa-router';
     import { replace, link } from 'svelte-spa-router';
     import active from 'svelte-spa-router/active'
     import { TwitterLogo, FacebookLogo, InstagramLogo, TiktokLogo } from 'phosphor-svelte';
 
-    import Cart from '%/lib/cart.ts';
-    import routes from '%/routes.js';
+    import Cart from './lib/cart';
+    import routes from './routes';
     import Logo from '/LogoAlt.svg';
 
     const links = {
@@ -17,7 +16,7 @@
     }
 
     let cartLen = 0;
-    Cart.subscribe((value) => {
+    Cart.subscribe(() => {
         cartLen = Cart.getLength();
     });
 
@@ -39,7 +38,7 @@
         oldLocation = event.detail.location;
     }
 
-    function conditionFailure(event) {
+    function conditionFailure() {
         replace("/");
     }
 </script>

front/src/components/AnnouncementBanner.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { getAnnouncements } from '%/lib/test-api.ts';
+    import { getAnnouncements } from '../lib/test-api';
 
     let announcement = getAnnouncements();
 </script>
@@ -16,7 +16,7 @@
 {/await}
 
 <style lang="scss">
-    @import "%/styles/vars";
+    @import "../styles/vars";
 
     $padding: 1px;
 

front/src/components/DropDown.svelte

@@ -18,7 +18,7 @@
 </div>
 
 <style lang="scss">
-    @import "%/styles/vars";
+    @import "../styles/vars";
 
     .dropdown {
         border-bottom: 1px solid transparent;

front/src/components/MenuItem.svelte

@@ -1,7 +1,8 @@
 <script>
     import { link } from 'svelte-spa-router';
     import { Acorn, Fish, Leaf, Pepper, ArrowUpRight, GrainsSlash } from 'phosphor-svelte';
-    
+
+    import { Labels } from "../lib/types";
     import LoadingImage from '/MenuItemLoadingAlt.svg';
 
     export let item = {};
@@ -17,19 +18,15 @@
     <div class="menu-item-header">
         <ul>
             {#each item.labels as label}
-                {#if label === "vegan"}
+                {#if label === Labels.vegan}
                     <li class="vegan"><Leaf weight="fill" /></li>
-                {/if}
-                {#if label === "fish"}
+                {:else if label === Labels.fish}
                     <li class="fish"><Fish weight="fill" /></li>
-                {/if}
-                {#if label === "nut"}
+                {:else if label === Labels.nut}
                     <li class="nut"><Acorn weight="fill" /></li>
-                {/if}
-                {#if label === "gluten"}
+                {:else if label === Labels.gluten}
                     <li class="gluten"><GrainsSlash weight="fill" /></li>
-                {/if}
-                {#if label === "spicy"}
+                {:else if label === Labels.spicy}
                     <li class="spicy"><Pepper weight="fill" /></li>
                 {/if}
             {/each}

front/src/components/MenuList.svelte

@@ -1,5 +1,5 @@
 <script>
-    import MenuItem from "%/components/MenuItem.svelte";
+    import MenuItem from "./MenuItem.svelte";
 
     export let items = [];
 </script>

front/src/lib/api.js

@@ -1,4 +1,4 @@
-import Items from '%/lib/test-data.js';
+import TestData from '%/lib/test-data.ts';
 
 export async function getPopularToday() {
     const res = await fetch("/api/items")
@@ -15,7 +15,7 @@ export function getMenuItems() {
     return [
         {
             name: "Main Menu",
-            items: Items,
+            items: TestData,
         },
         {
             name: "Breakfast",
@@ -23,7 +23,7 @@ export function getMenuItems() {
         },
         {
             name: "Seasonal",
-            items: Items,
+            items: TestData,
         },
     ];
 }

front/src/lib/test-api.ts

@@ -1,4 +1,5 @@
-import Items from '%/lib/test-data.js';
+import type { Item } from './types';
+import TestData from './test-data';
 
 
 let cache = {
@@ -7,8 +8,10 @@ let cache = {
 };
 
 
+// @ts-ignore
 async function fakeDelay(timeout: number = 1000) {
-    await new Promise(resolve => setTimeout(resolve, timeout));
+    // @ts-ignore
+    await new Promise((resolve: TimerHandler) => setTimeout(resolve, timeout));
 }
 
 
@@ -31,7 +34,7 @@ export async function getPopularToday() {
         return cache.popular_today;
     }
 
-    const data = Items;
+    const data = TestData;
     cache.popular_today = data;
     await fakeDelay(200)
     return data;
@@ -42,7 +45,7 @@ export async function getMenuItems() {
     const data = [
         {
             name: "Main Menu",
-            items: Items,
+            items: TestData,
         },
         {
             name: "Breakfast",
@@ -50,7 +53,7 @@ export async function getMenuItems() {
         },
         {
             name: "Seasonal",
-            items: Items,
+            items: TestData,
         },
     ];
     await fakeDelay(20)
@@ -61,7 +64,7 @@ export async function getMenuItems() {
 export async function getItemsByUUID(items: string[]) {
     let data = [];
 
-    Items.forEach((itemInDatabase) => {
+    TestData.forEach((itemInDatabase: Item) => {
         items.forEach((itemInRequest) => {
             if (itemInDatabase.uuid === itemInRequest) {
                 data.push(itemInDatabase);
@@ -94,10 +97,10 @@ export async function postContactEmail(name: string, email: string, message: str
     await fakeDelay(200)
 
     if (!name) {
-        throw new Error("Namey missing");
+        throw new Error("Name missing");
     }
     if (!email) {
-        throw new Error("Emaily missing");
+        throw new Error("Email missing");
     }
     if (!message) {
         throw new Error("Message missing");

front/src/lib/test-data.ts

@@ -1,80 +1,72 @@
-// "vegan", "fish", "nut", "spicy", "gluten"
+import type { Item } from './types';
+import { Labels } from "./types";
 
-const Items = [
-    // soap: {
+const TestData: Item[] = [
     {
         uuid: "soap",
         name: "Bar of Soap",
         price: 69.99,
-        labels: ["vegan", "spicy"],
+        labels: [Labels.vegan, Labels.spicy],
         detail: "Example",
     },
-    // sock: {
     {
         uuid: "sock",
         name: "Sock",
         price: 21,
-        labels: ["vegan", "fish", "nut", "spicy"],
+        labels: [Labels.vegan, Labels.fish, Labels.nut, Labels.spicy],
         detail: "Example",
     },
-    // brick: {
     {
         uuid: "brick",
         name: "Brick",
         price: 0,
-        labels: ["spicy"],
+        labels: [Labels.spicy],
         detail: "Example",
     },
-    // toast: {
     {
         uuid: "toast",
         name: "Toast",
         price: 4382749832743,
-        labels: ["gluten"],
+        labels: [Labels.gluten],
         detail: "Example",
     },
-    // water: {
     {
         uuid: "water",
         name: "water",
         price: 1,
-        labels: ["fish"],
+        labels: [Labels.fish],
         detail: "Example",
     },
-    // mouldy_bread: {
     {
         uuid: "mouldy_bread",
         name: "half eaten mouldy bread",
         price: -99,
-        labels: ["nut"],
+        labels: [Labels.nut],
         detail: "Example",
     },
-    // gwagwa: {
-    // {
-    //     uuid: "gwagwa",
-    //     name: "GwaGwa",
-    //     price: "Priceless",
-    //     labels: ["nut"],
-    //     image: "/dab.jpg",
-    // },
-    // hogmelon: {
+    {
+        uuid: "gwagwa",
+        name: "GwaGwa",
+        price: 69,
+        labels: [Labels.nut],
+        image: "/dab.jpg",
+    },
     {
         uuid: "hogmelon",
         name: "Hogermellon",
-        price: "1111",
-        labels: ["fish"],
+        price: 1111,
+        labels: [Labels.fish],
         image: "/wathog.jpg",
         detail: "Example",
     },
-    // bluhog: {
     {
         uuid: "bluhog",
         name: "Blue HOGGGGG",
-        price: "ARUGH",
-        labels: ["nut", "gluten", "spicy"],
+        price: 0,
+        labels: [Labels.nut, Labels.gluten, Labels.spicy],
         image: "/sonichog.jpg",
         detail: "Example",
     },
 ];
 
-export default Items;
+export default TestData;

front/src/lib/types.ts

@@ -0,0 +1,16 @@
+export interface Item {
+    uuid: string,
+    name: string,
+    price: number,
+    detail?: string,
+    labels: Labels[],
+    image?: string,
+}
+
+export enum Labels {
+    vegan = "VEGAN",
+    fish = "FISH",
+    nut = "NUT",
+    spicy = "SPICY",
+    gluten = "GLUTEN",
+}

front/src/pages/Page404.svelte

@@ -8,7 +8,7 @@
 </div>
 
 <style lang="scss">
-    @import "%/styles/vars";
+    @import "../styles/vars";
 
     div {
         padding: $spacing-large;

front/src/pages/Page500.svelte

@@ -8,7 +8,7 @@
 </div>
 
 <style lang="scss">
-    @import "%/styles/vars";
+    @import "../styles/vars";
 
     div {
         padding: $spacing-large;

front/src/pages/PageCart.svelte

@@ -1,10 +1,10 @@
 <script>
     import { link } from 'svelte-spa-router';
 
-    import { getItemsByUUID } from "%/lib/test-api.ts";
-    import LoadingBar from "%/components/LoadingBar.svelte";
-    import Cart from '%/lib/cart.ts';
-    import MenuList from "%/components/MenuList.svelte";
+    import { getItemsByUUID } from "../lib/test-api";
+    import Cart from "../lib/cart";
+    import LoadingBar from "../components/LoadingBar.svelte";
+    import MenuList from "../components/MenuList.svelte";
 
     $: items = getItemsByUUID($Cart.map((item) => item.uuid));
 </script>

front/src/pages/PageContact.svelte

@@ -1,9 +1,9 @@
 <script>
     import { PaperPlaneRight, SealWarning, SealCheck } from "phosphor-svelte";
 
-    import DropDown from "%/components/DropDown.svelte";
-    import { postContactEmail } from "%/lib/test-api.ts";
-    import { expandOnTyping } from "%/lib/utils.js";
+    import { postContactEmail } from "../lib/test-api";
+    import { expandOnTyping } from "../lib/utils";
+    import DropDown from "../components/DropDown.svelte";
 
     const minMessageLength = 150;
 
@@ -27,7 +27,7 @@
         messageValid = message.length > minMessageLength
     }
 
-    function onSubmit(event) {
+    function onSubmit() {
         formMessage = postContactEmail(name, email, message);
     }
 </script>
@@ -117,7 +117,7 @@
 </form>
 
 <style lang="scss">
-    @import "%/styles/vars";
+    @import "../styles/vars";
 
     #name, #email {
         width: 300px;

front/src/pages/PageIndex.svelte

@@ -4,10 +4,10 @@
     import { ArrowUpRight } from "phosphor-svelte";
     import L from 'leaflet';
 
-    import { getPopularToday } from "%/lib/test-api.ts";
-    import LoadingBar from "%/components/LoadingBar.svelte";
-    import AnnouncementBanner from "%/components/AnnouncementBanner.svelte";
-    import MenuList from "%/components/MenuList.svelte";
+    import { getPopularToday } from "../lib/test-api";
+    import LoadingBar from "../components/LoadingBar.svelte";
+    import AnnouncementBanner from "../components/AnnouncementBanner.svelte";
+    import MenuList from "../components/MenuList.svelte";
 
     let items = getPopularToday();
 
@@ -72,7 +72,7 @@
 
 
 <style lang="scss">
-    @import "%/styles/vars";
+    @import "../styles/vars";
 
     a {
         margin-top: 8px;

front/src/pages/PageItem.svelte

@@ -1,10 +1,10 @@
 <script>
     import { SmileySad } from "phosphor-svelte";
 
-    import Cart from "%/lib/cart.ts";
-    import { getPopularToday, getItemByUUID } from "%/lib/test-api.ts";
-    import MenuList from "%/components/MenuList.svelte";
-    import LoadingBar from "%/components/LoadingBar.svelte";
+    import { getPopularToday, getItemByUUID } from "../lib/test-api";
+    import Cart from "../lib/cart";
+    import MenuList from "../components/MenuList.svelte";
+    import LoadingBar from "../components/LoadingBar.svelte";
     import LoadingImage from "/MenuItemLoading.svg";
 
     export let params;
@@ -83,7 +83,7 @@
 </div>
 
 <style lang="scss">
-    @import "%/styles/vars";
+    @import "../styles/vars";
 
     $padding: 1px;
 

front/src/pages/PageLoading.svelte

@@ -1,5 +1,5 @@
 <script>
-    import LoadingBar from "%/components/LoadingBar.svelte";
+    import LoadingBar from "../components/LoadingBar.svelte";
 
     const FunnyMessages = [
         "*patiently waiting*",

front/src/pages/PageMenu.svelte

@@ -1,10 +1,10 @@
 <script>
     import { ArrowClockwise } from "phosphor-svelte";
 
-    import LoadingBar from "%/components/LoadingBar.svelte";
-    import MenuList from "%/components/MenuList.svelte";
-    import DropDown from "%/components/DropDown.svelte";
-    import { getMenuItems } from "%/lib/test-api.ts";
+    import { getMenuItems } from "../lib/test-api";
+    import LoadingBar from "../components/LoadingBar.svelte";
+    import MenuList from "../components/MenuList.svelte";
+    import DropDown from "../components/DropDown.svelte";
 
     let items = getMenuItems();
 
@@ -163,7 +163,7 @@
 </div>
 
 <style lang="scss">
-    @import "%/styles/vars";
+    @import "../styles/vars";
 
     .menu {
         display: flex;

front/src/styles/main.scss

@@ -7,4 +7,3 @@
 @import "container";
 @import "menu_item";
 @import "form_element";
-