feat: add toasts on error

threefoldtech · Aug 15, 2024 · 6a813d4 · 6a813d4
1 parent 503e737
commit 6a813d4
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/frontend/src/components/FollowUp.vue b/frontend/src/components/FollowUp.vue
@@ -39,6 +39,8 @@ import Navbar from "./Navbar.vue";
 import { useRoute, useRouter } from "vue-router";
 import Footer from "./Footer.vue";
 import axios from "axios";
+import { toast } from "vue3-toastify";
+import "vue3-toastify/dist/index.css";
 
 const pending = ref<boolean>(true);
 const api = axios.create({
@@ -74,6 +76,7 @@ const pullLists = async () => {
     pending.value = false;
     errMsg.value = error.response?.data;
     stopPolling.value = true;
+    toast.error(error.response?.data)
   }
 };
 

diff --git a/frontend/src/components/Home.vue b/frontend/src/components/Home.vue
@@ -51,8 +51,7 @@
         style="height: fit-content"
       >
         <h2 class="mb-2" v-if="username.length != 0">
-          <v-icon icon="mdi-account" color="#1aa18f"></v-icon
-          >{{ username }}
+          <v-icon icon="mdi-account" color="#1aa18f"></v-icon>{{ username }}
         </h2>
         <!-- table containe flists -->
         <v-data-table
@@ -94,7 +93,7 @@ import image from "../assets/side.png";
 import { useClipboard } from "@vueuse/core";
 import { FlistsResponseInterface, FlistBody } from "../types/Flists.ts";
 import { toast } from "vue3-toastify";
-
+import "vue3-toastify/dist/index.css";
 
 const baseURL = import.meta.env.VITE_API_URL;
 const api = axios.create({
@@ -152,8 +151,9 @@ onMounted(async () => {
     flists.value = (await api.get<FlistsResponseInterface>("/v1/api/fl")).data;
     getUserNames();
     filteredFlistFn();
-  } catch (error) {
+  } catch (error: any) {
     console.error("Failed to fetch flists", error);
+    toast.error(error.response?.data);
   }
 });
 watch(username, () => {

diff --git a/frontend/src/components/UserFlist.vue b/frontend/src/components/UserFlist.vue
@@ -94,8 +94,9 @@ onMounted(async () => {
     currentUserFlists = computed(() => {
       return loggedInUser?.length ? flists.value[loggedInUser] : [];
     });
-  } catch (error) {
+  } catch (error:any) {
     console.error("Failed to fetch flists", error);
+    toast.error(error.response?.data)
   }
 });
 </script>