fix: fix saving user and theme

src/app/App.tsx

@@ -1,20 +1,26 @@
 import { Suspense, useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 
 import { Navbar, Sidebar } from '@/widgets';
 import { classNames } from '@/shared/lib/classNames';
-import { getUserInited, userActions } from '@/entities/User';
+import { getUserInited, initAuthData } from '@/entities/User';
+import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch/useAppDispatch';
+import { PageLoader } from '@/widgets/PageLoader';
 
 import { AppRouter } from './providers/router';
 
 export function App() {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const inited = useSelector(getUserInited);
 
   useEffect(() => {
-    dispatch(userActions.initAuthData());
+    dispatch(initAuthData());
   }, [dispatch]);
 
+  if (!inited) {
+    return <PageLoader />;
+  }
+
   return (
     <div className={classNames('app', {}, [])}>
       <Suspense fallback="">

src/app/providers/ThemeProvider/ui/ThemeProvider.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useMemo, useState } from 'react';
+import { ReactNode, useEffect, useMemo, useState } from 'react';
 
 import { ThemeContext } from '@/shared/lib/context/ThemeContext';
 import { Theme } from '@/shared/const/theme';
@@ -11,8 +11,16 @@ interface ThemeProviderProps {
 
 export const ThemeProvider = (props: ThemeProviderProps) => {
   const { children, initialTheme } = props;
-  const { theme: defaultTheme = Theme.LIGHT } = useJsonSettings();
-  const [theme, setTheme] = useState<Theme>(initialTheme || defaultTheme);
+  const { theme: defaultTheme } = useJsonSettings();
+  const [isThemeInited, setThemeInited] = useState(false);
+  const [theme, setTheme] = useState<Theme>(initialTheme || defaultTheme || Theme.LIGHT);
+
+  useEffect(() => {
+    if (!isThemeInited && !initialTheme && defaultTheme) {
+      setTheme(defaultTheme);
+      setThemeInited(true);
+    }
+  }, [defaultTheme, initialTheme, isThemeInited]);
 
   const defaultProps = useMemo(
     () => ({

src/entities/User/api/userApi.ts

@@ -19,7 +19,14 @@ const userApi = rtkApi.injectEndpoints({
         },
       }),
     }),
+    getUserDataById: build.query<User, string>({
+      query: (userId) => ({
+        url: `/users/${userId}`,
+        method: 'GET',
+      }),
+    }),
   }),
 });
 
 export const setJsonSettingsMutation = userApi.endpoints.setJsonSettings.initiate;
+export const getUserDataByIdQuery = userApi.endpoints.getUserDataById.initiate;

src/entities/User/index.ts

@@ -10,3 +10,4 @@ export {
 export { UserRole } from './model/consts/consts';
 export { useJsonSettingByKey, useJsonSettings } from './model/selectors/jsonSettings/jsonSettings';
 export { saveJsonSettings } from './model/services/saveJsonSettings';
+export { initAuthData } from './model/services/initAuthData';

src/entities/User/model/services/initAuthData.ts

@@ -0,0 +1,29 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+
+import { ThunkConfig } from '@/app/providers/StoreProvider';
+import { USER_LOCALSTORAGE_KEY } from '@/shared/const/localStorage';
+
+import { getUserDataByIdQuery } from '../../api/userApi';
+import { User } from '../types/user';
+
+export const initAuthData = createAsyncThunk<User, void, ThunkConfig<string>>(
+  'user/initAuthData',
+  async (_, thunkAPI) => {
+    const { rejectWithValue, dispatch } = thunkAPI;
+
+    const userId = localStorage.getItem(USER_LOCALSTORAGE_KEY);
+
+    if (!userId) {
+      return rejectWithValue('');
+    }
+
+    try {
+      const response = await dispatch(getUserDataByIdQuery(userId)).unwrap();
+
+      return response;
+    } catch (e) {
+      console.log(e);
+      return rejectWithValue('');
+    }
+  },
+);

src/entities/User/model/slice/userSlice.ts

@@ -3,6 +3,7 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { USER_LOCALSTORAGE_KEY } from '@/shared/const/localStorage';
 import { setFeatureFlags } from '@/shared/lib/features';
 
+import { initAuthData } from '../services/initAuthData';
 import { saveJsonSettings } from '../services/saveJsonSettings';
 import { User, UserSchema } from '../types/user';
 import { JsonSettings } from '../types/jsonSettings';
@@ -18,16 +19,7 @@ export const userSlice = createSlice({
     setAuthData: (state, action: PayloadAction<User>) => {
       state.authData = action.payload;
       setFeatureFlags(action.payload.features);
-    },
-    initAuthData: (state) => {
-      const userData = localStorage.getItem(USER_LOCALSTORAGE_KEY);
-
-      if (userData) {
-        const user = JSON.parse(userData) as User;
-        state.authData = user;
-        setFeatureFlags(user.features);
-      }
-      state._inited = true;
+      localStorage.setItem(USER_LOCALSTORAGE_KEY, action.payload.id);
     },
     logout: (state) => {
       state.authData = undefined;
@@ -44,6 +36,15 @@ export const userSlice = createSlice({
         }
       },
     );
+    builder
+      .addCase(initAuthData.fulfilled, (state, { payload }: PayloadAction<User>) => {
+        state.authData = payload;
+        setFeatureFlags(payload.features);
+        state._inited = true;
+      })
+      .addCase(initAuthData.rejected, (state) => {
+        state._inited = true;
+      });
   },
 });
 

