Merge pull request #383 from qa-guru/QAGDEV-732

QAGDEV-732 - Слетает тёмная тема при обновлении страницы

Author: nik1999777

src/app/providers/with-context.tsx

@@ -8,10 +8,7 @@ export const withContext = (component: () => ReactNode) => {
   return function WithContextComponent() {
     const { settings } = useSettings();
 
-    const theme = createCustomTheme({
-      theme: settings.theme,
-      responsiveFontSizes: settings.responsiveFontSizes,
-    });
+    const theme = createCustomTheme(settings);
 
     return <ThemeProvider theme={theme}>{component()}</ThemeProvider>;
   };

src/cache.ts

@@ -4,12 +4,32 @@ import { initialSettings, themeSettingsTypes } from "theme";
 import { THEMES } from "theme/constans";
 import { Maybe, UserRole } from "api/graphql/generated/graphql";
 
+// Функция для загрузки настроек из localStorage
+const loadSettingsFromStorage = (): themeSettingsTypes => {
+  try {
+    const storedSettings = window.localStorage.getItem("settings");
+    if (storedSettings) {
+      const parsedSettings = JSON.parse(storedSettings);
+      // Проверяем, что загруженные настройки валидны
+      if (parsedSettings && typeof parsedSettings.theme === "string") {
+        return parsedSettings;
+      }
+    }
+  } catch (error) {
+    // Silent fail - fallback to initial settings
+  }
+  return initialSettings;
+};
+
 export const userIdVar = makeVar<Maybe<string>>(null);
 export const userRolesVar = makeVar<Maybe<Maybe<UserRole>[]>>([]);
 export const commentVar = makeVar<Maybe<string | undefined>>(null);
-export const settingsVar = makeVar<themeSettingsTypes>(initialSettings);
+
+// Инициализируем настройки из localStorage
+const savedSettings = loadSettingsFromStorage();
+export const settingsVar = makeVar<themeSettingsTypes>(savedSettings);
 export const lightThemeVar = makeVar<boolean>(
-  initialSettings.theme === THEMES.LIGHT
+  savedSettings.theme === THEMES.LIGHT
 );
 
 export const cache = new InMemoryCache();

src/shared/hooks/use-local-storage.ts

@@ -1,24 +1,16 @@
-import { useEffect, useState } from "react";
-
 import { themeSettingsTypes } from "theme";
 
 export const useLocalStorage = (
   key: string,
   initialValue: themeSettingsTypes
 ) => {
-  const [data, setData] = useState(initialValue);
-
-  useEffect(() => {
-    const getData = window.localStorage.getItem(key);
-    if (getData) {
-      setData(JSON.parse(getData));
-    }
-  }, [key]);
-
   const storeData = (updateValue: themeSettingsTypes) => {
-    setData(updateValue);
-    window.localStorage.setItem(key, JSON.stringify(updateValue));
+    try {
+      window.localStorage.setItem(key, JSON.stringify(updateValue));
+    } catch (error) {
+      // Silent fail
+    }
   };
 
-  return { data, storeData };
+  return { storeData };
 };

src/theme/index.ts

@@ -1,4 +1,4 @@
-import { createTheme, responsiveFontSizes } from "@mui/material";
+import { createTheme, responsiveFontSizes, ThemeOptions } from "@mui/material";
 import merge from "lodash/merge";
 
 import components from "./components";
@@ -16,7 +16,7 @@ export const initialSettings: themeSettingsTypes = {
   responsiveFontSizes: true,
 };
 
-const baseOptions = {
+const baseOptions: ThemeOptions = {
   typography: {
     fontFamily: "'Montserrat', sans-serif",
     h1: {
@@ -56,20 +56,32 @@ const baseOptions = {
 };
 
 export const createCustomTheme = (settings: themeSettingsTypes) => {
-  let themeOptions: object = themesOptions[settings.theme];
+  // Валидируем настройки
+  if (!settings || typeof settings.theme !== "string") {
+    settings = { ...initialSettings };
+  }
+
+  let themeOptions: ThemeOptions = themesOptions[
+    settings.theme
+  ] as unknown as ThemeOptions;
 
   if (!themeOptions) {
-    themeOptions = themesOptions[THEMES.LIGHT];
+    themeOptions = themesOptions[THEMES.LIGHT] as unknown as ThemeOptions;
   }
 
-  const mergedThemeOptions = merge({}, baseOptions, themeOptions);
+  try {
+    const mergedThemeOptions = merge({}, baseOptions, themeOptions);
 
-  let theme = createTheme(mergedThemeOptions);
+    let theme = createTheme(mergedThemeOptions);
 
-  theme.components = components(theme);
-  if (settings.responsiveFontSizes) {
-    theme = responsiveFontSizes(theme);
-  }
+    theme.components = components(theme);
+    if (settings.responsiveFontSizes !== false) {
+      theme = responsiveFontSizes(theme);
+    }
 
-  return theme;
+    return theme;
+  } catch (error) {
+    // Возвращаем базовую светлую тему в случае ошибки
+    return createTheme(themesOptions[THEMES.LIGHT] as unknown as ThemeOptions);
+  }
 };