fix(submissions): better reconnect for ws

polylan_submitter/src/composables/useSubmissionsWebSocket.ts

@@ -1,4 +1,4 @@
-import { ref, computed, onBeforeUnmount } from 'vue'
+import { ref, computed } from 'vue'
 import { useWebSocket } from '@vueuse/core'
 
 interface SubmissionUpdate {
@@ -37,9 +37,6 @@ type WebSocketData = SubmissionUpdate | SubmissionFileUpdate | ImageCropUpdate
 
 export function useSubmissionsWebSocket(userSubmissions: any) {
   const isConnected = ref(false)
-  const reconnectAttempts = ref(0)
-  const maxReconnectAttempts = 10
-  const reconnectDelay = ref(3000)
 
   const wsUrl = computed(() => {
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
@@ -53,14 +50,11 @@ export function useSubmissionsWebSocket(userSubmissions: any) {
   } = useWebSocket(wsUrl.value, {
     onConnected: () => {
       isConnected.value = true
-      reconnectAttempts.value = 0
-      reconnectDelay.value = 3000
       console.log('✓ Connected to submissions WebSocket')
     },
     onDisconnected: () => {
       isConnected.value = false
-      console.log('✗ Disconnected from submissions WebSocket, attempting to reconnect...')
-      attemptReconnect()
+      console.log('✗ Disconnected from submissions WebSocket')
     },
     onError: (event) => {
       console.error('WebSocket error:', event)
@@ -82,24 +76,16 @@ export function useSubmissionsWebSocket(userSubmissions: any) {
       }
     },
     immediate: true,
+    // vueuse's own reconnect stops once close() is called (it also closes
+    // on unmount), unlike a hand-rolled setTimeout(open) that would reopen
+    // the socket after leaving the page.
+    autoReconnect: {
+      retries: 10,
+      delay: 3000,
+      onFailed: () => console.error('Max reconnection attempts reached'),
+    },
   })
 
-  const attemptReconnect = () => {
-    if (reconnectAttempts.value >= maxReconnectAttempts) {
-      console.error('Max reconnection attempts reached')
-      return
-    }
-
-    reconnectAttempts.value++
-    const delay = reconnectDelay.value * Math.pow(1.5, reconnectAttempts.value - 1)
-
-    console.log(`Reconnecting (attempt ${reconnectAttempts.value}/${maxReconnectAttempts}) in ${Math.round(delay / 1000)}s...`)
-
-    setTimeout(() => {
-      open()
-    }, delay)
-  }
-
   const handleSubmissionUpdate = (submission: SubmissionUpdate) => {
     const existingIndex = userSubmissions.value.findIndex((s: any) => s.id === submission.id)
 
@@ -143,10 +129,6 @@ export function useSubmissionsWebSocket(userSubmissions: any) {
     })
   }
 
-  onBeforeUnmount(() => {
-    close()
-  })
-
   return {
     isConnected,
     status,