fix: fixed the promise bug

xiaoluoboding · Nov 7, 2023 · c297881 · c297881
1 parent 9608865
commit c297881
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 47 deletions.
diff --git a/packages/Toast.vue b/packages/Toast.vue
@@ -290,47 +290,6 @@ watchEffect(() => {
   offset.value = heightIndex.value * GAP + toastsHeightBefore.value
 })
 
-watchEffect(() => {
-  if (props.toast && isPromise(props.toast)) {
-    const toastInstance = props.toast
-    promiseStatus.value = 'loading'
-    const promiseHandler = (promise: Promise<any>) => {
-      promise
-        .then((data) => {
-          if (
-            toastInstance.success &&
-            typeof toastInstance.success === 'function'
-          ) {
-            promiseResult.value = toastInstance.success(data)
-          }
-          promiseStatus.value = 'success'
-        })
-        .catch((error) => {
-          if (
-            toastInstance.error &&
-            typeof toastInstance.error === 'function'
-          ) {
-            promiseResult.value = toastInstance.error(error)
-          }
-          promiseStatus.value = 'error'
-        })
-    }
-
-    // console.group('Toast begin')
-    // console.log(isPromise(props.toast))
-    // console.log(props.toast)
-    // console.log(props.toast.promise instanceof Promise)
-    // console.log(typeof props.toast.promise === 'function')
-    // console.groupEnd()
-
-    if (props.toast.promise instanceof Promise) {
-      promiseHandler(props.toast.promise as any)
-    } else if (typeof props.toast.promise === 'function') {
-      promiseHandler(props.toast?.promise?.())
-    }
-  }
-})
-
 function handleCloseToast() {
   if (!disabled.value || dismissible.value) {
     deleteToast()

diff --git a/packages/Toaster.vue b/packages/Toaster.vue
@@ -66,7 +66,8 @@ import {
   watch,
   watchEffect,
   useAttrs,
-  CSSProperties
+  CSSProperties,
+  nextTick
 } from 'vue'
 import {
   HeightT,
@@ -183,7 +184,16 @@ onMounted(() => {
       return
     }
 
-    toasts.value = [toast, ...toasts.value]
+    nextTick(() => {
+      const indexOfExistingToast = toasts.value.findIndex((t) => t.id === toast.id);
+
+      // Update the toast if it already exists
+      if (indexOfExistingToast !== -1) {
+        toasts.value.splice(indexOfExistingToast, 1, toast)
+      } else {
+        toasts.value = [toast, ...toasts.value]
+      }
+    })
   })
 
   onUnmounted(() => {

diff --git a/packages/state.ts b/packages/state.ts
@@ -31,7 +31,6 @@ class Observer {
 
   publish = (data: ToastT) => {
     this.subscribers.forEach((subscriber) => subscriber(data))
-    this.toasts = [...this.toasts, data]
   }
 
   addToast = (data: ToastT) => {
@@ -51,12 +50,12 @@ class Observer {
       typeof data?.id === 'number' || data.id?.length! > 0
         ? data.id!
         : toastsCounter++
-    const alreadyExists = this.toasts.find((toast) => {
+    const indexOfExistingToast = this.toasts.findIndex((toast) => {
       return toast.id === id
     })
     const dismissible = data.dismissible === undefined ? true : data.dismissible
 
-    if (alreadyExists) {
+    if (indexOfExistingToast !== -1) {
       this.toasts = this.toasts.map((toast) => {
         if (toast.id === id) {
           this.publish({ ...toast, ...data, id, title: message })

diff --git a/packages/styles.css b/packages/styles.css
@@ -516,12 +516,12 @@ html[dir='rtl'],
   --size: 16px;
   height: var(--size);
   width: var(--size);
-  position: absolute;
   inset: 0;
   z-index: 10;
 }
 
 .sonner-loading-wrapper[data-visible='false'] {
+  display: none;
   transform-origin: center;
   animation: sonner-fade-out 0.2s ease forwards;
 }