feat(admin-ui): user lang and theme config for each user

Author: harryandriyan

admin-ui/app/components/ThemeSetting/ThemeSettings.js

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React, { useContext, useEffect } from 'react'
 import clsx from 'clsx'
 import Drawer from '@material-ui/core/Drawer'
 import Button from '@material-ui/core/Button'
@@ -11,22 +11,34 @@ import lightBlueThumbnail from 'Images/theme-thumbnail/lightBlue.jpg'
 import lightGreenThumbnail from 'Images/theme-thumbnail/lightGreen.jpg'
 import styles from './styles'
 
-export function ThemeSettings() {
+export function ThemeSettings({ userInfo }) {
   const classes = styles()
   const [open, setOpen] = React.useState(false)
-  const theme = useContext(ThemeContext)
-
-  const onChangeTheme = (value) => {
-    theme.dispatch({ type: value })
-    return
-  }
+  const themeContext = useContext(ThemeContext)
 
   const themeList = [
     { value: 'darkBlack', thumbnail: darkBlackThumbnail, text: 'Dark Black' }, 
     { value: 'darkBlue', thumbnail: darkBlueThumbnail, text: 'Dark Blue' }, 
     { value: 'lightBlue', thumbnail: lightBlueThumbnail, text: 'Light Blue' }, 
     { value: 'lightGreen', thumbnail: lightGreenThumbnail, text: 'Light Green' },
   ]
+  const existingConfig = JSON.parse(localStorage.getItem('userConfig'))
+  const lang = existingConfig?.lang || {}
+  const theme = existingConfig?.theme || {}
+
+  const onChangeTheme = (value) => {
+    const { inum } = userInfo
+
+    if (inum) {
+      theme[inum] = value
+    }
+
+    const newConfig = { lang, theme }
+    localStorage.setItem('userConfig', JSON.stringify(newConfig))
+
+    themeContext.dispatch({ type: value })
+    return
+  }
 
   const toggleDrawer = (open) => (event) => {
     if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
@@ -50,7 +62,7 @@ export function ThemeSettings() {
         {themeList.map(text => (
           <Box 
             className={clsx(classes.selectItem, {
-              [classes.selectedItem]: theme.state.theme === text.value
+              [classes.selectedItem]: themeContext.state.theme === text.value
             })} 
             onClick={() => onChangeTheme(text.value)} 
             key={text.value}

admin-ui/app/redux/reducers/LogoutReducer.js

@@ -9,9 +9,11 @@ export default function logoutReducer(state = INIT_STATE, action) {
   if (action.type === USER_LOGGED_OUT) {
     const initTheme = localStorage.getItem('initTheme')
     const initLang = localStorage.getItem('initLang')
+    const userConfig = localStorage.getItem('userConfig')
     localStorage.clear()
     localStorage.setItem('initTheme', initTheme)
     localStorage.setItem('initLang', initLang)
+    localStorage.setItem('userConfig', userConfig)
   }
   return state
 }

admin-ui/app/routes/Apps/Gluu/GluuNavBar.js

@@ -49,8 +49,8 @@ function GluuNavBar({ userinfo }) {
             {/*<NavbarActivityFeed />*/}
             <NavSearch />
             <Notifications />
-            <LanguageMenu />
-            <ThemeSetting />
+            <LanguageMenu userInfo={userInfo} />
+            <ThemeSetting userInfo={userInfo} />
             <UncontrolledDropdown nav inNavbar>
               <DropdownToggle nav>
                 <Avatar.Image

admin-ui/app/routes/Apps/Gluu/LanguageMenu.js

@@ -7,24 +7,36 @@ import {
   ButtonDropdown,
 } from 'Components'
 
-const LanguageMenu = () => {
+const LanguageMenu = ({ userInfo }) => {
   const [isOpen, setOpen] = useState(false)
   const initLang = localStorage.getItem('initLang')
+  const userConfig = JSON.parse(localStorage.getItem('userConfig'))
+  const userConfigLang = userConfig?.lang || {}
   const [lang, setLang] = useState('en')
   const { t, i18n } = useTranslation()
+  const { inum } = userInfo
   const toggle = () => setOpen(!isOpen)
 
   function changeLanguage(code) {
     i18n.changeLanguage(code)
     setLang(code)
-    localStorage.setItem('initLang', code)
+
+    let lang = { ...userConfigLang }
+    const theme = userConfig?.theme || {}
+
+    if (inum) {
+      lang = { [inum]: code }
+    }
+
+    const newConfig = { lang, theme }
+    localStorage.setItem('userConfig', JSON.stringify(newConfig))
   }
 
   useEffect(() => {
-    i18n.changeLanguage(initLang)
-    const currentLang = initLang ? initLang : 'en'
+    const currentLang = userConfigLang[inum] ? userConfigLang[inum] : initLang
+    i18n.changeLanguage(currentLang)
     setLang(currentLang)
-  }, [initLang])
+  }, [initLang, userConfigLang])
 
   return (
     <ButtonDropdown isOpen={isOpen} toggle={toggle}>