diff --git a/app/javascript/components/users/user/forms/UpdateUserForm.jsx b/app/javascript/components/users/user/forms/UpdateUserForm.jsx index c4700e6c9e13a7e75c1aa9edfddf15ed3e3ceb2a..b69128491eb9cf5dfa6a42f78227cea6f3dddf0e 100644 --- a/app/javascript/components/users/user/forms/UpdateUserForm.jsx +++ b/app/javascript/components/users/user/forms/UpdateUserForm.jsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React from 'react'; import { Button, Stack } from 'react-bootstrap'; import PropTypes from 'prop-types'; import { useTranslation } from 'react-i18next'; @@ -18,21 +18,17 @@ export default function UpdateUserForm({ user }) { const currentUser = useAuth(); const localesAPI = useLocales(); const updateUserAPI = useUpdateUser(user?.id); - const { t, i18n } = useTranslation(); + const { t } = useTranslation(); const { methods, fields, reset } = useUpdateUserForm({ defaultValues: { name: user?.name, email: user?.email, - language: i18n.resolvedLanguage, // Whatever language is currently rendering (needed to handle unsupported languages) + language: user?.language, role_id: user?.role?.id, }, }); - useEffect(() => { - methods.setValue('language', i18n.resolvedLanguage); - }, [i18n.resolvedLanguage]); - const canUpdateRole = PermissionChecker.hasManageUsers(currentUser); const rolesAPI = useRoles({ enabled: canUpdateRole }); diff --git a/app/javascript/contexts/auth/AuthProvider.jsx b/app/javascript/contexts/auth/AuthProvider.jsx index 96c555150478874f9171fe07164fe608c867d293..15f7c6ae640e831a953df339d7ba54bd53fa2087 100644 --- a/app/javascript/contexts/auth/AuthProvider.jsx +++ b/app/javascript/contexts/auth/AuthProvider.jsx @@ -1,7 +1,6 @@ import React, { useContext, useMemo } from 'react'; import PropTypes from 'prop-types'; import useSessions from '../../hooks/queries/users/useSessions'; -import getLanguage from '../../helpers/Language'; // TODO: Amir - Refactor this to use QueryClient context and fetch sessions data from queryCache. @@ -23,7 +22,7 @@ export default function AuthProvider({ children }) { provider: currentUser?.provider, avatar: currentUser?.avatar, signed_in: currentUser?.signed_in ?? false, - language: currentUser?.language || getLanguage(), + language: currentUser?.language || window.navigator.language || window.navigator.userLanguage, permissions: currentUser?.permissions, role: currentUser?.role, verified: currentUser?.verified, diff --git a/app/javascript/helpers/Language.jsx b/app/javascript/helpers/Language.jsx deleted file mode 100644 index 4775817bacc11df2eba041b40fe91f576a3dd290..0000000000000000000000000000000000000000 --- a/app/javascript/helpers/Language.jsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function getLanguage() { - return window.navigator.userLanguage || window.navigator.language; -} diff --git a/app/javascript/hooks/mutations/users/useCreateUser.jsx b/app/javascript/hooks/mutations/users/useCreateUser.jsx index 6a44a25085fdf1ca4b3f9126c02de8176b030b23..85be46140471aecd62d39aa1f8041cea02b30dbb 100644 --- a/app/javascript/hooks/mutations/users/useCreateUser.jsx +++ b/app/javascript/hooks/mutations/users/useCreateUser.jsx @@ -3,10 +3,9 @@ import { useNavigate, useSearchParams } from 'react-router-dom'; import { toast } from 'react-hot-toast'; import { useTranslation } from 'react-i18next'; import axios from '../../../helpers/Axios'; -import getLanguage from '../../../helpers/Language'; export default function useCreateUser() { - const { t } = useTranslation(); + const { t, i18n } = useTranslation(); const navigate = useNavigate(); const queryClient = useQueryClient(); const [searchParams] = useSearchParams(); @@ -14,7 +13,7 @@ export default function useCreateUser() { const inviteToken = searchParams.get('inviteToken') || ''; return useMutation( - ({ user, token }) => axios.post('/users.json', { user: { language: getLanguage(), invite_token: inviteToken, ...user }, token }) + ({ user, token }) => axios.post('/users.json', { user: { language: i18n.resolvedLanguage, invite_token: inviteToken, ...user }, token }) .then((resp) => resp.data.data), { onSuccess: (response) => { diff --git a/app/javascript/i18n.jsx b/app/javascript/i18n.jsx index eb8bce1c4321b3fdcc7cb1d458754c0c97f6d95c..e65093ba647735cb1c36c22774a6a352bd56164e 100644 --- a/app/javascript/i18n.jsx +++ b/app/javascript/i18n.jsx @@ -6,15 +6,17 @@ i18next .use(initReactI18next) .use(HttpApi) .init({ - fallbackLng: 'en', backend: { loadPath: '/api/v1/locales/{{lng}}.json', - requestOptions: { - cache: 'no-store', // TODO - samuel: i18n will sometime use the cache translation - }, }, - interpolation: { - escapeValue: false, + load: 'currentOnly', + fallbackLng: (locale) => { + const fallbacks = []; + if (locale?.indexOf('-') > -1) { + fallbacks.push(locale.split('-')[0]); + } + fallbacks.push('en'); + return fallbacks; }, }); export default i18next;