From 109386bf5134e3da71a2dc160776d2bbbceaf77c Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Sat, 27 Apr 2024 17:37:08 +0100
Subject: [PATCH] Clean up file structure Speed up compile times

---
 api/{testData.go => test_data.go}             |   0
 front/src/App.svelte                          | 156 ++++++++++++++++--
 front/src/components/DropDown.svelte          |   2 +-
 .../elements => components}/LoadingBar.svelte |   0
 .../elements => components}/MenuItem.svelte   |   7 +-
 .../elements => components}/MenuList.svelte   |   2 +-
 front/src/pages/Page404.svelte                |   2 +-
 front/src/pages/PageContact.svelte            |   2 +-
 front/src/pages/PageIndex.svelte              |  66 ++------
 front/src/pages/PageItem.svelte               |   2 +-
 front/src/pages/PageLoading.svelte            |   2 +-
 front/src/pages/PageMenu.svelte               |   4 +-
 .../pages/elements/AnnouncementBanner.svelte  |  10 --
 front/src/pages/elements/FooterBar.svelte     |  83 ----------
 front/src/pages/elements/NavigationBar.svelte |  54 ------
 15 files changed, 171 insertions(+), 221 deletions(-)
 rename api/{testData.go => test_data.go} (100%)
 rename front/src/{pages/elements => components}/LoadingBar.svelte (100%)
 rename front/src/{pages/elements => components}/MenuItem.svelte (80%)
 rename front/src/{pages/elements => components}/MenuList.svelte (90%)
 delete mode 100644 front/src/pages/elements/AnnouncementBanner.svelte
 delete mode 100644 front/src/pages/elements/FooterBar.svelte
 delete mode 100644 front/src/pages/elements/NavigationBar.svelte

diff --git a/api/testData.go b/api/test_data.go
similarity index 100%
rename from api/testData.go
rename to api/test_data.go
diff --git a/front/src/App.svelte b/front/src/App.svelte
index 2f5dd92..ef978b5 100644
--- a/front/src/App.svelte
+++ b/front/src/App.svelte
@@ -1,17 +1,31 @@
 <script>
     import Router from 'svelte-spa-router';
-    import { replace } from 'svelte-spa-router';
+    import { replace, link } from 'svelte-spa-router';
+    import active from 'svelte-spa-router/active'
     import routes from '%/routes.js';
-    import NavigationBar from "%/pages/elements/NavigationBar.svelte";
-    import FooterBar from "%/pages/elements/FooterBar.svelte";
+    import TwitterLogo from 'phosphor-svelte/lib/TwitterLogo';
+    import FacebookLogo from 'phosphor-svelte/lib/FacebookLogo';
+    import InstagramLogo from 'phosphor-svelte/lib/InstagramLogo';
+    import TiktokLogo from 'phosphor-svelte/lib/TiktokLogo';
+    import Logo from '/LogoAlt.svg';
 
-    let oldLocation = undefined;
-    let showNavBar = false;
-    let fullWidth = false;
+    const links = {
+        home: {path: '/', className: 'active'},
+        menu: {path: '/menu', className: 'active'},
+        contact: {path: '/contact', className: 'active'},
+        cart: {path: '/cart', className: 'active'},
+    }
 
     let windowScrollY = 0;
     let windowWidth = 0;
 
