Make services for initAuthData, add ability share json settings betwe…

…en sessions and browsers

json-server/db.json

@@ -116,7 +116,7 @@
         "isArticleRaitingEnebled": true
       },
       "jsonSettings": {
-        "theme": "app_purple_theme"
+        "theme": "app_dark_green"
       },
       "avatar": "https://sun9-60.userapi.com/impg/eqo5sYxr_jyw_yWO9_pKJRMkx8WVwVENfJrecQ/1zVSkEZs5NM.jpg?size=1620x2160&quality=95&sign=73cab6427b2934395f04d96835eb3720&type=album"
     },

src/app/App.tsx

@@ -1,39 +1,46 @@
 import React from 'react'
-import { useDispatch } from 'react-redux'
+import { useSelector } from 'react-redux'
 
 import { classNames } from '@/shared/lib/ClassNames/ClassNames'
 import { useTheme } from '@/app/providers/ThemeProvider'
 import { AppRouter } from '@/app/providers/router'
 import { Navbar } from '@/widgets/Navbar'
 import { Sidebar } from '@/widgets/Sidebar'
-import { USER_LOCALSTORAGE_KEY } from '@/shared/const/lodalStorage'
-import { userActions } from '@/entities/User'
+import { getUserInited, initAuthData } from '@/entities/User'
+import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch/useAppDispatch'
+import { PageLoader } from '@/widgets/PageLoader'
 
 function App() {
   const { theme } = useTheme()
-  const dispatch = useDispatch()
+  const dispatch = useAppDispatch()
+  const inited = useSelector(getUserInited)
 
   //* Есть баг в этом участке, следует разобраться
   // const inited = useSelector(getUserInited);
 
   React.useEffect(() => {
-    const user = localStorage.getItem(USER_LOCALSTORAGE_KEY)
-    if (user) {
-      dispatch(userActions.initAuthData(JSON.parse(user)))
-    }
+    dispatch(initAuthData())
   }, [dispatch])
 
-  return (
-    <div className={classNames('app', {}, [theme])}>
-      <React.Suspense fallback="">
-        <Navbar />
-        <div className="content-page">
-          <Sidebar />
-          <AppRouter />
-        </div>
-      </React.Suspense>
-    </div>
+  let content = (
+    <React.Suspense fallback="">
+      <Navbar />
+      <div className="content-page">
+        <Sidebar />
+        <AppRouter />
+      </div>
+    </React.Suspense>
   )
+
+  if (!inited) {
+    content = (
+      <div className={classNames('app', {}, [theme])}>
+        <PageLoader />
+      </div>
+    )
+  }
+
+  return <div className={classNames('app', {}, [theme])}>{content}</div>
 }
 
 export default App

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

@@ -12,13 +12,13 @@ interface ThemeProviderProps {
 
 const ThemeProvider = (props: ThemeProviderProps) => {
   const { initialTheme, children } = props
-  const { theme: defaultTheme = Theme.LIGHT } = useJsonUserSettings()
+  const { theme: defaultTheme } = useJsonUserSettings()
   const [isThemeInited, setIsThemeInited] = useState(false)
 
-  const [theme, setTheme] = useState<Theme>(initialTheme || defaultTheme)
+  const [theme, setTheme] = useState<Theme>(initialTheme || defaultTheme || Theme.LIGHT)
 
   useEffect(() => {
-    if (!isThemeInited) {
+    if (!isThemeInited && defaultTheme) {
       setTheme(defaultTheme)
       setIsThemeInited(true)
     }

src/entities/User/index.ts

@@ -1,3 +1,5 @@
+export { initAuthData } from './model/services/initAuthData'
+
 export { saveJsonSettings } from './model/services/saveJsonSettings'
 
 export { useJsonUserSettings } from './model/selectors/jsonUserSettings/jsonUserSettings'

src/entities/User/model/api/userApi.ts

@@ -17,7 +17,15 @@ const userApi = rtkApi.injectEndpoints({
         body: { jsonSettings },
       }),
     }),
+
+    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/model/services/initAuthData.ts

@@ -0,0 +1,27 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+
+import { User } from '../types/user'
+import { getUserDataByIdQuery } from '../api/userApi'
+
+import { ThunkConfig } from '@/app/providers/StoreProvider'
+import { USER_LOCALSTORAGE_KEY } from '@/shared/const/lodalStorage'
+
+export const initAuthData = createAsyncThunk<User, void, ThunkConfig<string>>(
+  'user/initAuthData',
+  async (newJsonSettings, thunkApi) => {
+    const { rejectWithValue, dispatch } = thunkApi
+    const userId = localStorage.getItem(USER_LOCALSTORAGE_KEY)
+
+    if (!userId) {
+      return rejectWithValue('Уникальный id пользователя не был найден')
+    }
+
+    try {
+      const response = await dispatch(getUserDataByIdQuery(userId)).unwrap()
+
+      return response
+    } catch (e) {
+      return rejectWithValue('error')
+    }
+  },
+)

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

@@ -3,6 +3,7 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 import { UserSchema, User } from '../types/user'
 import { saveJsonSettings } from '../services/saveJsonSettings'
 import { JsonSettings } from '../types/jsonSettings'
+import { initAuthData } from '../services/initAuthData'
 
 import { USER_LOCALSTORAGE_KEY } from '@/shared/const/lodalStorage'
 import { setFeatureFlags } from '@/shared/lib/features'
@@ -17,13 +18,9 @@ export const userSlice = createSlice({
   reducers: {
     setAuthData: (state, action: PayloadAction<User>) => {
       state.authData = action.payload
+      localStorage.setItem(USER_LOCALSTORAGE_KEY, action.payload.id)
       setFeatureFlags(action.payload.features)
     },
-    initAuthData: (state, action: PayloadAction<User>) => {
-      state.authData = action.payload
-      setFeatureFlags(action.payload.features)
-      state._inited = true
-    },
     logout: (state) => {
       state.authData = undefined
       localStorage.removeItem(USER_LOCALSTORAGE_KEY)
@@ -35,6 +32,14 @@ export const userSlice = createSlice({
         state.authData.jsonSettings = action.payload
       }
     })
+    builder.addCase(initAuthData.fulfilled, (state, action: PayloadAction<User>) => {
+      state.authData = action.payload
+      setFeatureFlags(action.payload.features)
+      state._inited = true
+    })
+    builder.addCase(initAuthData.rejected, (state) => {
+      state._inited = true
+    })
   },
 })
 

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

@@ -2,7 +2,6 @@ import { createAsyncThunk } from '@reduxjs/toolkit'
 
 import { ThunkConfig } from '@/app/providers/StoreProvider'
 import { User, userActions } from '@/entities/User'
-import { USER_LOCALSTORAGE_KEY } from '@/shared/const/lodalStorage'
 
 interface LoginByUsernameProps {
   username?: string
@@ -18,7 +17,6 @@ export const loginByUsername = createAsyncThunk<User, LoginByUsernameProps, Thun
       if (!response.data) {
         throw new Error()
       }
-      localStorage.setItem(USER_LOCALSTORAGE_KEY, JSON.stringify(response.data))
       dispatch(userActions.setAuthData(response.data))
 
       return response.data