refactor: non working watchers in all branches

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>

frontend/src/components/Layout/AppBar/AppBar.vue

@@ -19,8 +19,8 @@
     <SearchField />
     <VSpacer />
     <AppBarButtonLayout
-      v-if="!remote.socket.isConnected.value || !isConnectedToServer"
-      :color="!remote.socket.isConnected.value ? 'yellow' : 'red'">
+      v-hide="remote.socket.isConnected.value && isConnectedToServer"
+      :color="isConnectedToServer ? 'yellow' : 'red'">
       <template #icon>
         <VIcon>
           <IMdiNetworkOffOutline />

frontend/src/plugins/remote/sdk/index.ts

@@ -3,7 +3,7 @@
  * It also sets the header and base URL for our axios instance
  */
 import type { Api } from '@jellyfin/sdk';
-import { watchEffect } from 'vue';
+import { watchSyncEffect } from 'vue';
 import RemotePluginAuthInstance from '../auth';
 import RemotePluginAxiosInstance from '../axios';
 import SDK, { useOneTimeAPI } from './sdk-utils';
@@ -21,7 +21,7 @@ class RemotePluginSDK {
     /**
      * Configure app's axios instance to perform requests to the given Jellyfin server.
      */
-    watchEffect(() => {
+    watchSyncEffect(() => {
       const server = auth.currentServer;
       const accessToken = auth.currentUserToken;
 

frontend/src/plugins/router/index.ts

@@ -1,4 +1,4 @@
-import { watch } from 'vue';
+import { watchSyncEffect } from 'vue';
 import {
   createRouter,
   createWebHashHistory,
@@ -64,35 +64,30 @@ router.back = (): ReturnType<typeof router.back> => {
 /**
  * Re-run the middleware pipeline when the user logs out or state is cleared
  */
-watch(
-  [
-    (): typeof remote.auth.currentUser => remote.auth.currentUser,
-    (): typeof remote.auth.servers => remote.auth.servers
-  ],
-  async () => {
-    if (!remote.auth.currentUser && remote.auth.servers.length <= 0) {
-      /**
-       * We run the redirect to /server/add as it's the first page in the login flow
-       *
-       * In case the whole localStorage is gone at runtime, if we're at the login
-       * page, redirecting to /server/login wouldn't work, as we're in that same page.
-       * /server/add doesn't depend on the state of localStorage, so it's always safe to
-       * redirect there and leave the middleware take care of the final destination
-       * (when servers are already available, for example)
-       */
-      await router.replace('/server/add');
-    } else if (
-      !remote.auth.currentUser
-      && remote.auth.servers.length
-      && remote.auth.currentServer
-    ) {
-      await (remote.auth.currentServer.StartupWizardCompleted ? router.replace('/server/login') : router.replace('/wizard'));
-    } else if (
-      !remote.auth.currentUser
-      && remote.auth.servers.length
-      && !remote.auth.currentServer
-    ) {
-      await router.replace('/server/select');
-    }
+watchSyncEffect(() => {
+  if (!remote.auth.currentUser && remote.auth.servers.length <= 0) {
+    /**
+     * We run the redirect to /server/add as it's the first page in the login flow
+     *
+     * In case the whole localStorage is gone at runtime, if we're at the login
+     * page, redirecting to /server/login wouldn't work, as we're in that same page.
+     * /server/add doesn't depend on the state of localStorage, so it's always safe to
+     * redirect there and leave the middleware take care of the final destination
+     * (when servers are already available, for example)
+     */
+    void router.replace('/server/add');
+  } else if (
+    !remote.auth.currentUser
+    && remote.auth.servers.length > 0
+    && remote.auth.currentServer
+  ) {
+    void (remote.auth.currentServer.StartupWizardCompleted ? router.replace('/server/login') : router.replace('/wizard'));
+  } else if (
+    !remote.auth.currentUser
+    && remote.auth.servers.length > 0
+    && !remote.auth.currentServer
+  ) {
+    void router.replace('/server/select');
   }
+}
 );

frontend/src/store/index.ts

@@ -75,9 +75,16 @@ export const isSlow = useMediaQuery('(update:slow)');
  */
 const network = useNetwork();
 export const isConnectedToServer = computedAsync(async () => {
-  if (network.isSupported.value && network.isOnline.value) {
-    return true;
-  } else if (!isNil(remote.auth.currentServer) || !remote.socket.isConnected.value) {
+  /**
+   * These can't be merged inside the if statement as they must be picked up by watchEffect, and the OR operation
+   * stops evaluating in the first await tick as soon as the first truthy value is found.
+   *
+   * See https://vuejs.org/guide/essentials/watchers.html#watcheffect
+   */
+  const socket = remote.socket.isConnected.value;
+  const networkAPI = network.isOnline.value;
+
+  if (!isNil(remote.auth.currentServer) || !socket || !networkAPI) {
     try {
       await remote.sdk.newUserApi(getSystemApi).getPingSystem();