feat: Application intl context provider.

client/src/components/AppIntlLoader.js

@@ -4,6 +4,7 @@ import { setLocale } from 'yup';
 import intl from 'react-intl-universal';
 import { find } from 'lodash';
 import rtlDetect from 'rtl-detect';
+import { AppIntlProvider } from './AppIntlProvider';
 import DashboardLoadingIndicator from 'components/Dashboard/DashboardLoadingIndicator';
 
 const SUPPORTED_LOCALES = [
@@ -40,16 +41,14 @@ function loadYupLocales(currentLocale) {
 /**
  * Modifies the html document direction to RTl if it was rtl-language.
  */
-function useDocumentDirectionModifier(locale) {
+function useDocumentDirectionModifier(locale, isRTL) {
   React.useEffect(() => {
-    const isRTL = rtlDetect.isRtlLang(locale);
-
     if (isRTL) {
       const htmlDocument = document.querySelector('html');
       htmlDocument.setAttribute('dir', 'rtl');
       htmlDocument.setAttribute('lang', locale);
     }
-  }, []);
+  }, [isRTL, locale]);
 }
 
 /**
@@ -59,8 +58,10 @@ export default function AppIntlLoader({ children }) {
   const [isLoading, setIsLoading] = React.useState(true);
   const currentLocale = getCurrentLocal();
 
+  const isRTL = rtlDetect.isRtlLang(currentLocale);
+
   // Modifies the html document direction
-  useDocumentDirectionModifier(currentLocale);
+  useDocumentDirectionModifier(currentLocale, isRTL);
 
   React.useEffect(() => {
     // Lodas the locales data file.
@@ -88,8 +89,10 @@ export default function AppIntlLoader({ children }) {
   }, [currentLocale]);
 
   return (
+    <AppIntlProvider currentLocale={currentLocale} isRTL={isRTL}>
       <DashboardLoadingIndicator isLoading={isLoading}>
         {children}
       </DashboardLoadingIndicator>
+    </AppIntlProvider>
   );
 }

client/src/components/AppIntlProvider.js

@@ -0,0 +1,24 @@
+import React, { createContext } from 'react';
+
+const AppIntlContext = createContext();
+
+/**
+ * Application intl provider.
+ */
+function AppIntlProvider({ currentLocale, isRTL, children }) {
+  const provider = {
+    currentLocale,
+    isRTL,
+    isLTR: !isRTL,
+  };
+
+  return (
+    <AppIntlContext.Provider value={provider}>
+      {children}
+    </AppIntlContext.Provider>
+  );
+}
+
+const useAppIntlContext = () => React.useContext(AppIntlContext);
+
+export { AppIntlProvider, useAppIntlContext };

client/src/components/Datatable/TableCell.js

@@ -2,6 +2,7 @@ import React, { useContext } from 'react';
 import classNames from 'classnames';
 import { If } from 'components';
 import { Skeleton } from 'components';
+import { useAppIntlContext } from 'components/AppIntlProvider';
 import TableContext from './TableContext';
 import { isCellLoading } from './utils';
 
@@ -26,6 +27,9 @@ export default function TableCell({
   const isExpandColumn = expandToggleColumn === index;
   const { skeletonWidthMax = 100, skeletonWidthMin = 40 } = {};
 
+  // Application intl context.
+  const { isRTL } = useAppIntlContext();
+
   // Detarmines whether the current cell is loading.
   const cellLoading = isCellLoading(
     cellsLoading,
@@ -46,8 +50,6 @@ export default function TableCell({
     );
   }
 
-  const isRTL = true;
-
   return (
     <div
       {...cell.getCellProps({