replaced remove by dismiss

vuestorefront · Jan 13, 2021 · 0856c3a · 0856c3a
1 parent 66e5e02
commit 0856c3a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 14 deletions.
diff --git a/packages/core/nuxt-theme-module/theme/components/Notification.vue b/packages/core/nuxt-theme-module/theme/components/Notification.vue
@@ -1,13 +1,13 @@
 <template>
   <transition-group tag="div" class="notifications" :name="isMobile ? 'slide' : 'sf-fade'">
     <SfNotification
-      v-for="(notification, index) in notifications"
+      v-for="notification in notifications"
       :key="notification.id"
       :visible="true"
       :message="notification.message"
       :action="notification.action && notification.action.text"
       :type="notification.type"
-      @click:close="remove(index)"
+      @click:close="notification.dismiss()"
       @click:action="notification.action && notification.action.onClick()"
     >
       <template #icon v-if="notification.icon">
@@ -32,8 +32,6 @@ export default {
     const { notifications } = useUiNotification();
     const isMobile = ref(false);
 
-    const remove = (index) => notifications.value.splice(index, 1);
-
     const mobileHandler = (event) => {
       isMobile.value = event.matches;
     };
@@ -53,7 +51,6 @@ export default {
 
     return {
       notifications,
-      remove,
       isMobile
     };
   }

diff --git a/packages/core/nuxt-theme-module/theme/composables/useUiNotification/index.ts b/packages/core/nuxt-theme-module/theme/composables/useUiNotification/index.ts
@@ -6,7 +6,8 @@ interface UiNotification {
   type: 'danger' | 'success' | 'info';
   icon: string;
   persist: boolean;
-  id?: symbol;
+  id: symbol;
+  dismiss: () => void;
 }
 
 interface Notifications {
@@ -18,22 +19,27 @@ const state = reactive<Notifications>({
 });
 
 const useUiNotification = () => {
-  const remove = (id: symbol) => {
-    const index = state.notifications.findIndex(notification => notification.id === id);
-
-    if (index !== -1) state.notifications.splice(index, 1);
-  };
-
   const send = (notification: UiNotification) => {
     const id = Symbol();
-    const newNotification = { id, ...notification };
+
+    const dismiss = () => {
+      const index = state.notifications.findIndex(notification => notification.id === id);
+
+      if (index !== -1) state.notifications.splice(index, 1);
+    };
+
+    const newNotification = {
+      ...notification,
+      id,
+      dismiss
+    };
 
     state.notifications.push(newNotification);
     if (state.notifications.length > 3) state.notifications.shift();
 
     if (!notification.persist) {
       setTimeout(() => {
-        remove(id);
+        dismiss();
       }, 3000);
     }
   };