testing a different way to handle toasting

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "pinia": "^2.3.0",
     "vue": "^3.4.38",
+    "vue-toast-notification": "^3.1.3",
     "vue3-markdown-it": "^1.0.10",
     "vue3-toastify": "^0.2.8"
   },

src/components/ActionSection.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { toast } from "vue3-toastify";
+import "vue3-toastify/dist/index.css";
+
 import ProgressBar from '@/components/ProgressBar.vue';
 import { useIterateStore } from '@/stores/iterate'
 import { ref } from 'vue';
@@ -8,12 +11,32 @@ const isLocked = ref(false)
 
 const start = () => {
   isLocked.value = true
-  iterate.start()
   setTimeout(() => {
     isLocked.value = false
   }, 1000)
+  iterate.start().catch(error => {
+    let message = '';
+    switch (error.status) {
+      case 401:
+        message = 'Unauthorized: Access denied.';
+        break;
+      case 429:
+        message = 'Timeout: Try again in 1 hour.';
+        break;
+      case 500:
+        message = 'Error: We messed up.';
+        break;
+      default:
+        message = 'Error: Something Unexpected.';
+        break;
+    }
+    console.error('Error:', message)
+    toast(message, {
+        "theme": "auto",
+        "type": "error"
+    })
+  });
 }
-
 </script>
 
 <template>

src/main.ts

@@ -1,10 +1,10 @@
-import './style.css'
-//import "vue3-toastify/dist/index.css";
-
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
+
 import App from './App.vue'
 
+import './style.css'
+
 const pinia = createPinia()
 const app = createApp(App)
 

src/stores/iterate.ts

@@ -1,17 +1,10 @@
-//import { toast, ToastOptions } from "vue3-toastify";
 import { defineStore } from 'pinia'
 
 type State = 'Pending' | 'Running' | 'Completed' | 'Failed' | 'Terminated'
 
-const URL_BASE = 'https://03600f7f7081.ngrok.app' //import.meta.env.VITE_API_URL
+const URL_BASE = import.meta.env.VITE_API_URL
 const API_CODE = import.meta.env.VITE_API_CODE
 
-// const TOAST_ERROR_CONFIG = {
-//   "theme": "auto",
-//   "type": "error",
-//   "transition": "slide"
-// } as ToastOptions;
-
 export const useIterateStore = defineStore('iterate', {
   state: () => {
     return {
@@ -101,7 +94,7 @@ export const useIterateStore = defineStore('iterate', {
       });
     },
     start() {
-      fetch(`${URL_BASE}/api/Iterator_Start`, {
+      return fetch(`${URL_BASE}/api/Iterator_Start`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
@@ -121,31 +114,10 @@ export const useIterateStore = defineStore('iterate', {
         this.id = Id
         this.interval = setInterval(() => this.next(), 1000)
         this.next()
-      })
-      .catch(error => {
-        this.id = ''
-
-        let message = '';
-        switch (error.status) {
-          case 401:
-            message = 'Unauthorized: Access denied.';
-            break;
-          case 429:
-            message = 'Timeout: Try again in 1 hour.';
-            break;
-          case 500:
-            message = 'Error: We messed up.';
-            break;
-          default:
-            message = 'Error: Something Unexpected.';
-            break;
-        }
-        console.error('Error:', message)
-        //toast(message, TOAST_ERROR_CONFIG)
       });
     },
     stop() {
-      fetch(`${URL_BASE}/runtime/webhooks/durabletask/instances/${this.id}/terminate?reason=Canceled&code=${API_CODE}`, {
+      return fetch(`${URL_BASE}/runtime/webhooks/durabletask/instances/${this.id}/terminate?reason=Canceled&code=${API_CODE}`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' }
       })