fix: refactor check congruency checks

oxen-io · Oct 20, 2023 · d33aa0d · d33aa0d
1 parent 0ed3a95
commit d33aa0d
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 36 deletions.
diff --git a/ts/components/leftpane/ActionsPanel.tsx b/ts/components/leftpane/ActionsPanel.tsx
@@ -149,22 +149,25 @@ const fetchReleaseFromFileServerInterval = 1000 * 60; // try to fetch the latest
 const setupTheme = async () => {
   const shouldFollowSystemTheme = window.getSettingValue(SettingsKey.hasFollowSystemThemeEnabled);
   const theme = window.Events.getThemeSetting();
-
-
-  if (shouldFollowSystemTheme) {
-    // check if following system theme, if yes, check currently set theme congruency with system theme and make changes
-    checkThemeCongruency();
-    return
-  }
-
-  // If not following the system theme or no mismatch found, apply the default theme logic
-  await switchThemeTo({
+  const themeConfig = {
     theme,
     mainWindow: true,
     usePrimaryColor: true,
     dispatch: window?.inboxStore?.dispatch || undefined,
-  });
+  };
+
+  if (shouldFollowSystemTheme) {
+    const themeIsCongruent = await checkThemeCongruency();
+    // Only set theme if it matches with native theme, otherwise handled by checkThemeCongruency()
+    if (!themeIsCongruent) {
+      await switchThemeTo(themeConfig);
+    }
+    return;
+  }
+
+  await switchThemeTo(themeConfig);
 };
+
 // Do this only if we created a new Session ID, or if we already received the initial configuration message
 const triggerSyncIfNeeded = async () => {
   const us = UserUtils.getOurPubKeyStrFromCache();

diff --git a/ts/components/settings/section/CategoryAppearance.tsx b/ts/components/settings/section/CategoryAppearance.tsx
@@ -35,13 +35,11 @@ export const SettingsCategoryAppearance = (props: { hasPassword: boolean | null
           />
         )}
         <SessionToggleWithDescription
-          // eslint-disable-next-line @typescript-eslint/no-misused-promises
-          onClickToggle={async () => {
+          onClickToggle={() => {
             const toggledValue = !isFollowSystemThemeEnabled;
-            await window.setSettingValue(SettingsKey.hasFollowSystemThemeEnabled, toggledValue);
-            forceUpdate();
+            void window.setSettingValue(SettingsKey.hasFollowSystemThemeEnabled, toggledValue);
             if (!isFollowSystemThemeEnabled) {
-              checkThemeCongruency();
+              void checkThemeCongruency();
             }
           }}
           title={window.i18n('matchThemeSystemSettingTitle')}

diff --git a/ts/mains/main_renderer.tsx b/ts/mains/main_renderer.tsx
@@ -114,9 +114,6 @@ function mapOldThemeToNew(theme: string) {
 }
 // using __unused as lodash is imported using _
 ipcRenderer.on('native-theme-update', (__unused, shouldUseDarkColors) => {
-  // Clarify function when follow system theme is on, do we allow users to switch themes?
-  // When toggled between auto follow, we should change themes too
-
   const shouldFollowSystemTheme = window.getSettingValue(SettingsKey.hasFollowSystemThemeEnabled);
 
   if (shouldFollowSystemTheme) {

diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx
@@ -32,23 +32,27 @@ export function getOppositeTheme(themeName: string) {
   return themeName;
 }
 
-export function checkThemeCongruency() {
-  // called when we need to check if the current Session theme matches the current system theme, updates if there is an incongruence
-
+export async function checkThemeCongruency(): Promise<boolean> {
   const theme = window.Events.getThemeSetting();
-  ipcRenderer.send('get-native-theme');
-  ipcRenderer.once('send-native-theme', (_, shouldUseDarkColors) => {
-    if (
-      (shouldUseDarkColors && theme.includes('light')) ||
-      (!shouldUseDarkColors && theme.includes('dark'))
-    ) {
-      const newTheme = getOppositeTheme(theme) as ThemeStateType;
-      void switchThemeTo({
-        theme: newTheme,
-        mainWindow: true,
-        usePrimaryColor: true,
-        dispatch: window?.inboxStore?.dispatch || undefined,
-      });
-    }
+
+  return new Promise(resolve => {
+    ipcRenderer.send('get-native-theme');
+    ipcRenderer.once('send-native-theme', (_, shouldUseDarkColors) => {
+      const isMismatchedTheme =
+        (shouldUseDarkColors && theme.includes('light')) ||
+        (!shouldUseDarkColors && theme.includes('dark'));
+      if (isMismatchedTheme) {
+        const newTheme = getOppositeTheme(theme) as ThemeStateType;
+        void switchThemeTo({
+          theme: newTheme,
+          mainWindow: true,
+          usePrimaryColor: true,
+          dispatch: window?.inboxStore?.dispatch || undefined,
+        });
+        resolve(true); // Theme was switched
+      } else {
+        resolve(false); // Theme was not switched
+      }
+    });
   });
 }