Merge pull request #307 from xyvora/toast

Make toast into a shareable component

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}

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);
+}

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>

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">

frontend/tests/create_goals.spec.ts

@@ -60,7 +60,7 @@ test('end to end create goal', async ({ page }) => {
   await page.locator('#time-bound').fill(timeBound);
   await page.locator('#save-goal-button').click();
   await expect(page.locator('#toast-message')).toBeVisible();
-  await expect(page).toHaveURL('/');
+  await expect(page).toHaveURL('/', { timeout: 10000 });
 
   await page.getByLabel('account settings').click();
   await expect(page.locator('#btn-delete')).toBeVisible();