+    let oldLocation = undefined;
+    let fullWidth = false;
+    let showNavBar = false;
+
+    $: scrolled = windowScrollY > 0
+    $: mobile = windowWidth < 700
+
     function routeLoading(event) {
         if (event.detail.location === oldLocation) {
             return; // not an actual change
@@ -31,16 +45,48 @@
     <link rel="stylesheet" href="https://api.fontshare.com/v2/css?f[]=erode@300,301,400,401,500,501,600,601,700,701,1,2&display=swap">
 </svelte:head>
 
+
 {#if showNavBar }
-    <NavigationBar
-        scrolled={windowScrollY > 0}
-        mobile={windowWidth < 700}
-    />
+    <nav class:scrolled={scrolled} class:mobile={mobile}>
+        {#if !mobile}
+            <ul style="justify-content: flex-end">
+                <li use:active={links.home}>
+                    <a href="/" use:link>Home</a>
+                </li>
+                <li use:active={links.menu}>
+                    <a href="/menu" use:link>Menu</a>
+                </li>
+            </ul>
+
+            <span><img src={Logo} alt="TastyBites"></span>
+
+            <ul style="justify-content: flex-start">
+                <li use:active={links.contact}>
+                    <a href="/contact" use:link>Contact&nbsp;Us</a>
+                </li>
+                <li use:active={links.cart}>
+                    <a href="/cart" use:link>Cart</a>
+                </li>
+            </ul>
+        {:else}
+            <ul>
+                <li use:active={links.home}>
+                    <a href="/" use:link>Home</a>
+                </li>
+                <li use:active={links.menu}>
+                    <a href="/menu" use:link>Menu</a>
+                </li>
+                <li use:active={links.contact}>
+                    <a href="/contact" use:link>Contact&nbsp;Us</a>
+                </li>
+                <li use:active={links.cart}>
+                    <a href="/cart" use:link>Cart</a>
+                </li>
+            </ul>
+        {/if}
+    </nav>
 {/if}
-<main
-    class:nav-space={showNavBar}
-    class:full-width={fullWidth}
->
+<main class:nav-space={showNavBar} class:full-width={fullWidth}>
     <Router
         routes={routes}
         restoreScrollState={true}
@@ -48,4 +94,84 @@
         on:conditionsFailed={conditionFailure}
     />
 </main>
-<FooterBar />
+<footer>
+    <div class="footer-section">
+        <p>TastyBites is not a real restaurant</p>
+        <p>gwagwa</p>
+    </div>
+    <div class="footer-section">
+        <h4>Find us on:</h4>
+        <ul>
+            <li><a href="www.twitter.com"><TwitterLogo weight="fill"/></a></li>
+            <li><a href="www.twitter.com"><FacebookLogo weight="fill"/></a></li>
+            <li><a href="www.twitter.com"><InstagramLogo weight="fill"/></a></li>
+            <li><a href="www.twitter.com"><TiktokLogo weight="fill"/></a></li>
+        </ul>
+    </div>
+</footer>
+
+<style lang="scss">
+    // ToDo: Move this SCSS to its own _footer.scss file
+    footer {
+        padding: 16px;
+
+        position: relative;
+
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: center;
+
+        border-top: 2px solid #6A9343;
+        background-color: #443023;
+        color: #e1dcd3;
+
+        overflow: hidden;
+    }
+
+    .footer-section {
+        padding: 16px;
+
+        min-width: 200px;
+        width: 100%;
+        max-width: 500px;
+
+        > ul {
+            padding: 0;
+
+            display: flex;
+            flex-direction: row;
+
+            > li {
+                margin: 0 16px 0 0;
+                list-style: none;
+
+                > a {
+                    height: 40px;
+                    width: 40px;
+
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+
+                    text-decoration: none;
+                    font-size: 16px;
+
+                    border-radius: 99999px;
+                    background-color: transparent;
+                    color: #e1dcd3;
+
+                    &:hover {
+                        background-color: #fffbf4;
+                        color: #33251a;
+                    }
+                }
+            }
+        }
+
+        > h4 {
+            margin-bottom: 10px;
+        }
+    }
+</style>
+
diff --git a/front/src/components/DropDown.svelte b/front/src/components/DropDown.svelte
index bd390c1..a4d8a9e 100644
--- a/front/src/components/DropDown.svelte
+++ b/front/src/components/DropDown.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { CaretDown } from "phosphor-svelte";
+    import CaretDown from "phosphor-svelte/lib/CaretDown";
 
     export let open = false;
     export let name;
diff --git a/front/src/pages/elements/LoadingBar.svelte b/front/src/components/LoadingBar.svelte
similarity index 100%
rename from front/src/pages/elements/LoadingBar.svelte
rename to front/src/components/LoadingBar.svelte
diff --git a/front/src/pages/elements/MenuItem.svelte b/front/src/components/MenuItem.svelte
similarity index 80%
rename from front/src/pages/elements/MenuItem.svelte
rename to front/src/components/MenuItem.svelte
index 2d9b142..3fb1c70 100644
--- a/front/src/pages/elements/MenuItem.svelte
+++ b/front/src/components/MenuItem.svelte
@@ -1,6 +1,11 @@
 <script>
     import { link } from 'svelte-spa-router';
-    import { Acorn, Fish, Leaf, Pepper, ArrowUpRight, GrainsSlash } from "phosphor-svelte"
+    import Acorn from 'phosphor-svelte/lib/Acorn';
+    import Fish from 'phosphor-svelte/lib/Fish';
+    import Leaf from 'phosphor-svelte/lib/Leaf';
+    import Pepper from 'phosphor-svelte/lib/Pepper';
+    import ArrowUpRight from 'phosphor-svelte/lib/ArrowUpRight';
+    import GrainsSlash from 'phosphor-svelte/lib/GrainsSlash';
     import LoadingImage from '/MenuItemLoadingAlt.svg';
 
     export let id;
diff --git a/front/src/pages/elements/MenuList.svelte b/front/src/components/MenuList.svelte
similarity index 90%
rename from front/src/pages/elements/MenuList.svelte
rename to front/src/components/MenuList.svelte
index 161dbfd..ef96599 100644
--- a/front/src/pages/elements/MenuList.svelte
+++ b/front/src/components/MenuList.svelte
@@ -1,5 +1,5 @@
 <script>
-    import MenuItem from "%/pages/elements/MenuItem.svelte";
+    import MenuItem from "%/components/MenuItem.svelte";
 
     export let items = [];
 </script>
diff --git a/front/src/pages/Page404.svelte b/front/src/pages/Page404.svelte
index a1c8584..e3ffa25 100644
--- a/front/src/pages/Page404.svelte
+++ b/front/src/pages/Page404.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { SmileySad } from "phosphor-svelte";
+    import SmileySad from "phosphor-svelte/lib/SmileySad";
 
     export let params = {};
 </script>
diff --git a/front/src/pages/PageContact.svelte b/front/src/pages/PageContact.svelte
index 6f3a256..0389d84 100644
--- a/front/src/pages/PageContact.svelte
+++ b/front/src/pages/PageContact.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { PaperPlaneRight } from "phosphor-svelte";
+    import PaperPlaneRight from "phosphor-svelte/lib/PaperPlaneRight";
     import DropDown from "%/components/DropDown.svelte";
     import { expandOnTyping } from "%/lib/utils.js";
 
diff --git a/front/src/pages/PageIndex.svelte b/front/src/pages/PageIndex.svelte
index e5ee40d..96698cb 100644
--- a/front/src/pages/PageIndex.svelte
+++ b/front/src/pages/PageIndex.svelte
@@ -1,16 +1,14 @@
 <script>
     import { onMount } from "svelte";
     import { link } from 'svelte-spa-router';
-    import { ArrowUpRight } from "phosphor-svelte";
     import { map, tileLayer, marker } from 'leaflet';
+    import ArrowUpRight from "phosphor-svelte/lib/ArrowUpRight";
+    import MenuList from "%/components/MenuList.svelte";
     import { getPopularToday } from "%/lib/api.js";
-    import AnnouncementBanner from "%/pages/elements/AnnouncementBanner.svelte";
-    import MenuList from "%/pages/elements/MenuList.svelte";
-
+    import BannerImage from '/BannerExampleImage.jpg';
 
     let items = getPopularToday();
 
-
     onMount(() => {
         let Map = map('map').setView([50.82304922105467, -0.432780150496344], 13);
         tileLayer(
@@ -23,12 +21,12 @@
 </script>
 
 <svelte:head>
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
-          integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
-          crossorigin=""/>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
 </svelte:head>
 
-<AnnouncementBanner />
+<div class="announcement-banner">
+    <img src={BannerImage} alt="">
+</div>
 <a href="/annoucements" use:link>Learn More <ArrowUpRight /></a>
 <div class="spacer" />
 
@@ -40,46 +38,14 @@
         <p>Example text</p>
         <div id="timetable">
             <table>
-                <tr>
-                    <th>Day</th>
-                    <th>Opening</th>
-                    <th>Closing</th>
-                </tr>
-                <tr>
-                    <td>Monday</td>
-                    <td>9am</td>
-                    <td>12pm</td>
-                </tr>
-                <tr>
-                    <td>Tuesday</td>
-                    <td>9am</td>
-                    <td>12pm</td>
-                </tr>
-                <tr>
-                    <td>Wednesday</td>
-                    <td>9am</td>
-                    <td>12pm</td>
-                </tr>
-                <tr>
-                    <td>Thursday</td>
-                    <td>9am</td>
-                    <td>12pm</td>
-                </tr>
-                <tr>
-                    <td>Friday</td>
-                    <td>9am</td>
-                    <td>12pm</td>
-                </tr>
-                <tr>
-                    <td>Saturday</td>
-                    <td>11am</td>
-                    <td>2am</td>
-                </tr>
-                <tr>
-                    <td>Sunday</td>
-                    <td>11am</td>
-                    <td>2am</td>
-                </tr>
+                <tr><th>Day</th><th>Opening</th><th>Closing</th></tr>
+                <tr><td>Monday</td><td>9am</td><td>12pm</td></tr>
+                <tr><td>Tuesday</td><td>9am</td><td>12pm</td></tr>
+                <tr><td>Wednesday</td><td>9am</td><td>12pm</td></tr>
+                <tr><td>Thursday</td><td>9am</td><td>12pm</td></tr>
+                <tr><td>Friday</td><td>9am</td><td>12pm</td></tr>
+                <tr><td>Saturday</td><td>11am</td><td>2am</td></tr>
+                <tr><td>Sunday</td><td>11am</td><td>2am</td></tr>
             </table>
         </div>
     </div>
@@ -92,7 +58,7 @@
 {:then items}
     <MenuList {items} />
 {:catch error}
-    <p>Failed to get todays specials!</p>
+    <p>{error}</p>
 {/await}
 <a href="/menu" use:link>See All <ArrowUpRight /></a>
 <div class="spacer" />
diff --git a/front/src/pages/PageItem.svelte b/front/src/pages/PageItem.svelte
index 1526a86..ca84e2c 100644
--- a/front/src/pages/PageItem.svelte
+++ b/front/src/pages/PageItem.svelte
@@ -1,5 +1,5 @@
 <script>
-    import MenuList from "%/pages/elements/MenuList.svelte";
+    import MenuList from "%/components/MenuList.svelte";
     import LoadingImage from "/MenuItemLoading.svg";
     import Items from '%/lib/testData.js';
 
diff --git a/front/src/pages/PageLoading.svelte b/front/src/pages/PageLoading.svelte
index 234f75a..cf93e59 100644
--- a/front/src/pages/PageLoading.svelte
+++ b/front/src/pages/PageLoading.svelte
@@ -1,5 +1,5 @@
 <script>
-    import LoadingBar from "%/pages/elements/LoadingBar.svelte";
+    import LoadingBar from "%/components/LoadingBar.svelte";
 
     const FunnyMessages = [
         "*patiently waiting*",
diff --git a/front/src/pages/PageMenu.svelte b/front/src/pages/PageMenu.svelte
index 2ee38cf..1408e47 100644
--- a/front/src/pages/PageMenu.svelte
+++ b/front/src/pages/PageMenu.svelte
@@ -1,6 +1,6 @@
 <script>
-    import { ArrowClockwise } from "phosphor-svelte";
-    import MenuList from "%/pages/elements/MenuList.svelte";
+    import ArrowClockwise from "phosphor-svelte/lib/ArrowClockwise";
+    import MenuList from "%/components/MenuList.svelte";
     import DropDown from "%/components/DropDown.svelte";
     import { getMenuItems } from "%/lib/api.js";
 
diff --git a/front/src/pages/elements/AnnouncementBanner.svelte b/front/src/pages/elements/AnnouncementBanner.svelte
deleted file mode 100644
index 3642796..0000000
--- a/front/src/pages/elements/AnnouncementBanner.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script>
-    // import LoadingBar from "%/pages/elements/LoadingBar.svelte";
-    // import BannerImage from '/BannerLoading.svg';
-    import BannerImage from '/BannerExampleImage.jpg';
-</script>
-
-<div class="announcement-banner">
-<!--    <LoadingBar bottom={true} />-->
-    <img src={BannerImage} alt="">
-</div>
diff --git a/front/src/pages/elements/FooterBar.svelte b/front/src/pages/elements/FooterBar.svelte
deleted file mode 100644
index b4290f5..0000000
--- a/front/src/pages/elements/FooterBar.svelte
+++ /dev/null
@@ -1,83 +0,0 @@
-<script>
-    import { TwitterLogo, FacebookLogo, InstagramLogo, TiktokLogo } from "phosphor-svelte"
-</script>
-
-<footer>
-    <div class="footer-section">
-        <p>TastyBites is not a real restaurant</p>
-        <p>gwagwa</p>
-    </div>
-    <div class="footer-section">
-        <h4>Find us on:</h4>
-        <ul>
-            <li><a href="www.twitter.com"><TwitterLogo weight="fill"/></a></li>
-            <li><a href="www.twitter.com"><FacebookLogo weight="fill"/></a></li>
-            <li><a href="www.twitter.com"><InstagramLogo weight="fill"/></a></li>
-            <li><a href="www.twitter.com"><TiktokLogo weight="fill"/></a></li>
-        </ul>
-    </div>
-</footer>
-
-<style lang="scss">
-    footer {
-        padding: 16px;
-
-        position: relative;
-
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: center;
-
-        border-top: 2px solid #6A9343;
-        background-color: #443023;
-        color: #e1dcd3;
-
-        overflow: hidden;
-    }
-
-    .footer-section {
-        padding: 16px;
-
-        min-width: 200px;
-        width: 100%;
-        max-width: 500px;
-
-        > ul {
-            padding: 0;
-
-            display: flex;
-            flex-direction: row;
-
-            > li {
-                margin: 0 16px 0 0;
-                list-style: none;
-
-                > a {
-                    height: 40px;
-                    width: 40px;
-
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-
-                    text-decoration: none;
-                    font-size: 16px;
-
-                    border-radius: 99999px;
-                    background-color: transparent;
-                    color: #e1dcd3;
-
-                    &:hover {
-                        background-color: #fffbf4;
-                        color: #33251a;
-                    }
-                }
-            }
-        }
-
-        > h4 {
-            margin-bottom: 10px;
-        }
-    }
-</style>
diff --git a/front/src/pages/elements/NavigationBar.svelte b/front/src/pages/elements/NavigationBar.svelte
deleted file mode 100644
index eca8b4a..0000000
--- a/front/src/pages/elements/NavigationBar.svelte
+++ /dev/null
@@ -1,54 +0,0 @@
-<script>
-    import { link } from 'svelte-spa-router';
-    import active from 'svelte-spa-router/active'
-    import Logo from '/LogoAlt.svg';
-
-    const links = {
-        home: {path: '/', className: 'active'},
-        menu: {path: '/menu', className: 'active'},
-        contact: {path: '/contact', className: 'active'},
-        cart: {path: '/cart', className: 'active'},
-    }
-
-    export let scrolled = false;
-    export let mobile = false;
-</script>
-
-<nav class:scrolled={scrolled} class:mobile={mobile}>
-    {#if !mobile}
-        <ul style="justify-content: flex-end">
-            <li use:active={links.home}>
-                <a href="/" use:link>Home</a>
-            </li>
-            <li use:active={links.menu}>
-                <a href="/menu" use:link>Menu</a>
-            </li>
-        </ul>
-
-        <span><img src={Logo} alt="TastyBites"></span>
-
-        <ul style="justify-content: flex-start">
-            <li use:active={links.contact}>
-                <a href="/contact" use:link>Contact&nbsp;Us</a>
-            </li>
-            <li use:active={links.cart}>
-                <a href="/cart" use:link>Cart</a>
-            </li>
-        </ul>
-    {:else}
-        <ul>
-            <li use:active={links.home}>
-                <a href="/" use:link>Home</a>
-            </li>
-            <li use:active={links.menu}>
-                <a href="/menu" use:link>Menu</a>
-            </li>
-            <li use:active={links.contact}>
-                <a href="/contact" use:link>Contact&nbsp;Us</a>
-            </li>
-            <li use:active={links.cart}>
-                <a href="/cart" use:link>Cart</a>
-            </li>
-        </ul>
-    {/if}
-</nav>