WIP: Arabic localization.|

client/src/containers/ItemsCategories/ItemCategoriesTable.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 
 import { useItemsCategoriesTableColumns, ActionMenuList } from './components';
 import DataTable from 'components/DataTable';
@@ -54,9 +54,7 @@ function ItemsCategoryTable({
       sticky={true}
       selectionColumn={true}
       TableLoadingRenderer={TableSkeletonRows}
-      noResults={formatMessage({
-        id: 'there_is_no_items_categories_in_table_yet',
-      })}
+      noResults={intl.get('there_is_no_items_categories_in_table_yet')}
       payload={{
         onDeleteCategory: handleDeleteCategory,
         onEditCategory: handleEditCategory,

client/src/containers/ItemsCategories/ItemsCategoryActionsBar.js

@@ -9,7 +9,7 @@ import {
   Position,
   PopoverInteractionKind,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';
 import { If, Icon } from 'components';
 

client/src/containers/ItemsCategories/components.js

@@ -8,7 +8,7 @@ import {
   MenuDivider,
   Intent,
 } from '@blueprintjs/core';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import { Icon } from 'components';
 import { safeCallback } from 'utils';
 
@@ -19,18 +19,18 @@ export function ActionMenuList({
   row: { original },
   payload: { onEditCategory, onDeleteCategory },
 }) {
-  const { formatMessage } = useIntl();
+  
 
   return (
     <Menu>
       <MenuItem
         icon={<Icon icon="pen-18" />}
-        text={formatMessage({ id: 'edit_category' })}
+        text={intl.get('edit_category')}
         onClick={safeCallback(onEditCategory, original)}
       />
       <MenuDivider />
       <MenuItem
-        text={formatMessage({ id: 'delete_category' })}
+        text={intl.get('delete_category')}
         intent={Intent.DANGER}
         onClick={safeCallback(onDeleteCategory, original)}
         icon={<Icon icon="trash-16" iconSize={16} />}
@@ -57,32 +57,32 @@ export function TableActionsCell(props) {
  * Retrieve the items categories table columns.
  */
 export function useItemsCategoriesTableColumns() {
-  const { formatMessage } = useIntl();
+  
 
   return React.useMemo(
     () => [
       {
         id: 'name',
-        Header: formatMessage({ id: 'category_name' }),
+        Header: intl.get('category_name'),
         accessor: 'name',
         width: 220,
       },
       
       {
         id: 'count',
-        Header: formatMessage({ id: 'count' }),
+        Header: intl.get('count'),
         accessor: 'count',
         className: 'count',
         width: 180,
       },
       {
         id: 'description',
-        Header: formatMessage({ id: 'description' }),
+        Header: intl.get('description'),
         accessor: 'description',
         className: 'description',
         width: 220,
       }
     ],
-    [formatMessage],
+    [],
   );
 }