From e37583c0fc2a3b8b737000e65bcc45ae7cb20de9 Mon Sep 17 00:00:00 2001
From: Robert Dyer <rdyer@unl.edu>
Date: Wed, 7 Aug 2024 08:11:50 -0500
Subject: [PATCH 1/2] Fix button saying server offline after it comes back.

---
 .../src/components/LoggedInUser.tsx           | 18 +++++-------
 .../src/components/Titlebar.tsx               | 29 ++++++++++++++-----
 2 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/packages/desktop-client/src/components/LoggedInUser.tsx b/packages/desktop-client/src/components/LoggedInUser.tsx
index 0df0d616f08..06a6d5dfbb7 100644
--- a/packages/desktop-client/src/components/LoggedInUser.tsx
+++ b/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',
               },
diff --git a/packages/desktop-client/src/components/Titlebar.tsx b/packages/desktop-client/src/components/Titlebar.tsx
index 9c25bbd10d0..f1300196e69 100644
--- a/packages/desktop-client/src/components/Titlebar.tsx
+++ b/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';
 
@@ -94,16 +94,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] = useLocalPref('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 }) => {
@@ -261,6 +267,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
@@ -331,8 +340,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>
   );
 }

From 751163609921ffb03af99be72c2ad4b124cc8925 Mon Sep 17 00:00:00 2001
From: Robert Dyer <rdyer@unl.edu>
Date: Wed, 7 Aug 2024 08:13:05 -0500
Subject: [PATCH 2/2] add release note

---
 upcoming-release-notes/3213.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 upcoming-release-notes/3213.md

diff --git a/upcoming-release-notes/3213.md b/upcoming-release-notes/3213.md
new file mode 100644
index 00000000000..09883f4bc6f
--- /dev/null
+++ b/upcoming-release-notes/3213.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [psybers]
+---
+
+Fix button saying server offline after it comes back.