move has saga watch from component to store

Author: cquirosj

src/Frontend/src/components/messages2/SagaDiagram.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onUnmounted, watch } from "vue";
+import { computed, onUnmounted } from "vue";
 import routeLinks from "@/router/routeLinks";
 import { useSagaDiagramStore } from "@/stores/SagaDiagramStore";
 import { useMessageStore } from "@/stores/MessageStore";
@@ -20,17 +20,6 @@ const { showMessageData } = storeToRefs(sagaDiagramStore);
 
 const messageStore = useMessageStore();
 
-//Watch for message and set saga ID when component mounts or message changes
-watch(
-  () => messageStore.state,
-  (newState) => {
-    if (newState.data.invoked_saga.saga_id !== sagaDiagramStore.sagaId) {
-      sagaDiagramStore.setSagaId(newState.data.invoked_saga.saga_id || "");
-    }
-  },
-  { immediate: true }
-);
-
 onUnmounted(() => {
   sagaDiagramStore.clearSagaHistory();
 });

src/Frontend/src/stores/SagaDiagramStore.ts

@@ -3,6 +3,7 @@ import { ref, watch } from "vue";
 import { SagaHistory, SagaMessage } from "@/resources/SagaHistory";
 import { useFetchFromServiceControl } from "@/composables/serviceServiceControlUrls";
 import Message from "@/resources/Message";
+import { useMessageStore } from "@/stores/MessageStore";
 const StandardKeys = ["$type", "Id", "Originator", "OriginalMessageId"];
 export interface SagaMessageDataItem {
   key: string;
@@ -21,15 +22,22 @@ export const useSagaDiagramStore = defineStore("sagaHistory", () => {
   const fetchedMessages = ref(new Set<string>());
   const messagesData = ref<SagaMessageData[]>([]);
   const MessageBodyEndpoint = "messages/{0}/body";
-  // Watch for changes to sagaId and fetch saga history data
-  watch(sagaId, async (newSagaId) => {
-    if (!newSagaId) {
-      sagaHistory.value = null;
-      return;
-    }
 
-    await fetchSagaHistory(newSagaId);
-  });
+  const messageStore = useMessageStore();
+
+  //Watch for changes to messageStore.state.data.invoked_saga.has_saga
+  watch(
+    () => messageStore.state.data.invoked_saga.has_saga,
+    async (newValue) => {
+      if (newValue) {
+        sagaId.value = messageStore.state.data.invoked_saga.saga_id || "";
+        await fetchSagaHistory(sagaId.value);
+      } else {
+        clearSagaHistory();
+      }
+    },
+    { immediate: true }
+  );
 
   // Watch for changes to showMessageData
   watch([showMessageData, sagaHistory], async ([show, history]) => {
@@ -244,7 +252,6 @@ export const useSagaDiagramStore = defineStore("sagaHistory", () => {
     showMessageData,
     messagesData,
     setSagaId,
-    fetchSagaHistory,
     clearSagaHistory,
     toggleMessageData,
   };