fix(admin-ui): update theme lang config and condition

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

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from 'react'
+import React, { useContext } from 'react'
 import clsx from 'clsx'
 import Drawer from '@material-ui/core/Drawer'
 import Button from '@material-ui/core/Button'

admin-ui/app/context/theme/themeContext.js

@@ -8,7 +8,6 @@ const initialState = {
 
 const themeReducer = (state, action) => {
   if (action.type) {
-    window.localStorage.setItem('initTheme', action.type)
     return { theme: action.type }
   }
 

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

@@ -7,13 +7,14 @@ const INIT_STATE = {}
 
 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)
+    localStorage.setItem('initTheme', 'darkBlack')
+    localStorage.setItem('initLang', 'en')
+
+    if (userConfig && userConfig !== 'null') {
+      localStorage.setItem('userConfig', userConfig)
+    }
   }
   return state
 }

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

@@ -1,42 +1,57 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   DropdownToggle,
   DropdownMenu,
   DropdownItem,
   ButtonDropdown,
 } from 'Components'
+import { ThemeContext } from "Context/theme/themeContext"
 
 const LanguageMenu = ({ userInfo }) => {
   const [isOpen, setOpen] = useState(false)
-  const initLang = localStorage.getItem('initLang')
+  const initLang = localStorage.getItem('initLang') || 'en'
+  const initTheme = localStorage.getItem('initTheme') || 'darkBlack'
   const userConfig = JSON.parse(localStorage.getItem('userConfig'))
-  const userConfigLang = userConfig?.lang || {}
+  const userConfigLang = userConfig && userConfig !== 'null' ? userConfig?.lang : {}
+  const userConfigTheme = userConfig && userConfig !== 'null' ? userConfig?.theme : {}
   const [lang, setLang] = useState('en')
+  const [langUpdated, setLangUpdated] = useState(false)
+  const [themeUpdated, setThemeUpdated] = useState(false)
   const { t, i18n } = useTranslation()
   const { inum } = userInfo
   const toggle = () => setOpen(!isOpen)
+  const themeContext = useContext(ThemeContext)
 
   function changeLanguage(code) {
     i18n.changeLanguage(code)
     setLang(code)
 
     let lang = { ...userConfigLang }
-    const theme = userConfig?.theme || {}
 
     if (inum) {
       lang = { [inum]: code }
     }
 
-    const newConfig = { lang, theme }
+    const newConfig = { lang, theme: userConfigTheme }
     localStorage.setItem('userConfig', JSON.stringify(newConfig))
   }
 
   useEffect(() => {
     const currentLang = userConfigLang[inum] ? userConfigLang[inum] : initLang
-    i18n.changeLanguage(currentLang)
-    setLang(currentLang)
-  }, [initLang, userConfigLang])
+    const currentTheme = userConfigTheme[inum] ? userConfigTheme[inum] : initTheme
+
+    if (currentLang !== initLang && !langUpdated) {
+      i18n.changeLanguage(currentLang)
+      setLang(currentLang)
+      setLangUpdated(true)
+    }
+
+    if (currentTheme !== initTheme && !themeUpdated) {
+      themeContext.dispatch({ type: currentTheme })
+      setThemeUpdated(true)
+    }
+  }, [userConfigLang, userConfigTheme, langUpdated, themeUpdated])
 
   return (
     <ButtonDropdown isOpen={isOpen} toggle={toggle}>