Simplify index.tsx file
Move the logic to detect locale to App component so that it can be test thoroughly
Seto Elkahfi committed
Jan 26, 2020 at 03:20 UTC
f2613ea8d650ae31f08d5a2248821412bd5f061a
6 files changed
+45
-53
src/components/App.tsx
+43
-6
@@ -4,7 +4,38 @@ import Main from './Main';
4
import FooterLinks from './FooterLinks';
5
import { CSSProperties } from 'react';
6
7
-const mainStyle: CSSProperties = {
7
+import { BrowserRouter } from 'react-router-dom';
8
+import Firebase, { FirebaseContext } from './Firebase';
9
+import { IntlProvider } from 'react-intl';
10
+import { addLocaleData } from "react-intl";
11
+import locale_en from 'react-intl/locale-data/en';
12
+import locale_se from 'react-intl/locale-data/se';
13
+import locale_id from 'react-intl/locale-data/id';
14
+import messages_se from "./translations/se.json";
15
+import messages_id from "./translations/id.json";
16
+import messages_en from "./translations/en.json";
17
+
18
+addLocaleData([...locale_en, ...locale_id, ...locale_se]);
19
+
20
+const messages: {
21
+ [key: string]: object,
22
+} = {
23
+ "se": messages_se,
24
+ "id": messages_id,
25
+ "en": messages_en
26
+};
27
+
28
+
29
+var language = "en";
30
+const tld = window.location.hostname.split('.').pop();
31
+
32
+if (tld === "id") {
33
+ language = "id";
34
+} else if (tld === "se") {
35
+ language = "se";
36
+}
37
+
38
+const mainStyle: CSSProperties = {
39
position: 'absolute',
40
top: 50,
41
left: 50,
@@ -15,10 +46,16 @@ const mainStyle: CSSProperties = {
46
};
47
48
const App = () =>
18
- <div style={mainStyle}>
19
- <Header />
20
- <Main />
21
- <FooterLinks />
22
- </div>;
49
+ <IntlProvider locale={language} messages={messages[language]}>
50
+ <BrowserRouter>
51
+ <FirebaseContext.Provider value={new Firebase(language)}>
52
+ <div style={mainStyle}>
53
+ <Header />
54
+ <Main />
55
+ <FooterLinks />
56
+ </div>
57
+ </FirebaseContext.Provider>
58
+ </BrowserRouter>
59
+ </IntlProvider>;
60
61
export default App;
src/components/__tests__/App.test.tsx
+1
-8
@@ -1,16 +1,9 @@
1
import React from 'react';
2
import ReactDOM from 'react-dom';
3
-import { BrowserRouter } from "react-router-dom";
4
-import { IntlProvider } from 'react-intl';
3
import App from '../App';
4
5
it('renders without crashing', () => {
6
const div = document.createElement('div');
9
- ReactDOM.render(
10
- <IntlProvider locale="en">
11
- <BrowserRouter>
12
- <App />
13
- </BrowserRouter>
14
- </IntlProvider>, div);
7
+ ReactDOM.render(<App />, div);
8
ReactDOM.unmountComponentAtNode(div);
9
});
src/components/translations/en.json
renamed
src/components/translations/id.json
renamed
src/components/translations/se.json
renamed
src/index.tsx
+1
-39
@@ -2,46 +2,8 @@ import React from 'react';
2
import { render } from 'react-dom';
3
import App from './components/App';
4
import * as serviceWorker from './serviceWorker';
5
-import { BrowserRouter } from 'react-router-dom';
6
-import Firebase, { FirebaseContext } from './components/Firebase';
7
-import { IntlProvider } from 'react-intl';
8
-import { addLocaleData } from "react-intl";
9
-import locale_en from 'react-intl/locale-data/en';
10
-import locale_se from 'react-intl/locale-data/se';
11
-import locale_id from 'react-intl/locale-data/id';
12
-import messages_se from "./translations/se.json";
13
-import messages_id from "./translations/id.json";
14
-import messages_en from "./translations/en.json";
5
16
-addLocaleData([...locale_en, ...locale_id, ...locale_se]);
17
-
18
-const messages: {
19
- [key: string]: object,
20
- } = {
21
- "se": messages_se,
22
- "id": messages_id,
23
- "en": messages_en
24
-};
25
-
26
-
27
-var language = "en";
28
-const tld = window.location.hostname.split('.').pop();
29
-
30
-if (tld === "id") {
31
- language = "id";
32
-} else if (tld === "se") {
33
- language = "se";
34
-}
35
-
36
-render((
37
- <IntlProvider locale={language} messages={messages[language]}>
38
- <BrowserRouter>
39
- <FirebaseContext.Provider value={new Firebase(language)}>
40
- <App />
41
- </FirebaseContext.Provider>
42
- </BrowserRouter>
43
- </IntlProvider>
44
-), document.getElementById('root'));
6
+render(<App />, document.getElementById('root'));
7
8
// If you want your app to work offline and load faster, you can change
9
// unregister() to register() below. Note this comes with some pitfalls.