Merge pull request #594 from Swastik19Nit/fix/error-handling-toast

fix: "Cannot read properties of undefined (reading '__esModule')" Error

src/components/atoms/GlobalErrorHandler.vue

@@ -1,38 +1,43 @@
 <template>
-  <div>
-    <Toast position="top-right" auto-close="{3000}" :render="error()" />
-  </div>
+  <div />
 </template>
 
 <script>
-import Toast from 'vue-toastification'
-import 'vue-toastification/dist/index.css'
+import { mapState, mapMutations } from 'vuex'
 
 export default {
-  components: { Toast },
+  data() {
+    return {
+      previousErrorMessage: '',
+      previousErrorCode: '',
+    }
+  },
   computed: {
-    isError() {
-      return (
-        this.$store.state.error.message || this.$store.state.error.errorCode
-      )
-    },
+    ...mapState({
+      error: (state) => state.error,
+    }),
   },
-  methods: {
-    error() {
-      const mainError = this.$store.state.error
-      if (mainError && (mainError.message || mainError.errorCode)) {
+  watch: {
+    error: {
+      immediate: true,
+      deep: true,
+      handler(newError) {
         if (
-          this.previousErrorMessage !== mainError.message ||
-          this.previousErrorCode !== mainError.errorCode
+          newError &&
+          (newError.message || newError.errorCode) &&
+          (newError.message !== this.previousErrorMessage ||
+            newError.errorCode !== this.previousErrorCode)
         ) {
-          this.$toast.error(`${mainError.errorCode}: ${mainError.message}`)
-          this.previousErrorMessage = ''
-          this.previousErrorCode = ''
+          this.$toast.error(`${newError.errorCode}: ${newError.message}`)
+          this.previousErrorMessage = newError.message
+          this.previousErrorCode = newError.errorCode
+          this.clearError()
         }
-        this.$store.state.error.errorCode = ''
-        this.$store.state.error.message = ''
-      }
+      },
     },
   },
+  methods: {
+    ...mapMutations(['clearError']),
+  },
 }
-</script>
+</script>