feat(error): add toast for if connection fails

PrivateAIM · Jul 29, 2024 · 2c15e89 · 2c15e89
1 parent ddcae7f
commit 2c15e89
Show file tree

Hide file tree

Showing 11 changed files with 93 additions and 44 deletions.
diff --git a/components/analysis/AnalysesTable.vue b/components/analysis/AnalysesTable.vue
@@ -3,6 +3,7 @@ import { getAnalyses } from "~/composables/useAPIFetch";
 import { formatDataRow } from "~/utils/format-data-row";
 import TableRowMetadata from "~/components/TableRowMetadata.vue";
 import ExpandRowButtons from "~/components/table/ExpandRowButtons.vue";
+import { showConnectionErrorToast } from "~/composables/connectionErrorToast";
 
 const analyses = ref();
 const expandedRows = ref();
@@ -19,12 +20,19 @@ const expandRowEntries = [
 
 onMounted(() => {
   nextTick(async () => {
-    const { data: response } = await getAnalyses();
-    analyses.value = formatDataRow(
-      response.value!.data as unknown as Map<string, string | number | null>[],
-      ["created_at", "updated_at"],
-      expandRowEntries,
-    );
+    const { data: response, status, error } = await getAnalyses();
+    if (status.value === "success") {
+      analyses.value = formatDataRow(
+        response.value!.data as unknown as Map<
+          string,
+          string | number | null
+        >[],
+        ["created_at", "updated_at"],
+        expandRowEntries,
+      );
+    } else if (error.value?.statusCode === 500) {
+      showConnectionErrorToast();
+    }
     loading.value = false;
   });
 });

diff --git a/...nents/data-stores/DataStoreListLayout.vue → components/data-stores/DataStoreListTabs.vue b/...nents/data-stores/DataStoreListLayout.vue → components/data-stores/DataStoreListTabs.vue
@@ -14,6 +14,7 @@ import type {
 } from "~/services/Api";
 import DetailedDataStoreTable from "~/components/data-stores/tables/DetailedDataStoreTable.vue";
 import DetailedAnalysisTable from "~/components/data-stores/tables/DetailedAnalysisTable.vue";
+import { showConnectionErrorToast } from "~/composables/connectionErrorToast";
 
 const dataStores = ref();
 const consumers = ref();
@@ -38,27 +39,31 @@ onBeforeMount(() => {
 });
 
 async function loadDetailedDataStoreTable() {
-  const { data: response } = await getDataStores(true);
+  const { data: response, status, error } = await getDataStores(true);
 
-  let formattedDataStores = formatDataRow(
-    response.value!.data,
-    dataRowUnixCols,
-    expandRowEntries,
-  ) as DetailedService[];
+  if (status.value === "success") {
+    let formattedDataStores = formatDataRow(
+      response.value!.data,
+      dataRowUnixCols,
+      expandRowEntries,
+    ) as DetailedService[];
 
-  formattedDataStores.forEach((store: DetailedService) => {
-    if (store.routes!.length) {
-      store.routes = formatDataRow(
-        store.routes,
-        dataRowUnixCols,
-        expandRowEntries,
-      );
-      store.routes?.forEach((proj: Route) => {
-        proj["projectId"] = extractProjectIdFromPath(proj.paths! as string[]);
-      });
-    }
-  });
-  dataStores.value = formattedDataStores;
+    formattedDataStores.forEach((store: DetailedService) => {
+      if (store.routes!.length) {
+        store.routes = formatDataRow(
+          store.routes,
+          dataRowUnixCols,
+          expandRowEntries,
+        );
+        store.routes?.forEach((proj: Route) => {
+          proj["projectId"] = extractProjectIdFromPath(proj.paths! as string[]);
+        });
+      }
+    });
+    dataStores.value = formattedDataStores;
+  } else if (error.value?.statusCode === 500) {
+    showConnectionErrorToast();
+  }
 }
 
 async function fetchDataFromHub(route: string) {

diff --git a/...nts/data-stores/ResourceManagerLayout.vue → ...nents/data-stores/ResourceManagerTabs.vue b/...nts/data-stores/ResourceManagerLayout.vue → ...nents/data-stores/ResourceManagerTabs.vue
diff --git a/components/projects/ApproveRejectButtons.vue b/components/projects/ApproveRejectButtons.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { approveRejectProjectProposal } from "~/composables/useAPIFetch";
+import { useToastService } from "~/composables/connectionErrorToast";
 
 const props = defineProps({
   projectId: String,
 });
 
-const toast = useToast();
+const toast = useToastService();
 
 const emit = defineEmits(["updatedRow"]);
 

diff --git a/components/projects/ProjectTable.vue b/components/projects/ProjectTable.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { getProjects } from "~/composables/useAPIFetch";
 import { formatDataRow } from "~/utils/format-data-row";
+import { showConnectionErrorToast } from "~/composables/connectionErrorToast";
 
 const projects = ref();
 const loading = ref(true);
@@ -10,12 +11,20 @@ const expandRowEntries = [];
 
 onMounted(() => {
   nextTick(async () => {
-    const { data: response } = await getProjects();
-    projects.value = formatDataRow(
-      response.value!.data as unknown as Map<string, string | number | null>[],
-      dataRowUnixCols,
-      expandRowEntries,
-    );
+    const { data: response, status, error } = await getProjects();
+    if (status.value === "success") {
+      projects.value = formatDataRow(
+        response.value!.data as unknown as Map<
+          string,
+          string | number | null
+        >[],
+        dataRowUnixCols,
+        expandRowEntries,
+      );
+    } else if (error.value?.statusCode === 500) {
+      showConnectionErrorToast();
+    }
+
     loading.value = false;
   });
 });

diff --git a/components/projects/ProposalTable.vue b/components/projects/ProposalTable.vue
@@ -5,6 +5,7 @@ import { formatDataRow } from "~/utils/format-data-row";
 import TableRowMetadata from "~/components/TableRowMetadata.vue";
 import type { ProjectNode } from "~/services/Api";
 import ExpandRowButtons from "~/components/table/ExpandRowButtons.vue";
+import { showConnectionErrorToast } from "~/composables/connectionErrorToast";
 
 const proposals = ref();
 const expandedRows = ref({});
@@ -15,12 +16,19 @@ const expandRowEntries = ["project_id", "node_id"];
 
 onMounted(() => {
   nextTick(async () => {
-    const { data: response } = await getProposals();
-    proposals.value = formatDataRow(
-      response.value!.data as unknown as Map<string, string | number | null>[],
-      dataRowUnixCols,
-      expandRowEntries,
-    );
+    const { data: response, status, error } = await getProposals();
+    if (status.value === "success") {
+      proposals.value = formatDataRow(
+        response.value!.data as unknown as Map<
+          string,
+          string | number | null
+        >[],
+        dataRowUnixCols,
+        expandRowEntries,
+      );
+    } else if (error.value?.statusCode === 500) {
+      showConnectionErrorToast();
+    }
     loading.value = false;
   });
 });

diff --git a/composables/connectionErrorToast.ts b/composables/connectionErrorToast.ts
@@ -0,0 +1,18 @@
+import { useToast } from "primevue/usetoast";
+
+export const useToastService = () => {
+  const nuxtApp = useNuxtApp();
+  const getToast: typeof useToast = () =>
+    nuxtApp.vueApp.config.globalProperties.$toast;
+  return getToast();
+};
+
+export const showConnectionErrorToast = () => {
+  const toast = useToastService();
+  toast.add({
+    severity: "error",
+    summary: "Connection error",
+    detail: "Unable to contact the API.",
+    life: 3000,
+  });
+};
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -54,4 +54,6 @@ export default defineNuxtConfig({
     "primevue/resources/themes/lara-dark-amber/theme.css",
     "primeicons/primeicons.css",
   ],
-});
+
+  compatibilityDate: "2024-07-29",
+});
diff --git a/pages/data-stores/create.vue b/pages/data-stores/create.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import ResourceManagerLayout from "~/components/data-stores/ResourceManagerLayout.vue";
+import ResourceManagerLayout from "~/components/data-stores/ResourceManagerTabs.vue";
 
 definePageMeta({
   middleware: ["auth"],

diff --git a/pages/data-stores/index.vue b/pages/data-stores/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import DataStoreLayout from "~/components/data-stores/DataStoreListLayout.vue";
+import DataStoreLayout from "~/components/data-stores/DataStoreListTabs.vue";
 
 definePageMeta({
   middleware: ["auth"],

diff --git a/plugins/api.ts b/plugins/api.ts
@@ -12,9 +12,7 @@ export default defineNuxtPlugin((nuxtApp) => {
       headers.set("Authorization", `Bearer ${user?.value.accessToken}`);
       options.headers = headers;
     },
-    onRequestError({ request, options, error }) {
-      console.log(request);
-      console.log(options);
+    onRequestError({ error }) {
       console.log(error);
     },
     onResponse({ response }) {