[WIP] Fix button saying server offline after it comes back.

packages/desktop-client/src/components/LoggedInUser.tsx

@@ -1,8 +1,5 @@
 // @ts-strict-ignore
-import React, { useState, useEffect, useRef } from 'react';
-import { useSelector } from 'react-redux';
-
-import { type State } from 'loot-core/src/client/state-types';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
 
 import { useActions } from '../hooks/useActions';
 import { theme, styles, type CSSProperties } from '../style';
@@ -16,15 +13,16 @@ import { useServerURL } from './ServerContext';
 
 type LoggedInUserProps = {
   hideIfNoServer?: boolean;
+  syncState: null | 'offline' | 'local' | 'disabled' | 'error';
   style?: CSSProperties;
   color?: string;
 };
 export function LoggedInUser({
   hideIfNoServer,
+  syncState,
   style,
   color,
 }: LoggedInUserProps) {
-  const userData = useSelector((state: State) => state.user.data);
   const { getUserData, signOut, closeBudget } = useActions();
   const [loading, setLoading] = useState(true);
   const [menuOpen, setMenuOpen] = useState(false);
@@ -62,17 +60,17 @@ export function LoggedInUser({
     }
   }
 
-  function serverMessage() {
+  const serverMessage = useMemo(() => {
     if (!serverUrl) {
       return 'No server';
     }
 
-    if (userData?.offline) {
+    if (syncState === 'offline') {
       return 'Server offline';
     }
 
     return 'Server online';
-  }
+  }, [serverUrl, syncState]);
 
   if (hideIfNoServer && !serverUrl) {
     return null;
@@ -101,7 +99,7 @@ export function LoggedInUser({
         onPress={() => setMenuOpen(true)}
         style={color && { color }}
       >
-        {serverMessage()}
+        {serverMessage}
       </Button>
 
       <Popover
@@ -113,7 +111,7 @@ export function LoggedInUser({
           onMenuSelect={onMenuSelect}
           items={[
             serverUrl &&
-              !userData?.offline && {
+              syncState === null && {
                 name: 'change-password',
                 text: 'Change password',
               },

packages/desktop-client/src/components/Titlebar.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, type SetStateAction } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { Routes, Route, useLocation } from 'react-router-dom';
 
@@ -96,16 +96,22 @@ function PrivacyButton({ style }: PrivacyButtonProps) {
 
 type SyncButtonProps = {
   style?: CSSProperties;
+  syncState: string | null;
+  setSyncState: (
+    state: SetStateAction<null | 'offline' | 'local' | 'disabled' | 'error'>,
+  ) => void;
   isMobile?: boolean;
 };
-function SyncButton({ style, isMobile = false }: SyncButtonProps) {
+function SyncButton({
+  style,
+  syncState,
+  setSyncState,
+  isMobile = false,
+}: SyncButtonProps) {
   const [cloudFileId] = useMetadataPref('cloudFileId');
   const { sync } = useActions();
 
   const [syncing, setSyncing] = useState(false);
-  const [syncState, setSyncState] = useState<
-    null | 'offline' | 'local' | 'disabled' | 'error'
-  >(null);
 
   useEffect(() => {
     const unlisten = listen('sync-event', ({ type, subtype, syncDisabled }) => {
@@ -263,6 +269,9 @@ export function Titlebar({ style }: TitlebarProps) {
   const { isNarrowWidth } = useResponsive();
   const serverURL = useServerURL();
   const [floatingSidebar] = useGlobalPref('floatingSidebar');
+  const [syncState, setSyncState] = useState<
+    null | 'offline' | 'local' | 'disabled' | 'error'
+  >(null);
 
   return isNarrowWidth ? null : (
     <View
@@ -333,8 +342,14 @@ export function Titlebar({ style }: TitlebarProps) {
         <ThemeSelector style={{ marginLeft: 10 }} />
       )}
       <PrivacyButton style={{ marginLeft: 10 }} />
-      {serverURL ? <SyncButton style={{ marginLeft: 10 }} /> : null}
-      <LoggedInUser style={{ marginLeft: 10 }} />
+      {serverURL ? (
+        <SyncButton
+          syncState={syncState}
+          setSyncState={setSyncState}
+          style={{ marginLeft: 10 }}
+        />
+      ) : null}
+      <LoggedInUser syncState={syncState} style={{ marginLeft: 10 }} />
     </View>
   );
 }

upcoming-release-notes/3213.md

@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [psybers]
+---
+
+Fix button saying server offline after it comes back.