refactor: app state handling (#2415)

Signed-off-by: Adam Setch <adam.setch@outlook.com>

Author: setchy

src/renderer/context/App.tsx

@@ -102,10 +102,21 @@ export interface AppContextState {
 export const AppContext = createContext<Partial<AppContextState>>({});
 
 export const AppProvider = ({ children }: { children: ReactNode }) => {
+  const existingState = loadState();
+
+  const [auth, setAuth] = useState<AuthState>(
+    existingState.auth
+      ? { ...defaultAuth, ...existingState.auth }
+      : defaultAuth,
+  );
+
+  const [settings, setSettings] = useState<SettingsState>(
+    existingState.settings
+      ? { ...defaultSettings, ...existingState.settings }
+      : defaultSettings,
+  );
+
   const { setColorMode, setDayScheme, setNightScheme } = useTheme();
-  const [auth, setAuth] = useState<AuthState>(defaultAuth);
-  const [settings, setSettings] = useState<SettingsState>(defaultSettings);
-  const [needsAccountRefresh, setNeedsAccountRefresh] = useState(false);
 
   const {
     notifications,
@@ -119,70 +130,26 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
   } = useNotifications();
 
   const notificationCount = getNotificationCount(notifications);
+
   const unreadNotificationCount = getUnreadNotificationCount(notifications);
 
   const hasNotifications = useMemo(
     () => notificationCount > 0,
     [notificationCount],
   );
+
   const hasUnreadNotifications = useMemo(
     () => unreadNotificationCount > 0,
     [unreadNotificationCount],
   );
 
-  const restorePersistedState = useCallback(async () => {
-    const existing = loadState();
-
-    // Restore settings before accounts to ensure filters are available before fetching notifications
-    if (existing.settings) {
-      setSettings({ ...defaultSettings, ...existing.settings });
-    }
-
-    if (existing.auth) {
-      setAuth({ ...defaultAuth, ...existing.auth });
-
-      // Trigger the effect to refresh accounts
-      setNeedsAccountRefresh(true);
-    }
-  }, []);
-
-  useEffect(() => {
-    restorePersistedState();
-  }, [restorePersistedState]);
-
-  // Refresh account details on startup
-  useEffect(() => {
-    if (!needsAccountRefresh) {
+  const refreshAllAccounts = useCallback(() => {
+    if (!auth.accounts.length) {
       return;
     }
 
-    Promise.all(auth.accounts.map(refreshAccount)).finally(() => {
-      setNeedsAccountRefresh(false);
-    });
-  }, [needsAccountRefresh, auth.accounts]);
-
-  // Refresh account details on interval
-  useIntervalTimer(() => {
-    Promise.all(auth.accounts.map(refreshAccount));
-  }, Constants.REFRESH_ACCOUNTS_INTERVAL_MS);
-
-  useEffect(() => {
-    const colorMode = mapThemeModeToColorMode(settings.theme);
-    const colorScheme = mapThemeModeToColorScheme(
-      settings.theme,
-      settings.increaseContrast,
-    );
-
-    setColorMode(colorMode);
-    setDayScheme(colorScheme ?? DEFAULT_DAY_COLOR_SCHEME);
-    setNightScheme(colorScheme ?? DEFAULT_NIGHT_COLOR_SCHEME);
-  }, [
-    settings.theme,
-    settings.increaseContrast,
-    setColorMode,
-    setDayScheme,
-    setNightScheme,
-  ]);
+    return Promise.all(auth.accounts.map(refreshAccount));
+  }, [auth.accounts]);
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: Fetch new notifications when account count or filters change
   useEffect(() => {
@@ -211,6 +178,35 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
     settings.fetchType === FetchType.INACTIVITY ? settings.fetchInterval : null,
   );
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Refresh account details on startup
+  useEffect(() => {
+    refreshAllAccounts();
+  }, []);
+
+  // Refresh account details on interval
+  useIntervalTimer(() => {
+    refreshAllAccounts();
+  }, Constants.REFRESH_ACCOUNTS_INTERVAL_MS);
+
+  // Theme
+  useEffect(() => {
+    const colorMode = mapThemeModeToColorMode(settings.theme);
+    const colorScheme = mapThemeModeToColorScheme(
+      settings.theme,
+      settings.increaseContrast,
+    );
+
+    setColorMode(colorMode);
+    setDayScheme(colorScheme ?? DEFAULT_DAY_COLOR_SCHEME);
+    setNightScheme(colorScheme ?? DEFAULT_NIGHT_COLOR_SCHEME);
+  }, [
+    settings.theme,
+    settings.increaseContrast,
+    setColorMode,
+    setDayScheme,
+    setNightScheme,
+  ]);
+
   // biome-ignore lint/correctness/useExhaustiveDependencies: We want to update the tray on setting or notification changes
   useEffect(() => {
     setUseUnreadActiveIcon(settings.useUnreadActiveIcon);
@@ -242,23 +238,29 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
   }, []);
 
   const clearFilters = useCallback(() => {
-    const newSettings = { ...settings, ...defaultFilters };
-    setSettings(newSettings);
-    saveState({ auth, settings: newSettings });
-  }, [auth, settings]);
+    setSettings((prevSettings) => {
+      const newSettings = { ...prevSettings, ...defaultFilters };
+      saveState({ auth, settings: newSettings });
+      return newSettings;
+    });
+  }, [auth]);
 
   const resetSettings = useCallback(() => {
-    setSettings(defaultSettings);
-    saveState({ auth, settings: defaultSettings });
+    setSettings(() => {
+      saveState({ auth, settings: defaultSettings });
+      return defaultSettings;
+    });
   }, [auth]);
 
   const updateSetting = useCallback(
     (name: keyof SettingsState, value: SettingsValue) => {
-      const newSettings = { ...settings, [name]: value };
-      setSettings(newSettings);
-      saveState({ auth, settings: newSettings });
+      setSettings((prevSettings) => {
+        const newSettings = { ...prevSettings, [name]: value };
+        saveState({ auth, settings: newSettings });
+        return newSettings;
+      });
     },
-    [auth, settings],
+    [auth],
   );
 
   const updateFilter = useCallback(
@@ -267,7 +269,7 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
         ? [...settings[name], value]
         : settings[name].filter((item) => item !== value);
 
-      updateSetting(name, updatedFilters as FilterValue[]);
+      updateSetting(name, updatedFilters);
     },
     [updateSetting, settings],
   );
@@ -289,7 +291,9 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
           window.gitify.zoom.getLevel(),
         );
 
-        updateSetting('zoomPercentage', zoomPercentage);
+        if (zoomPercentage !== settings.zoomPercentage) {
+          updateSetting('zoomPercentage', zoomPercentage);
+        }
       }, DELAY);
     };