asantarissy · October 28, 2018 22:00 · Oct 28, 2018
diff --git a/gistfile1.txt b/gistfile1.txt
@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import { IntlProvider, addLocaleData } from 'react-intl';
+import en from 'react-intl/locale-data/en'; // add local data for messages like format date,time based on the local format
+import ar from 'react-intl/locale-data/ar';
+import axios from 'axios'; // to load messages based on the lang from server
+
+addLocaleData(en);
+addLocaleData(ar);
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      messages: null,
+      isLoading: false,
+    };
+    this.loadLocale = this.loadLocale.bind(this);
+  }
+
+  async componentWillMount() {
+    const lang = getUserLocal(); // to get your lang from cookies,server,static for test just pass en or ar
+    this.loadLocale(lang)
+      .then((res) => {
+        this.setState({ messages: res.data });
+        this.setState({ isLoading: false });
+      })
+      .catch(error => null);
+  }
+
+  loadLocale(lang) {
+    return axios.get(`${yourbasesererlocaldatafolder + lang}.json`);
+  }
+
+  render() {
+    const lang = getUserLocal();
+    const { messages, isLoading } = this.state;
+    if (isLoading) return <LoadingComponent pastDelay="10" />; // any loading component you have
+
+    return (
+      <IntlProvider
+        locale={lang === 'ar' ? `${lang}-jo` : lang}
+        messages={messages}
+      >
+        //your app main routs...
+      </IntlProvider>
+    );
+  }
+}
+
+export default App;