From 4e9c4ecb6496b3217f5918e0c618bd4be6af3ab2 Mon Sep 17 00:00:00 2001
From: pedrocx486 <pedrocx486@gmail.com>
Date: Tue, 28 Jan 2025 20:24:11 -0300
Subject: [PATCH] Fix missing status bug for deleted party line

---
 client/src/components/JoinPartyLine.vue | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/client/src/components/JoinPartyLine.vue b/client/src/components/JoinPartyLine.vue
index a8d0c37..6a13ea4 100644
--- a/client/src/components/JoinPartyLine.vue
+++ b/client/src/components/JoinPartyLine.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="w-screen text-center">
-    <input type="text" v-model="partyLineModel" placeholder="Enter Party Line" class="input input-bordered w-full max-w-xs" />
+    <input type="text" v-model="partyLineModel" placeholder="Enter Party Line"
+           class="input input-bordered w-full max-w-xs"/>
     <button class="btn btn-outline btn-success" @click="joinPartyLine">Join Party Line</button>
     <br/>
     <p v-if="status"><small>{{ status }}</small></p>
@@ -9,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { usePartyLineStore } from '../stores/partyLine';
 import { storeToRefs } from "pinia";
 import { useGetServer } from "@/composables/useGetServer.ts";
@@ -21,15 +22,15 @@ const partyLineStore = usePartyLineStore();
 
 const { partyLine, partyLineDeletedFlag, eventSource } = storeToRefs(partyLineStore);
 
-onMounted(() => {
-  if (partyLineDeletedFlag.value) {
-    error.value = 'Party Line has been deleted by the admin';
-  }
-
+watch(eventSource, () => {
   if (!eventSource.value?.readyState) {
     status.value = 'Not connected to any Party Lines...';
   }
-});
+}, { immediate: true });
+
+watch(partyLineDeletedFlag, () => {
+  error.value = 'Party Line has been deleted by the admin';
+}, { immediate: true });
 
 const partyLineModel = computed({
   get: () => partyLineName.value ? partyLineName.value : partyLine.value,