i18n: Added missing state handling for RTL languages (#6275)

* Add RTL Support

* Add Arabic to supportedLanguages

* Fixed lint errors

* Allowed RTL flow for Hebrew

Co-authored-by: Sana <sana.benhassouna@ensi-uma.tn>

ui/component/app/view.jsx

@@ -16,6 +16,7 @@ import usePrevious from 'effects/use-previous';
 import REWARDS from 'rewards';
 import usePersistedState from 'effects/use-persisted-state';
 import Spinner from 'component/spinner';
+import LANGUAGES from 'constants/languages';
 // @if TARGET='app'
 import useZoom from 'effects/use-zoom';
 import useHistoryNav from 'effects/use-history-nav';
@@ -278,6 +279,10 @@ function App(props: Props) {
   useEffect(() => {
     if (!languages.includes(language)) {
       setLanguage(language);
+
+      if (document && document.documentElement && LANGUAGES[language].length >= 3) {
+        document.documentElement.dir = LANGUAGES[language][2];
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [language, languages]);

ui/component/settingLanguage/view.jsx

@@ -4,6 +4,7 @@ import React, { useState } from 'react';
 import { FormField } from 'component/common/form';
 import Spinner from 'component/spinner';
 import SUPPORTED_LANGUAGES from 'constants/supported_languages';
+import LANGUAGES from 'constants/languages';
 import { getDefaultLanguage, sortLanguageMap } from 'util/default-languages';
 
 type Props = {
@@ -25,6 +26,13 @@ function SettingLanguage(props: Props) {
     const { value } = e.target;
     setPreviousLanguage(language || getDefaultLanguage());
     setLanguage(value);
+    if (document && document.documentElement) {
+      if (LANGUAGES[value].length >= 3) {
+        document.documentElement.dir = LANGUAGES[value][2];
+      } else {
+        document.documentElement.dir = 'ltr';
+      }
+    }
   }
 
   return (

ui/constants/languages.js

@@ -5,7 +5,7 @@ const LANGUAGES = {
   ak: ['Akan', 'Akana'],
   am: ['Amharic', 'አማርኛ'],
   an: ['Aragonese', 'Aragonés'],
-  ar: ['Arabic', 'العربية'],
+  ar: ['Arabic', 'العربية', 'rtl'],
   as: ['Assamese', 'অসমীয়া'],
   av: ['Avar', 'Авар'],
   ay: ['Aymara', 'Aymar'],
@@ -40,7 +40,7 @@ const LANGUAGES = {
   es: ['Spanish', 'Español'],
   et: ['Estonian', 'Eesti'],
   eu: ['Basque', 'Euskara'],
-  fa: ['Persian', 'فارسی'],
+  fa: ['Persian', 'فارسی', 'rtl'],
   ff: ['Peul', 'Fulfulde'],
   fi: ['Finnish', 'Suomi'],
   fil: ['Filipino', 'Filipino'],
@@ -55,7 +55,7 @@ const LANGUAGES = {
   gu: ['Gujarati', 'ગુજરાતી'],
   gv: ['Manx', 'Gaelg'],
   ha: ['Hausa', 'هَوُسَ'],
-  he: ['Hebrew', 'עברית'],
+  he: ['Hebrew', 'עברית', 'rtl'],
   hi: ['Hindi', 'हिन्दी'],
   ho: ['Hiri Motu', 'Hiri Motu'],
   hr: ['Croatian', 'Hrvatski'],
@@ -171,7 +171,7 @@ const LANGUAGES = {
   ty: ['Tahitian', 'Reo Mā`ohi'],
   ug: ['Uyghur', 'Uyƣurqə / ئۇيغۇرچە'],
   uk: ['Ukrainian', 'Українська'],
-  ur: ['Urdu', 'اردو'],
+  ur: ['Urdu', 'اردو', 'rtl'],
   uz: ['Uzbek', 'Ўзбек'],
   ve: ['Venda', 'Tshivenḓa'],
   vi: ['Vietnamese', 'Tiếng Việt'],

ui/constants/supported_languages.js

@@ -40,6 +40,7 @@ const SUPPORTED_LANGUAGES = {
   kn: LANGUAGES.kn[1],
   uk: LANGUAGES.uk[1],
   vi: LANGUAGES.vi[1],
+  ar: LANGUAGES.ar[1],
 };
 
 // Properties: language code (e.g. 'ja')