Added language selector to logged in state

Author: githubsaturn

src/App.tsx

@@ -10,7 +10,7 @@ import DarkModeContext from './contexts/DarkModeContext'
 import reducers from './redux/reducers'
 import './styles/style.css'
 import CrashReporter from './utils/CrashReporter'
-import { currentLanguageOption } from './utils/Language'
+import { getCurrentLanguageOption } from './utils/Language'
 import StorageHelper from './utils/StorageHelper'
 
 CrashReporter.getInstance().init()
@@ -37,6 +37,8 @@ function App() {
         StorageHelper.getDarkModeFromLocalStorage()
     )
 
+    const currentLanguageOption = getCurrentLanguageOption()
+
     return (
         <ConfigProvider
             direction={currentLanguageOption.rtl ? 'rtl' : 'ltr'}

src/containers/Login.tsx

@@ -1,19 +1,15 @@
 import { LockOutlined } from '@ant-design/icons'
-import { Button, Card, Collapse, Input, Layout, Radio, Row, Select } from 'antd'
-import React, { ReactComponentElement } from 'react'
+import { Button, Card, Collapse, Input, Layout, Radio, Row } from 'antd'
+import React from 'react'
 import { Redirect, RouteComponentProps } from 'react-router'
 import ApiManager from '../api/ApiManager'
 import ErrorFactory from '../utils/ErrorFactory'
-import {
-    currentLanguageOption,
-    isLanguageEnabled,
-    languagesOptions,
-    localize,
-} from '../utils/Language'
+import { isLanguageEnabled, localize } from '../utils/Language'
 import StorageHelper from '../utils/StorageHelper'
 import Toaster from '../utils/Toaster'
 import Utils from '../utils/Utils'
 import ApiComponent from './global/ApiComponent'
+import LanguageSelector from './global/LanguageSelector'
 
 const NO_SESSION = 1
 const SESSION_STORAGE = 2
@@ -67,7 +63,7 @@ export default class Login extends ApiComponent<RouteComponentProps<any>, any> {
             .catch(Toaster.createCatcher())
     }
 
-    render(): ReactComponentElement<any> {
+    render() {
         const self = this
 
         if (ApiManager.isLoggedIn()) return <Redirect to="/" />
@@ -83,17 +79,7 @@ export default class Login extends ApiComponent<RouteComponentProps<any>, any> {
                         style={{ width: 450 }}
                         extra={
                             isLanguageEnabled ? (
-                                <Select
-                                    style={{ width: 150 }}
-                                    options={languagesOptions}
-                                    value={currentLanguageOption.value}
-                                    onChange={(value) => {
-                                        StorageHelper.setLanguageInLocalStorage(
-                                            value
-                                        )
-                                        window.location.reload()
-                                    }}
-                                />
+                                <LanguageSelector forceReload={true} />
                             ) : undefined
                         }
                     >

src/containers/PageRoot.tsx

@@ -30,41 +30,14 @@ import OneClickAppConfigPage from './apps/oneclick/variables/OneClickAppConfigPa
 import ApiComponent from './global/ApiComponent'
 import ClickableLink from './global/ClickableLink'
 import DarkModeSwitch from './global/DarkModeSwitch'
+import LanguageSelector from './global/LanguageSelector'
 import NewTabLink from './global/NewTabLink'
 import Monitoring from './monitoring/Monitoring'
 import Cluster from './nodes/Cluster'
 import Settings from './settings/Settings'
 
 const { Header, Content, Sider } = Layout
 
-const MENU_ITEMS: MenuProps['items'] = [
-    {
-        key: 'dashboard',
-        label: localize('menu_item.dashboard', 'Dashboard'),
-        icon: <LaptopOutlined />,
-    },
-    {
-        key: 'apps',
-        label: localize('menu_item.app', 'Apps'),
-        icon: <CodeOutlined />,
-    },
-    {
-        key: 'monitoring',
-        label: localize('menu_item.monitoring', 'Monitoring'),
-        icon: <DashboardOutlined />,
-    },
-    {
-        key: 'cluster',
-        label: localize('menu_item.cluster', 'Cluster'),
-        icon: <ClusterOutlined />,
-    },
-    {
-        key: 'settings',
-        label: localize('menu_item.settings', 'Settings'),
-        icon: <SettingOutlined />,
-    },
-]
-
 interface RootPageInterface extends RouteComponentProps<any> {
     rootElementKey: string
     emitSizeChanged: () => void
@@ -184,8 +157,36 @@ class PageRoot extends ApiComponent<
 
     render() {
         const self = this
+        const MENU_ITEMS: MenuProps['items'] = [
+            {
+                key: 'dashboard',
+                label: localize('menu_item.dashboard', 'Dashboard'),
+                icon: <LaptopOutlined />,
+            },
+            {
+                key: 'apps',
+                label: localize('menu_item.app', 'Apps'),
+                icon: <CodeOutlined />,
+            },
+            {
+                key: 'monitoring',
+                label: localize('menu_item.monitoring', 'Monitoring'),
+                icon: <DashboardOutlined />,
+            },
+            {
+                key: 'cluster',
+                label: localize('menu_item.cluster', 'Cluster'),
+                icon: <ClusterOutlined />,
+            },
+            {
+                key: 'settings',
+                label: localize('menu_item.settings', 'Settings'),
+                icon: <SettingOutlined />,
+            },
+        ]
+
         return (
-            <Layout className="full-screen">
+            <Layout className="full-screen" key={self.props.rootElementKey}>
                 <Header
                     className="header"
                     style={{
@@ -252,6 +253,13 @@ class PageRoot extends ApiComponent<
                                     >
                                         <DarkModeSwitch />
                                     </span>
+                                    <span
+                                        style={{
+                                            marginInlineEnd: 50,
+                                        }}
+                                    >
+                                        <LanguageSelector />
+                                    </span>
                                     <span>
                                         <Button
                                             type="primary"
@@ -362,7 +370,6 @@ class PageRoot extends ApiComponent<
                     </Sider>
                     <Content>
                         <div
-                            key={self.props.rootElementKey}
                             ref={self.mainContainer}
                             style={{
                                 paddingTop: 12,

src/containers/global/LanguageSelector.tsx

@@ -0,0 +1,55 @@
+import { Select } from 'antd'
+import { Component } from 'react'
+import { connect } from 'react-redux'
+import { emitRootKeyChanged } from '../../redux/actions/GlobalActions'
+import {
+    getCurrentLanguageOption,
+    languagesOptions,
+    setCurrentLanguageOption,
+} from '../../utils/Language'
+
+class LanguageSelector extends Component<
+    { forceReload?: boolean; emitRootKeyChanged: Function },
+    { currentLanguage: string }
+> {
+    constructor(props: any) {
+        super(props)
+        this.state = {
+            currentLanguage: getCurrentLanguageOption().value,
+        }
+    }
+
+    handleChange(value: string) {
+        const self = this
+
+        setCurrentLanguageOption(value)
+        self.setState({ currentLanguage: value })
+        self.props.emitRootKeyChanged()
+        if (self.props.forceReload) {
+            window.location.reload()
+        }
+    }
+
+    render() {
+        const self = this
+        return (
+            <Select
+                style={{ width: 150 }}
+                options={languagesOptions}
+                value={self.state.currentLanguage}
+                onChange={(v) => {
+                    self.handleChange(v)
+                }}
+            />
+        )
+    }
+}
+
+export default connect(
+    undefined,
+    {
+        emitRootKeyChanged: emitRootKeyChanged,
+    },
+    null,
+    { forwardRef: true }
+)(LanguageSelector)

src/utils/Language.ts

@@ -109,18 +109,34 @@ const languagesOptions: LanguageOption[] = [
 
 const defaultLanguageOptions = languagesOptions[0]
 
-const currentLanguage = StorageHelper.getLanguageFromLocalStorage()
+const savedLanguageInBrowser = StorageHelper.getLanguageFromLocalStorage()
 
-const currentLanguageOption: LanguageOption =
-    languagesOptions.find((o) => {
-        return o.value === currentLanguage || o.alias?.includes(currentLanguage)
-    }) || defaultLanguageOptions
+function findLanguageOption(language: string): LanguageOption {
+    return (
+        languagesOptions.find((o) => {
+            return o.value === language || o.alias?.includes(language)
+        }) || defaultLanguageOptions
+    )
+}
+
+let currentLanguageOption = findLanguageOption(savedLanguageInBrowser)
 
 export function localize(key: string, message: string) {
     return currentLanguageOption.messages[key] || message
 }
 
-export { currentLanguageOption, languagesOptions }
+export function getCurrentLanguageOption() {
+    return currentLanguageOption
+}
+
+export function setCurrentLanguageOption(languageAcronym: string) {
+    currentLanguageOption = findLanguageOption(languageAcronym)
+    StorageHelper.setLanguageInLocalStorage(currentLanguageOption.value)
+}
+
+setCurrentLanguageOption(savedLanguageInBrowser)
+
+export { languagesOptions }
 
 // Currently only enable language for dev mode or demo, until the vast majority of the content is translated
 export const isLanguageEnabled = true