fix: fixed multiple toast issue

Author: technikhil314

README.md

@@ -60,8 +60,8 @@ For detailed explanation on how things work, check out the [documentation](https
 
 # TODO
 
-- Add support for multiple languages like json,yaml,xml etc
-- Enable syntax highlighting
-- Auto detect language
-- Add small shadow to line numbers
-- Fix toast issue. (Click on copy button while toast is on)
+- [ ] Add support for multiple languages like json,yaml,xml etc
+- [ ] Enable syntax highlighting
+- [ ] Auto detect language
+- [ ] Add small shadow to line numbers
+- [x] Fix toast issue. (Click on copy button while toast is on)

pages/diff/_diff.vue

@@ -127,7 +127,8 @@ export default {
   methods: {
     putToClipboard(textToPut, toastContent) {
       navigator.clipboard.writeText(textToPut)
-      this.$store.commit('toast/setData', {
+      this.$store.commit('toast/show', {
+        show: true,
         content: toastContent,
         iconHTML: `
           <svg
@@ -147,13 +148,6 @@ export default {
         `,
         theme: 'success',
       })
-      this.$store.commit('toast/toggle')
-      setTimeout(() => {
-        this.$store.commit('toast/toggle')
-      }, 5000)
-      setTimeout(() => {
-        this.$store.commit('toast/clean')
-      }, 5500)
     },
     copyUrlToClipboard() {
       this.putToClipboard(window.location.href, 'Link copied to your clipboard')

store/toast.js

@@ -6,20 +6,30 @@ export const state = () => ({
   autoDismis: true,
   timeout: 5000
 })
-
+let timeoutId = null;
 export const mutations = {
-  toggle(state) {
-    state.show = state.content && !state.show;
-  },
-  setData(state, { theme = "info", content = "", iconHTML = "" }) {
+  show(state, {
+    show,
+    content,
+    iconHTML,
+    theme
+  }) {
+    if (!show) {
+      state.show = show;
+      return;
+    }
+    const isAlreadyShowing = state.show;
     state.content = content;
     state.theme = theme;
     state.iconHTML = iconHTML
+    state.show = content && show;
+    if (isAlreadyShowing && state.show && timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    if (state.show) {
+      timeoutId = setTimeout(() => {
+        this.commit('toast/show', { show: false })
+      }, 5000)
+    }
   },
-  clean(state) {
-    state.show = false;
-    state.content = "";
-    state.theme = "info";
-    state.iconHTML = ""
-  }
 }