finishes notificationStore

packages/client/src/components/ClientApp.svelte

@@ -2,7 +2,6 @@
   import { writable } from "svelte/store"
   import { setContext, onMount } from "svelte"
   import Component from "./Component.svelte"
-  import NotificationDisplay from './NotificationDisplay.svelte'
   import SDK from "../sdk"
   import { createDataStore, initialise, screenStore, notificationStore } from "../store"
 
@@ -10,7 +9,7 @@
   setContext("sdk", SDK)
   setContext("component", writable({}))
   setContext("data", createDataStore())
-  setContext("notifier", notificationStore)
+  setContext("notification", notificationStore)
   setContext("screenslot", false)
 
   let loaded = false
@@ -24,5 +23,4 @@
 
 {#if loaded && $screenStore.activeLayout}
   <Component definition={$screenStore.activeLayout.props} />
-{/if}
-<NotificationDisplay />
+{/if}

packages/client/src/components/NotificationDisplay.svelte

@@ -1,71 +0,0 @@
-<script>
-    import { getContext } from "svelte"
-    import { fly } from "svelte/transition"
-    
-    export let themes = {
-        danger: "#E26D69",
-        success: "#84C991",
-        warning: "#f0ad4e",
-        info: "#5bc0de",
-        default: "#aaaaaa",
-    }
-    
-    export let timeout = 3000
-    
-    const notificationStore = getContext("notification")
-  
-    $: if ($notificationStore.notifications.length) {
-      setTimeout(() => {
-        notificationStore.update(state => {
-          state.notifications.shift()
-          state.notifications = state.notifications
-          return state
-        })
-      }, timeout)
-    }
-  </script>
-  
-  <div class="notifications">
-    {#each $notificationStore.notifications as notification (notification.id)}
-      <div
-        class="toast"
-        style="background: {themes[notification.type]};"
-        transition:fly={{ y: -30 }}>
-        <div class="content">{notification.message}</div>
-        {#if notification.icon}<i class={notification.icon} />{/if}
-      </div>
-    {/each}
-  </div>
-  
-  <style>
-    .notifications {
-      position: fixed;
-      top: 10px;
-      left: 0;
-      right: 0;
-      margin: 0 auto;
-      padding: 0;
-      z-index: 9999;
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      align-items: center;
-      pointer-events: none;
-    }
-  
-    .toast {
-      flex: 0 0 auto;
-      margin-bottom: 10px;
-      border-radius: var(--border-radius-s);
-      /* The toasts now support being auto sized, so this static width could be removed */
-      width: 40vw;
-    }
-  
-    .content {
-      padding: 10px;
-      display: block;
-      color: white;
-      font-weight: 500;
-    }
-  </style>
-  

packages/client/src/store/notification.js

@@ -1,29 +1,37 @@
 import { writable, derived } from "svelte/store"
+import { generate } from "shortid"
+
 
 let NOTIFICATION_TIMEOUT = 3000
 
-export const createNotificationStore = () => {
+const createNotificationStore = () => {
   const _notifications = writable([])
   
 	const send = (message, type = "default") => {
     _notifications.update(state => {
-      state = [
+      return [
         ...state,
-        { id: 1, type, message },
+        { id: generate(), type, message },
       ]
     })
   }
   
   const notifications = derived(_notifications, ($_notifications, set) => {
-		 const timeout = setTimeout({
-			set($_notifications)
-			}, NOTIFICATION_TIMEOUT)
-
-			return () => {
-				clearTimeout(timeout);
-			};
+    set($_notifications)
+    if ($_notifications.length > 0) {
+      const timeout = setTimeout(() => {
+        _notifications.update(state => {
+          state.shift()
+          return state
+        })
+        set($_notifications)
+      }, NOTIFICATION_TIMEOUT)
+      return () => {
+        clearTimeout(timeout);
+      };
+    }
 	})
-  const {subscribe} = notifications
+  const { subscribe } = notifications
 
   return {
     subscribe,
@@ -33,4 +41,14 @@ export const createNotificationStore = () => {
   	info: msg => send(msg, "info"),
   	success: msg => send(msg, "success"),
   }
-}
+}
+
+export const notificationStore = createNotificationStore()
+
+// setTimeout(() => {
+//   notificationStore.update(state => {
+//     state.notifications.shift()
+//     state.notifications = state.notifications
+//     return state
+//   })
+// }, timeout)

packages/standard-components/src/Icon.svelte

@@ -3,6 +3,9 @@
 
   const { styleable } = getContext("sdk")
   const component = getContext("component")
+  const notification = getContext("notification")
+
+  $: console.log($notification)
 
   export let icon = ""
   export let size = "fa-lg"
@@ -17,4 +20,8 @@
 </script>
 
 <i use:styleable={styles}
-  class="{icon} {size}" />
+  class="{icon} {size}" />
+
+  <button on:click={() => {
+    notification.send('Hello!')
+  }}></button>