Swap upload eventhub usage for simple store

client/src/components/ActivityBar/Items/UploadItem.vue

@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, type Ref, ref } from "vue";
+import { storeToRefs } from "pinia";
+import { onMounted } from "vue";
 
-import { eventHub } from "@/components/plugins/eventHub.js";
 import { useGlobalUploadModal } from "@/composables/globalUploadModal.js";
+import { useUploadStore } from "@/stores/uploadStore";
 import Query from "@/utils/query-string-parsing.js";
 
 import ActivityItem from "components/ActivityBar/ActivityItem.vue";
 
-const { openGlobalUploadModal } = useGlobalUploadModal();
-
 export interface Props {
     id: string;
     title: string;
@@ -22,34 +21,19 @@ const emit = defineEmits<{
     (e: "click"): void;
 }>();
 
-const status: Ref<string> = ref("success");
-const percentage: Ref<number> = ref(0);
+const { openGlobalUploadModal } = useGlobalUploadModal();
+const { percentage, status } = storeToRefs(useUploadStore());
 
 onMounted(() => {
-    eventHub.$on("upload:status", setStatus);
-    eventHub.$on("upload:percentage", setPercentage);
     if (Query.get("tool_id") == "upload1") {
         openGlobalUploadModal();
     }
 });
 
-onUnmounted(() => {
-    eventHub.$off("upload:status", setStatus);
-    eventHub.$off("upload:percentage", setPercentage);
-});
-
 function onUploadModal() {
     emit("click");
     openGlobalUploadModal();
 }
-
-function setStatus(val: string): void {
-    status.value = val;
-}
-
-function setPercentage(val: number): void {
-    percentage.value = val;
-}
 </script>
 
 <template>

client/src/components/Upload/UploadButton.vue

@@ -2,10 +2,11 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { computed, onMounted, onUnmounted, ref } from "vue";
+import { storeToRefs } from "pinia";
+import { computed, onMounted } from "vue";
 
-import { eventHub } from "@/components/plugins/eventHub.js";
 import { useGlobalUploadModal } from "@/composables/globalUploadModal";
+import { useUploadStore } from "@/stores/uploadStore";
 import localize from "@/utils/localization";
 import Query from "@/utils/query-string-parsing";
 
@@ -21,34 +22,17 @@ const props = withDefaults(
 );
 
 const { openGlobalUploadModal } = useGlobalUploadModal();
-
-const status = ref("");
-const percentage = ref(0);
+const { percentage, status } = storeToRefs(useUploadStore());
 
 onMounted(() => {
-    eventHub.$on("upload:status", setStatus);
-    eventHub.$on("upload:percentage", setPercentage);
     if (Query.get("tool_id") == "upload1") {
         openGlobalUploadModal();
     }
 });
 
-onUnmounted(() => {
-    eventHub.$off("upload:status", setStatus);
-    eventHub.$off("upload:percentage", setPercentage);
-});
-
 const localizedTitle = computed(() => {
     return localize(props.title);
 });
-function setStatus(val: string) {
-    status.value = val;
-}
-
-function setPercentage(val: number) {
-    percentage.value = val;
-}
-
 function showUploadDialog() {
     openGlobalUploadModal();
 }

client/src/components/Upload/UploadContainer.vue

@@ -9,9 +9,10 @@ import {
     getUploadDatatypes,
     getUploadDbKeys,
 } from "components/Upload/utils";
+import { storeToRefs } from "pinia";
 import { computed, onMounted, ref } from "vue";
 
-import { eventHub } from "@/components/plugins/eventHub.js";
+import { useUploadStore } from "@/stores/uploadStore";
 import { uploadPayload } from "@/utils/upload-payload.js";
 
 import CompositeBox from "./CompositeBox";
@@ -79,6 +80,8 @@ const listExtensions = ref([]);
 const listDbKeys = ref([]);
 const regular = ref(null);
 
+const { percentage, status } = storeToRefs(useUploadStore());
+
 const effectiveExtensions = computed(() => {
     if (props.formats === null || !datatypesMapperReady.value) {
         return listExtensions.value;
@@ -133,12 +136,12 @@ async function loadMappers() {
     datatypesMapperReady.value = true;
 }
 
-function progress(percentage, status = null) {
-    if (percentage !== null) {
-        eventHub.$emit(`upload:percentage`, percentage);
+function progress(newPercentage, newStatus = null) {
+    if (newPercentage !== null) {
+        percentage.value = newPercentage;
     }
-    if (status !== null) {
-        eventHub.$emit(`upload:status`, status);
+    if (newStatus !== null) {
+        status.value = newStatus;
     }
 }
 

client/src/stores/uploadStore.ts

@@ -0,0 +1,9 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useUploadStore = defineStore("upload", () => {
+    const percentage = ref<number>(0);
+    const status = ref<string>("");
+
+    return { percentage, status };
+});