WIP: Arabic localization.|

client/src/containers/Preferences/Users/Users.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Tabs, Tab } from '@blueprintjs/core';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 import classNames from 'classnames';
 
 import 'style/pages/Preferences/Users.scss';
@@ -26,8 +26,8 @@ function UsersPreferences({ openDialog }) {
       <div className={classNames(CLASSES.CARD)}>
         <div className={classNames(CLASSES.PREFERENCES_PAGE_TABS)}>
           <Tabs animate={true} onChange={onChangeTabs}>
-            <Tab id="users" title={formatMessage({ id: 'users' })} />
-            <Tab id="roles" title={formatMessage({ id: 'roles' })} />
+            <Tab id="users" title={intl.get('users')} />
+            <Tab id="roles" title={intl.get('roles')} />
           </Tabs>
         </div>
         <PreferencesSubContent preferenceTab="users" />

client/src/containers/Preferences/Users/UsersActions.js

@@ -3,7 +3,7 @@ import {
   Button,
   Intent,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 import Icon from 'components/Icon';
 import withDialogActions from 'containers/Dialog/withDialogActions';

client/src/containers/Preferences/Users/UsersList.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 
 import  {UsersListProvider } from './UsersProvider';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
@@ -15,11 +15,10 @@ function UsersListPreferences({
   // #withDashboardActions
   changePreferencesPageTitle,
 }) {
-  const { formatMessage } = useIntl();
 
   useEffect(() => {
-    changePreferencesPageTitle(formatMessage({ id: 'users' }));
-  }, [changePreferencesPageTitle, formatMessage]);
+    changePreferencesPageTitle(intl.get('users'));
+  }, [changePreferencesPageTitle]);
 
   return (
     <UsersListProvider>

client/src/containers/Preferences/Users/components.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import {
   Intent,
   Button,
@@ -27,27 +28,27 @@ export function ActionsMenu({
   row: { original },
   payload: { onEdit, onInactivate, onActivate, onDelete, onResendInvitation },
 }) {
-  const { formatMessage } = useIntl();
+  
 
   return (
     <Menu>
       <If condition={original.invite_accepted_at}>
         <MenuItem
           icon={<Icon icon="pen-18" />}
-          text={formatMessage({ id: 'edit_user' })}
+          text={intl.get('edit_user')}
           onClick={safeCallback(onEdit, original)}
         />
         <MenuDivider />
 
         {original.active ? (
           <MenuItem
-            text={formatMessage({ id: 'inactivate_user' })}
+            text={intl.get('inactivate_user')}
             onClick={safeCallback(onInactivate, original)}
             icon={<Icon icon="pause-16" iconSize={16} />}
           />
         ) : (
           <MenuItem
-            text={formatMessage({ id: 'activate_user' })}
+            text={intl.get('activate_user')}
             onClick={safeCallback(onActivate, original)}
             icon={<Icon icon="play-16" iconSize={16} />}
           />
@@ -64,7 +65,7 @@ export function ActionsMenu({
 
       <MenuItem
         icon={<Icon icon="trash-16" iconSize={16} />}
-        text={formatMessage({ id: 'delete_user' })}
+        text={intl.get('delete_user')}
         onClick={safeCallback(onDelete, original)}
         intent={Intent.DANGER}
       />
@@ -110,7 +111,7 @@ function FullNameAccessor(user) {
 }
 
 export const useUsersListColumns = () => {
-  const { formatMessage } = useIntl();
+  
 
   return React.useMemo(
     () => [
@@ -122,19 +123,19 @@ export const useUsersListColumns = () => {
       },
       {
         id: 'full_name',
-        Header: formatMessage({ id: 'full_name' }),
+        Header: intl.get('full_name'),
         accessor: FullNameAccessor,
         width: 150,
       },
       {
         id: 'email',
-        Header: formatMessage({ id: 'email' }),
+        Header: intl.get('email'),
         accessor: 'email',
         width: 150,
       },
       {
         id: 'phone_number',
-        Header: formatMessage({ id: 'phone_number' }),
+        Header: intl.get('phone_number'),
         accessor: 'phone_number',
         width: 120,
       },
@@ -154,6 +155,6 @@ export const useUsersListColumns = () => {
         disableResizing: true,
       },
     ],
-    [formatMessage],
+    [],
   );
 };