fix(frontend): fix mis-matched state errors (#9)

implenmented a store for each global item and tied it to an event bus and used the listener on the requests object to intercept responses from the API and run the appripriate get call when updates were detected.

frontend/pages/home.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+  import { useItemStore } from "~~/stores/items";
+  import { useLabelStore } from "~~/stores/labels";
+  import { useLocationStore } from "~~/stores/locations";
+
   definePageMeta({
     layout: "home",
   });
@@ -8,20 +12,14 @@
 
   const api = useUserApi();
 
-  const { data: locations } = useAsyncData("locations", async () => {
-    const { data } = await api.locations.getAll();
-    return data.items;
-  });
+  const itemsStore = useItemStore();
+  const items = computed(() => itemsStore.items);
 
-  const { data: labels } = useAsyncData("labels", async () => {
-    const { data } = await api.labels.getAll();
-    return data.items;
-  });
+  const locationStore = useLocationStore();
+  const locations = computed(() => locationStore.locations);
 
-  const { data: items } = useAsyncData("items", async () => {
-    const { data } = await api.items.getAll();
-    return data.items;
-  });
+  const labelsStore = useLabelStore();
+  const labels = computed(() => labelsStore.labels);
 
   const totalItems = computed(() => items.value?.length || 0);
   const totalLocations = computed(() => locations.value?.length || 0);
@@ -67,6 +65,8 @@
     importRef.value.click();
   }
 
+  const eventBus = useEventBus();
+
   async function submitCsvFile() {
     importLoading.value = true;
 
@@ -81,6 +81,8 @@
     importLoading.value = false;
     importCsv.value = null;
     importRef.value.value = null;
+
+    eventBus.emit(EventTypes.ClearStores);
   }
 </script>
 

frontend/pages/item/[id]/edit.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
   import { ItemUpdate } from "~~/lib/api/types/data-contracts";
+  import { useLabelStore } from "~~/stores/labels";
+  import { useLocationStore } from "~~/stores/locations";
 
   definePageMeta({
     layout: "home",
@@ -12,17 +14,13 @@
 
   const itemId = computed<string>(() => route.params.id as string);
 
-  const { data: locations } = useAsyncData(async () => {
-    const { data } = await api.locations.getAll();
-    return data.items;
-  });
+  const locationStore = useLocationStore();
+  const locations = computed(() => locationStore.locations);
 
-  const { data: labels } = useAsyncData(async () => {
-    const { data } = await api.labels.getAll();
-    return data.items;
-  });
+  const labelStore = useLabelStore();
+  const labels = computed(() => labelStore.labels);
 
-  const { data: item } = useAsyncData(async () => {
+  const { data: item, refresh } = useAsyncData(async () => {
     const { data, error } = await api.items.get(itemId.value);
     if (error) {
       toast.error("Failed to load item");
@@ -32,6 +30,9 @@
 
     return data;
   });
+  onMounted(() => {
+    refresh();
+  });
 
   async function saveItem() {
     const payload: ItemUpdate = {

frontend/pages/item/[id]/index.vue

@@ -19,8 +19,6 @@
     }
     return data;
   });
-
-  // Trigger Refresh on navigate
   onMounted(() => {
     refresh();
   });