From 2a6f9feb5208884a684dba59d1f6f24046a21d2d Mon Sep 17 00:00:00 2001
From: Paul Sanders <psanders1@gmail.com>
Date: Thu, 10 Aug 2023 19:40:20 -0400
Subject: [PATCH] Make toast into a shareable component

---
 .../lib/components/ToastNotification.svelte   | 11 +++++++++
 frontend/src/lib/stores/stores.ts             | 23 +++++++++++++++++++
 frontend/src/routes/+layout.svelte            |  2 ++
 frontend/src/routes/create-goals/+page.svelte | 18 ++-------------
 4 files changed, 38 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/lib/components/ToastNotification.svelte

diff --git a/frontend/src/lib/components/ToastNotification.svelte b/frontend/src/lib/components/ToastNotification.svelte
new file mode 100644
index 00000000..e7a1e6be
--- /dev/null
+++ b/frontend/src/lib/components/ToastNotification.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { showToast, toastMessage } from '$lib/stores/stores';
+</script>
+
+{#if $showToast}
+  <div class="toast" id="toast-message">
+    <div class="alert alert-info">
+      <span>{$toastMessage}</span>
+    </div>
+  </div>
+{/if}
diff --git a/frontend/src/lib/stores/stores.ts b/frontend/src/lib/stores/stores.ts
index b17e8eca..d6fccd27 100644
--- a/frontend/src/lib/stores/stores.ts
+++ b/frontend/src/lib/stores/stores.ts
@@ -48,3 +48,26 @@ export const isLoading = writable<boolean>(false);
 isLoading.subscribe((value: boolean) => {
   return value;
 });
+
+export const showToast = writable<boolean>(false);
+
+showToast.subscribe((value: boolean) => {
+  return value;
+});
+
+export const toastMessage = writable<string>();
+
+toastMessage.subscribe((value: string) => {
+  return value;
+});
+
+function delay(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export async function setToast(message: string, timeout = 5000) {
+  toastMessage.set(message);
+  showToast.set(true);
+  await delay(timeout);
+  showToast.set(false);
+}
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 3c4c90ba..5c3e74db 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
   import '../app.css';
   import Navbar from '$lib/components/Navbar.svelte';
+  import ToastNotification from '$lib/components/ToastNotification.svelte';
 </script>
 
 <div class="flex flex-col h-screen">
   <Navbar />
   <slot />
+  <ToastNotification />
 </div>
 
 <style>
diff --git a/frontend/src/routes/create-goals/+page.svelte b/frontend/src/routes/create-goals/+page.svelte
index a22bb183..69880d08 100644
--- a/frontend/src/routes/create-goals/+page.svelte
+++ b/frontend/src/routes/create-goals/+page.svelte
@@ -4,6 +4,7 @@
   import DaysOfWeekSelector from '$lib/components/DaysOfWeekSelector.svelte';
   import Message from '$lib/components/Message.svelte';
   import { createGoal } from '$lib/api';
+  import { setToast } from '$lib/stores/stores';
 
   let goal: GoalCreate = {
     days_of_week: {
@@ -19,7 +20,6 @@
 
   let selectAll = false;
   let goalError = false;
-  let showToast = false;
 
   const toggleAll = () => {
     selectAll = !selectAll;
@@ -33,10 +33,6 @@
     }
   };
 
-  function delay(ms: number) {
-    return new Promise((resolve) => setTimeout(resolve, ms));
-  }
-
   async function handleSave() {
     goalError = false;
 
@@ -50,13 +46,10 @@
 
     try {
       await createGoal(goal);
-      showToast = true;
-      await delay(3000);
-      showToast = false;
+      await setToast('Goal successfully saved, returning home.');
       goto('/');
     } catch (error) {
       console.log(error);
-      showToast = false;
     }
   }
 
@@ -499,13 +492,6 @@
           >Save Smart Goal</button
         >
       </div>
-      {#if showToast}
-        <div class="toast" id="toast-message">
-          <div class="alert alert-info">
-            <span>Goal successfully saved, returning home.</span>
-          </div>
-        </div>
-      {/if}
     </div>
 
     <div class="flex">