Use composable instead of 'util' for R API consumption

components/SideBar.vue

@@ -51,9 +51,31 @@
 
 <script lang="ts" setup>
 import { CIcon } from "@coreui/icons-vue";
-import { getVersionData } from "./utils/rApi";
+import { useVersionData } from "../composables/useVersionData";
 import packageJson from "@/package.json";
 
+const {
+  versionFetchStatus,
+  versionFetchError,
+  versionData,
+} = useVersionData();
+
+const versionTooltipContent = computed(() => {
+  if (versionFetchStatus.value === "success" && versionData.value?.data) {
+    return `Model version: ${versionData.value?.data.daedalus} \nR API version: ${versionData.value?.data["daedalus.api"]} \nWeb app version: ${packageJson.version}`;
+  } else if (versionFetchStatus.value === "error" || versionFetchError.value || versionData.value?.errors) {
+    return [
+      "Error fetching version data:",
+      versionFetchError.value,
+      versionData.value?.errors,
+    ].join("\n");
+  } else if (versionFetchStatus.value === "pending") {
+    return "Loading version data...";
+  } else {
+    return undefined;
+  }
+});
+
 const visible = defineModel("visible", { type: Boolean, required: true });
 const largeScreen = ref(true);
 
@@ -65,8 +87,7 @@ function handleHide() {
     // don't want to obey for larger screen sizes.
     resetSidebarPerScreenSize();
     hideHasNeverBeenEmitted.value = false;
-  }
-  else {
+  } else {
     // If this is not the first 'hide', emitted on page load, we obey it and sync
     // the parent component's value.
     visible.value = false;
@@ -79,16 +100,12 @@ function resetSidebarPerScreenSize() {
   if (window.innerWidth < breakpoint) {
     visible.value = false;
     largeScreen.value = false;
-  }
-  else {
+  } else {
     visible.value = true;
     largeScreen.value = true;
   }
 }
 
-const versionData = await getVersionData();
-const versionTooltipContent = `Model version: ${versionData.data.daedalus} \nR API version: ${versionData.data["daedalus.api"]} \nWeb app version: ${packageJson.version}`;
-
 onMounted(() => {
   window.addEventListener("resize", resetSidebarPerScreenSize);
 });

composables/useVersionData.ts

@@ -0,0 +1,22 @@
+import type { RApiResponse } from "./utils/useRApi";
+import { useRApi } from "./utils/useRApi";
+
+interface VersionDataResponse extends RApiResponse {
+  data: {
+    "daedalus": string
+    "daedalus.api": string
+  } | null
+}
+
+const versionEndpoint = "/";
+
+export function useVersionData() {
+  const response = useRApi<VersionDataResponse>(versionEndpoint);
+
+  return {
+    versionFetchStatus: response.fetchStatus,
+    refreshVersionFetch: response.refresh,
+    versionFetchError: response.error,
+    versionData: response.responseData,
+  };
+}

composables/utils/useRApi.ts

@@ -0,0 +1,29 @@
+const rApiAddress = "http://localhost:8001";
+
+interface RApiError {
+  error: string
+  detail: string
+}
+
+export interface RApiResponse {
+  status: string
+  errors: Array<RApiError> | null
+  data: object | null
+}
+
+// NB 'refresh' cannot yet be used since it would be called in the browser and
+// thus run up against CORS restrictions. CORS also prevents hot module reloading, currently.
+export function useRApi<T extends RApiResponse>(endpoint: string) {
+  const url = rApiAddress + endpoint;
+
+  const { data, error, status: fetchStatus, refresh } = useFetch<T>(url);
+
+  const responseData = computed(() => data.value as T | null);
+
+  return {
+    responseData, // This is the response data, not the value of the 'data' key in the response data.
+    fetchStatus, // This is the status of the fetch request (e.g. pending), not the value of the 'status' part of the response data.
+    refresh, // refresh is a function that can be called to re-fetch the data
+    error, // This is the error object from Vue, not the value of the 'errors' key in the response data.
+  };
+}