Convert app component into TypeScript
Seto Elkahfi committed
Jan 26, 2020 at 23:52 UTC
9776ac4f34580b78fc61eea8b4bcc7fd03bb8932
1 file changed
+57
-37
src/components/App.tsx
+57
-37
@@ -1,4 +1,4 @@
1
-import React from 'react';
1
+import React, { Component } from 'react';
2
import Header from './Header';
3
import Main from './Main';
4
import FooterLinks from './FooterLinks';
@@ -17,45 +17,65 @@ 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
-};
20
+type AppProps = {
21
+ firebase: Firebase | null
22
+}
23
24
+type AppState = {
25
+ contentMain: string,
26
+ contentSkills: string,
27
+ updatedAt: string
28
+}
29
29
-var language = "en";
30
-const tld = window.location.hostname.split('.').pop();
30
+class App extends Component {
31
32
-if (tld === "id") {
33
- language = "id";
34
-} else if (tld === "se") {
35
- language = "se";
36
-}
32
+ messages: {
33
+ [key: string]: object,
34
+ } = {
35
+ "se": messages_se,
36
+ "id": messages_id,
37
+ "en": messages_en
38
+ };
39
+
40
+ language = "en";
41
+
42
+ mainStyle: CSSProperties = {
43
+ position: 'absolute',
44
+ top: 50,
45
+ left: 50,
46
+ background: 'rgba(0,0,0,0.65)',
47
+ width: 300,
48
+ textAlign: 'left',
49
+ padding: 10
50
+ };
51
38
-const mainStyle: CSSProperties = {
39
- position: 'absolute',
40
- top: 50,
41
- left: 50,
42
- background: 'rgba(0,0,0,0.65)',
43
- width: 300,
44
- textAlign: 'left',
45
- padding: 10
46
-};
47
-
48
-const App = () =>
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>;
52
+ constructor(props: AppProps) {
53
+ super(props)
54
+
55
+ const tld = window.location.hostname.split('.').pop();
56
+
57
+ if (tld === "id") {
58
+ this.language = "id";
59
+ } else if (tld === "se") {
60
+ this.language = "se";
61
+ }
62
+ }
63
+
64
+ render() {
65
+ return (
66
+ <IntlProvider locale={this.language} messages={this.messages[this.language]}>
67
+ <BrowserRouter>
68
+ <FirebaseContext.Provider value={new Firebase(this.language)}>
69
+ <div style={this.mainStyle}>
70
+ <Header />
71
+ <Main />
72
+ <FooterLinks />
73
+ </div>
74
+ </FirebaseContext.Provider>
75
+ </BrowserRouter>
76
+ </IntlProvider>
77
+ )
78
+ }
79
+}
80
81
export default App;