fix: realtime updates failing in lists

- 2 components triggering unsubscriptions to the same event causing data to be outdated in atleast one component view

- use composable to subscribe & add listeners for list updates

- maintain subscribed doctypes in a reactive object so that doctype subscription event is emitted only once

- remove doctype unsubscribe on onBeforeUnmount since ionic doesn't follow the usual component lifecycle - https://ionicframework.com/docs/vue/lifecycle & these ionic events are only available on IonPage and not the child components

(cherry picked from commit 046b6c1)

frontend/src/components/ListView.vue

@@ -117,7 +117,6 @@ import {
 	computed,
 	reactive,
 	onMounted,
-	onBeforeUnmount,
 } from "vue"
 import {
 	modalController,
@@ -142,6 +141,7 @@ import ListFiltersActionSheet from "@/components/ListFiltersActionSheet.vue"
 import CustomIonModal from "@/components/CustomIonModal.vue"
 
 import useWorkflow from "@/composables/workflow"
+import { useListUpdate } from "@/composables/realtime"
 
 const props = defineProps({
 	doctype: {
@@ -352,17 +352,8 @@ onMounted(async () => {
 	const workflow = useWorkflow(props.doctype)
 	await workflow.workflowDoc.promise
 	workflowStateField.value = workflow.getWorkflowStateField()
-
 	fetchDocumentList()
 
-	socket.emit("doctype_subscribe", props.doctype)
-	socket.on("list_update", (data) => {
-		if (data?.doctype !== props.doctype) return
-		fetchDocumentList()
-	})
-})
-
-onBeforeUnmount(() => {
-	socket.off("list_update")
+	useListUpdate(socket, props.doctype, () => fetchDocumentList())
 })
 </script>

frontend/src/components/RequestPanel.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script setup>
-import { ref, inject, onMounted, computed, markRaw, onBeforeUnmount } from "vue"
+import { ref, inject, onMounted, computed, markRaw } from "vue"
 
 import TabButtons from "@/components/TabButtons.vue"
 import RequestList from "@/components/RequestList.vue"
@@ -25,6 +25,8 @@ import { myClaims, teamClaims } from "@/data/claims"
 import LeaveRequestItem from "@/components/LeaveRequestItem.vue"
 import ExpenseClaimItem from "@/components/ExpenseClaimItem.vue"
 
+import { useListUpdate } from "@/composables/realtime"
+
 const activeTab = ref("My Requests")
 
 const socket = inject("$socket")
@@ -57,22 +59,7 @@ const teamRequests = computed(() => {
 })
 
 onMounted(() => {
-	socket.emit("doctype_subscribe", "Leave Application")
-	socket.emit("doctype_subscribe", "Expense Claim")
-	socket.on("list_update", (data) => {
-		if (data.doctype === "Leave Application") {
-			myLeaves.reload()
-			teamLeaves.reload()
-		} else if (data.doctype === "Expense Claim") {
-			myClaims.reload()
-			teamClaims.reload()
-		}
-	})
-})
-
-onBeforeUnmount(() => {
-	socket.emit("doctype_unsubscribe", "Leave Application")
-	socket.emit("doctype_unsubscribe", "Expense Claim")
-	socket.off("list_update")
+	useListUpdate(socket, "Leave Application", () => teamLeaves.reload())
+	useListUpdate(socket, "Expense Claim", () => teamClaims.reload())
 })
 </script>

frontend/src/composables/realtime.js

@@ -0,0 +1,19 @@
+import { reactive } from "vue"
+
+const subscribed = reactive({})
+
+export function useListUpdate(socket, doctype, callback) {
+	subscribe(socket, doctype)
+	socket.on("list_update", (data) => {
+		if (data.doctype == doctype) {
+			callback(data.name)
+		}
+	})
+}
+
+function subscribe(socket, doctype) {
+	if (subscribed[doctype]) return
+
+	socket.emit("doctype_subscribe", doctype)
+	subscribed[doctype] = true
+}