update interface language when logging in

client/components/AccessControl/Login.js

@@ -6,6 +6,7 @@ import { useHistory, useLocation } from 'react-router'
 import { FormattedMessage, useIntl } from 'react-intl'
 import { Button, Spinner } from 'react-bootstrap'
 import ForgotPassword from './ForgotPassword'
+import { localeCodeToName } from 'Utilities/common'
 
 const Login = () => {
   const [email, setEmail] = useState('')
@@ -14,14 +15,15 @@ const Login = () => {
   const loginError = useSelector(({ user }) => user.error)
   const errorMessage = useSelector(({ user }) => user.errorMessage)
   const { user, pending } = useSelector(({ user }) => user)
+  const { locale, updated } = useSelector(({ locale }) => locale)
   const location = useLocation()
   const history = useHistory()
   const intl = useIntl()
 
   const dispatch = useDispatch()
 
   const login = () => {
-    dispatch(createRealToken(email, password))
+    dispatch(createRealToken(email, password, updated && localeCodeToName(locale) || null))
   }
 
   useEffect(() => {

client/components/AccessControl/Register.js

@@ -54,7 +54,7 @@ const Register = () => {
     accountCreated,
   } = useSelector(({ register }) => register)
   const userEmail = useSelector(({ user }) => user.data?.user?.email)
-  const locale = useSelector(({ locale }) => locale)
+  const { locale } = useSelector(({ locale }) => locale)
 
   const dispatch = useDispatch()
 

client/components/ConnectedIntlProvider.js

@@ -4,7 +4,7 @@ import translations from 'Utilities/translations'
 import { localeNameToCode } from '../util/common'
 
 const mapStateToProps = ({ locale, user }) => {
-  let actualLocale = locale
+  let actualLocale = locale.locale
 
   if (user.data && user.data.user && user.data.user.interfaceLanguage) {
     // If user has logged in, use locale from user object, else use value from localeReducer

client/components/LandingPage/index.js

@@ -21,7 +21,7 @@ const LandingPage = () => {
   const [registering, setRegistering] = useState(false)
 
   const open = useSelector(({ sidebar }) => sidebar.open)
-  const locale = useSelector(({ locale }) => locale)
+  const { locale } = useSelector(({ locale }) => locale)
   const { landingPageLangManuallySelected } = useSelector(({ user }) => user)
   const { pending, accountCreated } = useSelector(({ register }) => register)
 

client/components/NavBar.js

@@ -79,7 +79,7 @@ export default function NavBar() {
   const open = useSelector(({ sidebar }) => sidebar.open)
   const storyLanguage = (storyPending == false) & (story != undefined) ? story.language : undefined
   const learningLanguage = useSelector(learningLanguageSelector)
-  const locale = useSelector(({ locale }) => locale)
+  const { locale } = useSelector(({ locale }) => locale)
   const dispatch = useDispatch()
   const history = useHistory()
   const smallWindow = useWindowDimensions().width < 700

client/components/Profile/Settings.js

@@ -29,7 +29,7 @@ const SettingToggle = ({ translationId, ...props }) => {
 const Settings = ({teacherView}) => {
   const { data, pending } = useSelector(({ user }) => user)
   const { user } = data
-  const locale = useSelector(({ locale }) => locale)
+  const { locale } = useSelector(({ locale }) => locale)
   const { groups } = useSelector(({ groups }) => groups)
   const dispatch = useDispatch()
   const intl = useIntl()

client/components/Sidebar.js

@@ -40,7 +40,7 @@ export default function Sidebar({ history }) {
   // const irtScore = useSelector(({ user }) => user.irt_dummy_score)
   const open = useSelector(({ sidebar }) => sidebar.open)
   const learningLanguage = user?.user?.last_used_language
-  const locale = useSelector(({ locale }) => locale)
+  const { locale } = useSelector(({ locale }) => locale)
   const { hasTests, hasAdaptiveTests } = useSelector(({ metadata }) => metadata)
   const [localeDropdownOptions, setLocaleDropdownOptions] = useState([])
   const [practiceModalOpen, setPracticeModalOpen] = useState(false)

client/components/StaticContent/Help.js

@@ -4,7 +4,7 @@ import { Segment } from 'semantic-ui-react'
 
 const Help = () => {
   const interfaceLanguage = useSelector(({ user }) => user.data && user.data.user.interfaceLanguage)
-  const locale = useSelector(({ locale }) => locale)
+  const { locale } = useSelector(({ locale }) => locale)
 
   const lang = interfaceLanguage || locale
 

client/util/redux/localeReducer.js

@@ -1,9 +1,15 @@
 export const setLocale = locale => ({ type: 'SET_LOCALE', locale })
-
-export default (state = 'en', action) => {
+const initialState = {
+  locale: 'en',
+  updated: false
+}
+export default (state=initialState, action) => {
   switch (action.type) {
     case 'SET_LOCALE':
-      return action.locale
+      return {
+        locale: action.locale,
+        updated: true
+      }
     default:
       return state
   }

client/util/redux/userReducer.js

@@ -15,10 +15,10 @@ export const getLatestIRTScore = (language) => {
   return callBuilder(route, prefix, 'get')
 }
 
-export const createRealToken = (email, password) => {
+export const createRealToken = (email, password, locale) => {
   const route = '/session/'
   const prefix = 'LOGIN'
-  const payload = { email, password }
+  const payload = { email, password, interface_language: locale }
   return callBuilder(route, prefix, 'post', payload)
 }