fix: locale race condition on doc page load

src/views/components/change-locale/change-locale.js

@@ -1,9 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import FormControl from '@material-ui/core/FormControl'
-import Select from '@material-ui/core/Select'
-import MenuItem from '@material-ui/core/MenuItem'
-import SvgIcon from '@material-ui/core/SvgIcon'
+import FormControl from '@mui/material/FormControl'
+import Select from '@mui/material/Select'
+import MenuItem from '@mui/material/MenuItem'
+import SvgIcon from '@mui/material/SvgIcon'
 
 import './change-locale.styl'
 

src/views/pages/doc/doc.js

@@ -27,7 +27,7 @@ import { useTranslation } from 'react-i18next'
 
 import 'highlight.js/styles/github.css'
 
-import { BASE_URL } from '@core/constants'
+import { BASE_URL, SUPPORTED_LOCALES } from '@core/constants'
 import Menu from '@components/menu'
 import Seo from '@components/seo'
 
@@ -70,7 +70,13 @@ md.renderer.rules.heading_open = (tokens, idx) => {
   return `<${tag} class="doc__header" id=${escaped_text}>`
 }
 
-export default function DocPage({ getDoc, showNotification, doc, location }) {
+export default function DocPage({
+  getDoc,
+  showNotification,
+  doc,
+  location,
+  change_locale
+}) {
   const { t, i18n } = useTranslation()
   const history = useHistory()
 
@@ -84,7 +90,11 @@ export default function DocPage({ getDoc, showNotification, doc, location }) {
       locale = i18n.language
       history.push(`/${locale}${path}`)
     } else {
-      i18n.changeLanguage(locale)
+      if (SUPPORTED_LOCALES.includes(locale)) {
+        change_locale(locale)
+      } else {
+        locale = i18n.language
+      }
     }
     getDoc({ id: path, locale })
   }, [getDoc, path, locale, i18n])
@@ -239,5 +249,6 @@ DocPage.propTypes = {
   getDoc: PropTypes.func,
   showNotification: PropTypes.func,
   location: PropTypes.object,
-  doc: ImmutablePropTypes.record
+  doc: ImmutablePropTypes.record,
+  change_locale: PropTypes.func
 }

src/views/pages/doc/index.js

@@ -3,14 +3,16 @@ import { createSelector } from 'reselect'
 
 import { docActions, getDocById } from '@core/docs'
 import { notificationActions } from '@core/notifications'
+import { i18nActions } from '@core/i18n'
 
 import DocPage from './doc'
 
 const mapStateToProps = createSelector(getDocById, (doc) => ({ doc }))
 
 const mapDispatchToProps = {
   getDoc: docActions.getDoc,
-  showNotification: notificationActions.show
+  showNotification: notificationActions.show,
+  change_locale: i18nActions.change_locale
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(DocPage)