From b1fd5a59affa810658df838f8c31f2901234a393 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Wed, 28 Jul 2021 16:04:44 -0700
Subject: [PATCH] Animations on the toast messages and remove on click.

---
 src/lib/toast/Toast.svelte | 12 ++++++++++--
 src/lib/toast/toast.js     | 11 +++++++++--
 src/routes/index.svelte    |  2 +-
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/lib/toast/Toast.svelte b/src/lib/toast/Toast.svelte
index f01dacf..69631ca 100644
--- a/src/lib/toast/Toast.svelte
+++ b/src/lib/toast/Toast.svelte
@@ -1,12 +1,20 @@
 <script>
+	import { fly, fade } from 'svelte/transition';
+	import { flip } from 'svelte/animate';
 	import Portal from '../Portal.svelte';
 	import { toast } from './toast';
 </script>
 
 <Portal>
 	<div class="toast-wrapper">
-		{#each $toast as message}
-			<div class="toast">
+		{#each $toast as message (message)}
+			<div
+				on:click={toast.remove}
+				animate:flip
+				out:fade
+				in:fly={{ opacity: 0, x: 100 }}
+				class="toast"
+			>
 				<p>{message}</p>
 			</div>
 		{/each}
diff --git a/src/lib/toast/toast.js b/src/lib/toast/toast.js
index e5df451..a8956ff 100644
--- a/src/lib/toast/toast.js
+++ b/src/lib/toast/toast.js
@@ -6,10 +6,17 @@ const newToast = () => {
   function send(message) {
     update((state) => {
       return [...state, message];
-    })
+    });
   }
 
-  return { subscribe, send };
+  function remove() {
+    update((state) => {
+      let [first, ...rest] = state;
+      return [...rest];
+    });
+  }
+
+  return { subscribe, send, remove };
 }
 
 export const toast = newToast();
\ No newline at end of file
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 463dff9..1c6743e 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -27,7 +27,7 @@
 </Modal>
 
 <Toast />
-<button on:click={() => toast.send('New Message')}>New Toast</button>
+<button on:click={() => toast.send('New Message' + Math.random())}>New Toast</button>
 
 <!-- <button on:click={() => (isModalOpen = true)}>Open Modal Form</button> -->