Fixed multiple issues with local (#4717)

app/javascript/components/users/user/forms/UpdateUserForm.jsx

-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 });
 

app/javascript/contexts/auth/AuthProvider.jsx

 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,

app/javascript/helpers/Language.jsx

-export default function getLanguage() {
-  return window.navigator.userLanguage || window.navigator.language;
-}

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) => {

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;