src/features/authByUsername/model/services/loginByUsername/loginByUsername.ts

@@ -1,7 +1,6 @@
 import { createAsyncThunk } from '@reduxjs/toolkit';
 
 import { User, userActions } from '@/entities/User';
-import { USER_LOCALSTORAGE_KEY } from '@/shared/const/localStorage';
 import { ThunkConfig } from '@/app/providers/StoreProvider';
 
 interface LoginByUsernameProps {
@@ -21,8 +20,6 @@ export const loginByUsername = createAsyncThunk<User, LoginByUsernameProps, Thun
         throw new Error();
       }
 
-      localStorage.setItem(USER_LOCALSTORAGE_KEY, JSON.stringify(response.data));
-
       dispatch(userActions.setAuthData(response.data));
 
       return response.data;

src/features/authByUsername/ui/LoginForm/LoginForm.tsx

@@ -11,6 +11,7 @@ import {
   ReducersList,
 } from '@/shared/lib/components/DynamicModuleLoader/DynamicModuleLoader';
 import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch/useAppDispatch';
+import { useTheme } from '@/shared/lib/hooks/useTheme/useTheme';
 
 import { getLoginUsername } from '../../model/selectors/getLoginUsername/getLoginUsername';
 import { getLoginPassword } from '../../model/selectors/getLoginPassword/getLoginPassword';
@@ -40,6 +41,7 @@ export const LoginForm = memo((props: LoginFormProps) => {
   const password = useSelector(getLoginPassword);
   const isLoading = useSelector(getLoginIsLoading);
   const error = useSelector(getLoginError);
+  const { setTheme } = useTheme();
 
   const onChangeUsername = useCallback(
     (value: string) => {
@@ -59,9 +61,12 @@ export const LoginForm = memo((props: LoginFormProps) => {
     const result = await dispatch(loginByUsername({ username, password }));
 
     if (result.meta.requestStatus === 'fulfilled') {
+      if (typeof result?.payload === 'object' && result?.payload?.jsonSettings?.theme) {
+        setTheme?.(result.payload.jsonSettings.theme);
+      }
       onSuccess();
     }
-  }, [onSuccess, dispatch, password, username]);
+  }, [onSuccess, dispatch, password, username, setTheme]);
 
   return (
     <DynamicModuleLoader reducers={initialReducers} removeAfterUnmount>

src/shared/lib/hooks/useTheme/useTheme.ts

@@ -7,6 +7,7 @@ import { ThemeContext } from '../../context/ThemeContext';
 interface UseThemeResult {
   toggleTheme: (saveAction: (theme: Theme) => void) => void;
   theme: Theme;
+  setTheme?: (theme: Theme) => void;
 }
 
 export function useTheme(): UseThemeResult {
@@ -38,5 +39,5 @@ export function useTheme(): UseThemeResult {
     saveAction?.(newTheme);
   };
 
-  return { theme: theme || Theme.LIGHT, toggleTheme };
+  return { theme: theme || Theme.LIGHT, toggleTheme, setTheme };
 }