Connection status/error messages

cista-front/src/repositories/WS.ts

@@ -15,13 +15,41 @@ export const connect = (path: string, handlers: Partial<Record<keyof WebSocketEv
   return webSocket
 }
 
-export const watchConnect = async () => {
+export const watchConnect = () => {
+  if (watchTimeout !== null) {
+    clearTimeout(watchTimeout)
+    watchTimeout = null
+  }
+  const store = useDocumentStore()
+  if (store.error !== 'Reconnecting...') store.error = 'Connecting...'
+  console.log(store.error)
+
   wsWatch = connect(watchUrl, {
-    open() { console.log("Connected to", watchUrl)},
     message: handleWatchMessage,
     close: watchReconnect,
   })
-  await wsWatch
+  wsWatch.addEventListener("message", event => {
+    if (store.connected) return
+    const msg = JSON.parse(event.data)
+    if ('error' in msg) {
+      if (msg.error.code === 401) {
+        store.user.isLoggedIn = false
+        store.user.isOpenLoginModal = true
+      } else {
+        store.error = msg.error.message
+      }
+      return
+    }
+    if ("server" in msg) {
+      console.log('Connected to backend', msg)
+      store.connected = true
+      reconnectDuration = 500
+      store.error = ''
+      if (msg.user) store.login(msg.user.username, msg.user.privileged)
+      else if (store.isUserLogged) store.logout()
+      if (!msg.server.public && !msg.user) store.user.isOpenLoginModal = true
+    }
+  })
 }
 
 export const watchDisconnect = () => {
@@ -30,35 +58,24 @@ export const watchDisconnect = () => {
   wsWatch = null
 }
 
+let watchTimeout: any = null
+
 const watchReconnect = (event: MessageEvent) => {
   const store = useDocumentStore()
   if (store.connected) {
     console.warn("Disconnected from server", event)
     store.connected = false
+    store.error = 'Reconnecting...'
   }
   reconnectDuration = Math.min(5000, reconnectDuration + 500)
   // The server closes the websocket after errors, so we need to reopen it
-  setTimeout(() => {
-    wsWatch = connect(watchUrl, {
-      message: handleWatchMessage,
-      close: watchReconnect,
-    })
-    console.log("Attempting to reconnect...")
-  }, reconnectDuration)
+  if (watchTimeout !== null) clearTimeout(watchTimeout)
+  watchTimeout = setTimeout(watchConnect, reconnectDuration)
 }
 
 
 const handleWatchMessage = (event: MessageEvent) => {
-  const store = useDocumentStore()
   const msg = JSON.parse(event.data)
-  if ('error' in msg) {
-    if (msg.error.code === 401) {
-      store.user.isLoggedIn = false
-      store.user.isOpenLoginModal = true
-    } else {
-      store.error = msg.error.message
-    }
-  }
   switch (true) {
     case !!msg.root:
       handleRootMessage(msg)
@@ -79,9 +96,6 @@ const handleWatchMessage = (event: MessageEvent) => {
 function handleRootMessage({ root }: { root: DirEntry }) {
   const store = useDocumentStore()
   console.log('Watch root', root)
-  reconnectDuration = 500
-  store.connected = true
-  store.user.isLoggedIn = true
   store.updateRoot(root)
   tree = root
 }