From 82ce1daef587c882319e0876664350601872dbc2 Mon Sep 17 00:00:00 2001
From: Vijaykant Yadav <vjy239@gmail.com>
Date: Wed, 23 Oct 2024 16:20:23 +0530
Subject: [PATCH] fix: darkmode action on viewer in incognito

---
 .../src/AppBuilder/Viewer/DesktopHeader.jsx   |  7 ++---
 frontend/src/AppBuilder/_hooks/useAppData.js  |  2 +-
 frontend/src/_components/DarkModeToggle.jsx   |  4 ++-
 frontend/src/_hooks/useAppDarkMode.js         | 26 +++++--------------
 server/src/controllers/apps.controller.v2.ts  |  1 +
 5 files changed, 13 insertions(+), 27 deletions(-)

diff --git a/frontend/src/AppBuilder/Viewer/DesktopHeader.jsx b/frontend/src/AppBuilder/Viewer/DesktopHeader.jsx
index 43bb7acb4f..0c297b862c 100644
--- a/frontend/src/AppBuilder/Viewer/DesktopHeader.jsx
+++ b/frontend/src/AppBuilder/Viewer/DesktopHeader.jsx
@@ -19,13 +19,10 @@ const DesktopHeader = ({
   isAppLoaded,
   changeToDarkMode,
 }) => {
-  const { editingVersion, showDarkModeToggle, isReleasedVersionId } = useStore(
+  const { showDarkModeToggle, isReleasedVersionId } = useStore(
     (state) => ({
-      editingVersion: state?.editingVersion,
-      isReleasedVersionId: state?.releasedVersionId == state.editingVersion || state.isVersionReleased,
-      switchDarkMode: state.switchDarkMode,
+      isReleasedVersionId: state?.releasedVersionId == state.selectedVersion?.id || state.isVersionReleased,
       showDarkModeToggle: state.globalSettings.appMode === 'auto' || !state.globalSettings.appMode,
-      appMode: state.globalSettings.appMode,
     }),
     shallow
   );
diff --git a/frontend/src/AppBuilder/_hooks/useAppData.js b/frontend/src/AppBuilder/_hooks/useAppData.js
index 604339f9e1..e216cbadad 100644
--- a/frontend/src/AppBuilder/_hooks/useAppData.js
+++ b/frontend/src/AppBuilder/_hooks/useAppData.js
@@ -190,7 +190,7 @@ const useAppData = (appId, moduleId, mode = 'edit', { environmentId, versionId }
       );
 
       setPages(pages, moduleId);
-      setPageSettings(deepCamelCase(appData?.editing_version?.page_settings));
+      setPageSettings(deepCamelCase(appData?.editing_version?.page_settings || appData?.page_settings));
 
       // set starting page as homepage initially
       let startingPage = appData.pages.find((page) => page.id === homePageId);
diff --git a/frontend/src/_components/DarkModeToggle.jsx b/frontend/src/_components/DarkModeToggle.jsx
index 56a7639842..2f0ef8474c 100644
--- a/frontend/src/_components/DarkModeToggle.jsx
+++ b/frontend/src/_components/DarkModeToggle.jsx
@@ -102,7 +102,9 @@ export const DarkModeToggle = function DarkModeToggle({
         </animated.svg>
 
         {showText && (
-          <span className="dark-theme-toggle-btn-text">Switch to {!darkMode ? 'dark mode' : 'light mode'}</span>
+          <span className="dark-theme-toggle-btn-text" onClick={toggleDarkMode}>
+            Switch to {!darkMode ? 'dark mode' : 'light mode'}
+          </span>
         )}
       </div>
     </OverlayTrigger>
diff --git a/frontend/src/_hooks/useAppDarkMode.js b/frontend/src/_hooks/useAppDarkMode.js
index c89fb204ed..7e5b33f87b 100644
--- a/frontend/src/_hooks/useAppDarkMode.js
+++ b/frontend/src/_hooks/useAppDarkMode.js
@@ -1,31 +1,17 @@
-import { useCallback, useMemo } from 'react';
+import { useMemo } from 'react';
 import { shallow } from 'zustand/shallow';
-import { useEditorStore } from '@/_stores/editorStore';
-import { useAppDataStore } from '@/_stores/appDataStore';
+import useStore from '@/AppBuilder/_stores/store';
 
 const useAppDarkMode = () => {
-  const { appMode, setAppMode } = useEditorStore(
-    (state) => ({
-      appMode: state.appMode,
-      setAppMode: state.actions.setAppMode,
-    }),
-    shallow
-  );
-
-  const { isTJDarkMode } = useAppDataStore(
+  const { appMode, globalSettingsChanged, isTJDarkMode } = useStore(
     (state) => ({
+      appMode: state.globalSettings.appMode,
+      globalSettingsChanged: state.globalSettingsChanged,
       isTJDarkMode: state.isTJDarkMode,
     }),
     shallow
   );
 
-  const handleAppModeChange = useCallback(
-    (appMode = 'auto') => {
-      setAppMode(appMode);
-    },
-    [setAppMode]
-  );
-
   const isAppDarkMode = useMemo(() => {
     if (appMode === 'light') {
       return false;
@@ -37,7 +23,7 @@ const useAppDarkMode = () => {
   }, [appMode, isTJDarkMode]);
 
   return {
-    onAppModeChange: handleAppModeChange,
+    onAppModeChange: globalSettingsChanged,
     appMode,
     isAppDarkMode,
   };
diff --git a/server/src/controllers/apps.controller.v2.ts b/server/src/controllers/apps.controller.v2.ts
index 00ef864b35..746e0fdca0 100644
--- a/server/src/controllers/apps.controller.v2.ts
+++ b/server/src/controllers/apps.controller.v2.ts
@@ -153,6 +153,7 @@ export class AppsControllerV2 {
       homePageId: versionToLoad.homePageId,
       globalSettings: { ...versionToLoad.globalSettings, theme: appTheme },
       showViewerNavigation: versionToLoad.showViewerNavigation,
+      pageSettings: versionToLoad?.pageSettings,
     };
   }