done translation
Seto Elkahfi committed
Mar 6, 2019 at 20:20 UTC
4d5ca93d994076ca1eea3abfdb9fd389dc1d74ff
7 files changed
+147
-70
src/components/About.js
+46
-19
@@ -1,23 +1,50 @@
1
-import React from 'react';
1
+import React, { Component } from 'react';
2
import { FormattedMessage } from 'react-intl';
3
4
-const About = () => (
5
- <div>
6
- <h1>
7
- <FormattedMessage id="about.title"
8
- defaultMessage="About"
9
- description="About page title"/>
10
- </h1>
11
- <p style={{lineHeight: "150%"}}>iOS developer with experience in AR, web development (PHP, Rails, JavaScript), and Android development.</p>
12
- <h2 style={{marginTop: 8}}>
13
- <FormattedMessage id="about.skills"
14
- defaultMessage="Skills"
15
- description="About page skills"/>
16
- </h2>
17
- <p style={{lineHeight: "150%"}}>Objective-C, Swift (iOS, Vapor), Ruby (Ruby on Rails), PHP (CodeIgniter), JavaScript (ReactJS, jQuery), Java (Android)</p>
18
- <p style={{lineHeight: "150%"}}>MacOS, Linux, Windows</p>
19
- <p style={{lineHeight: "150%"}}>iMovie, Adobe Premiere Pro, Adobe Photoshop, Adobe Audition</p>
20
- </div>
21
-);
4
+class About extends Component {
5
+
6
+ constructor(props) {
7
+ super(props);
8
+ this.aboutRef = this.props.firebase.aboutRef();
9
+ this.state = {
10
+ contentMain: "Loading ...",
11
+ contentSkills: "Loading ...",
12
+ updatedAt: "Loading ..."
13
+ }
14
+ }
15
+ componentWillMount() {
16
+ this.aboutRef.on('value', (snapshot) => {
17
+ let items = snapshot.val();
18
+ this.setState({
19
+ contentMain: items.contentMain,
20
+ contentSkills: items.contentSkills,
21
+ updatedAt: items.updatedAt
22
+ });
23
+ });
24
+ }
25
+
26
+ componentWillUnmount() {
27
+ this.aboutRef.off();
28
+ }
29
+
30
+ render() {
31
+ return (
32
+ <div>
33
+ <h1>
34
+ <FormattedMessage id="about.title"
35
+ defaultMessage="About"
36
+ description="About page title"/>
37
+ </h1>
38
+ <p style={{lineHeight: "150%"}}>{this.state.contentMain}</p>
39
+ <h2 style={{marginTop: 8}}>
40
+ <FormattedMessage id="about.skills"
41
+ defaultMessage="Skills"
42
+ description="About page skills"/>
43
+ </h2>
44
+ <p style={{lineHeight: "150%"}}>{this.state.contentSkills}</p>
45
+ </div>
46
+ );
47
+ }
48
+}
49
50
export default About;
src/components/Contact.js
+37
-12
@@ -1,16 +1,41 @@
1
-import React from 'react';
1
+import React, { Component } from 'react';
2
import { FormattedMessage } from 'react-intl';
3
4
-const Contact = () => (
5
- <div>
6
- <h1>
7
- <FormattedMessage id="contact.title"
8
- defaultMessage="Contact"
9
- description="Contact page title"/>
10
- </h1>
11
- <p style={{lineHeight: "150%"}}>Contact me via email: setoelkahfi[at]gmail[dot]com.</p>
12
- <p style={{lineHeight: "150%"}}>or reach me directly via my social channel.</p>
13
- </div>
14
-);
4
+class Contact extends Component {
5
+
6
+ constructor(props) {
7
+ super(props);
8
+ this.contactRef = this.props.firebase.contactRef();
9
+ this.state = {
10
+ content: "Loading ..."
11
+ }
12
+ }
13
+ componentWillMount() {
14
+ this.contactRef.on('value', (snapshot) => {
15
+ let items = snapshot.val();
16
+ this.setState({
17
+ content: items.content
18
+ });
19
+ });
20
+ }
21
+
22
+ componentWillUnmount() {
23
+ this.contactRef.off();
24
+ }
25
+
26
+
27
+ render() {
28
+ return (
29
+ <div>
30
+ <h1>
31
+ <FormattedMessage id="contact.title"
32
+ defaultMessage="Contact"
33
+ description="Contact page title"/>
34
+ </h1>
35
+ <p style={{lineHeight: "150%"}}>{this.state.content}</p>
36
+ </div>
37
+ );
38
+ }
39
+}
40
41
export default Contact;
src/components/Cv.js
+35
-29
@@ -1,34 +1,40 @@
1
-import React from 'react';
1
+import React, { Component } from 'react';
2
import { FormattedMessage } from 'react-intl';
3
4
-const linkStyle = {
5
- display: 'inline-block',
6
- margin: 4,
7
- fontSize: '10pt',
8
- textDecoration: 'none',
9
- outline: 'none',
10
- color: '#fff',
11
- background: '#222',
12
- borderTop: '1px solid #333',
13
- padding: '5px 8px',
14
- MozBorderRadius: '3px',
15
- WebkitBorderRadius: '3px',
16
- borderRadius: '3px',
17
- MozBoxShadow: '0px 1px 1px #000',
18
- WebkitBoxShadow: '0px 1px 1px #000',
19
- boxShadow: '0px 1px 1px #000'
20
-};
4
+class Cv extends Component {
5
+
6
+ constructor(props) {
7
+ super(props);
8
+ this.cvRef = this.props.firebase.cvRef();
9
+ this.state = {
10
+ content: "Loading ..."
11
+ }
12
+ }
13
+ componentWillMount() {
14
+ this.cvRef.on('value', (snapshot) => {
15
+ let items = snapshot.val();
16
+ this.setState({
17
+ content: items.content
18
+ });
19
+ });
20
+ }
21
+
22
+ componentWillUnmount() {
23
+ this.cvRef.off();
24
+ }
25
22
-const Cv = () => (
23
- <div>
24
- <h1>
25
- <FormattedMessage id="cv.title"
26
- defaultMessage="CV"
27
- description="CV page title"/>
28
- </h1>
29
- <p style={{lineHeight: "150%"}}><a style={linkStyle} href="https://docs.google.com/document/d/1O2NgIv8DIJIlH6H6Py71qQSi8T6Y9YNfa8TaTlUdywc/edit?usp=sharing" alt="Latest CV" target="_blank" rel="noopener noreferrer" >latest</a></p>
30
- <p style={{lineHeight: "150%"}}>or just visit my LinkedIn profile</p>
31
- </div>
32
-);
26
+ render() {
27
+ return (
28
+ <div>
29
+ <h1>
30
+ <FormattedMessage id="cv.title"
31
+ defaultMessage="CV"
32
+ description="CV page title"/>
33
+ </h1>
34
+ <p style={{lineHeight: "150%"}}>{this.state.content}</p>
35
+ </div>
36
+ );
37
+ }
38
+}
39
40
export default Cv;
src/components/FooterLinks.js
+1
-1
@@ -32,7 +32,7 @@ const FooterLinks = () => (
32
<a style={linkStyle} href="https://id.linkedin.com/in/setoelkahfi" alt="LinkedIn" target="_blank" rel="noopener noreferrer">linkedin</a>
33
<a style={linkStyle} href="https://stackoverflow.com/users/1137814/seto" alt="StackOverflow" target="_blank" rel="noopener noreferrer">stackoverflow</a>
34
<a style={linkStyle} href="https://www.quora.com/profile/Seto-Elkahfi" alt="Quora" target="_blank" rel="noopener noreferrer">quora</a>
35
- <a style={linkStyle} href="http://blog.setoelkahfi.web.id" alt="Blog" target="_blank" rel="noopener noreferrer">blog</a>
35
+ <a style={linkStyle} href="https://setoelkahfi.wordpress.com" alt="Blog" target="_blank" rel="noopener noreferrer">blog</a>
36
<a style={linkStyle} href="https://www.youtube.com/user/setoelkahfi?sub_confirmation=1" alt="YouTube" target="_blank" rel="noopener noreferrer">youtube</a>
37
<a style={linkStyle} href="https://fb.com/setoelkahfi" alt="Facebook" target="_blank" rel="noopener noreferrer">facebook</a>
38
<a style={linkStyle} href="https://www.instagram.com/setoelkahfi/" alt="Instagram" target="_blank" rel="noopener noreferrer">instagram</a>
src/components/Home.js
+7
-1
@@ -18,6 +18,12 @@ const wordStyle = {
18
boxShadow: '0px 1px 1px #000'
19
};
20
21
+const initialValues = {
22
+ "en": ["an Android developer", "an iOS developer"],
23
+ "id": ["pengembang aplikasi Android", "pengembang aplikasi iOS"],
24
+ "se": ["är Android-utvecklare", "är iOS-utvecklare"]
25
+};
26
+
27
class Home extends Component {
28
29
constructor(props) {
@@ -26,7 +32,7 @@ class Home extends Component {
32
this.state = {
33
pStyle: pStyle,
34
wordStyle: wordStyle,
29
- alterEgos: ["an Android developer", "an iOS developer"]
35
+ alterEgos: initialValues[this.props.firebase.language]
36
}
37
}
38
src/components/Main.js
+16
-3
@@ -24,9 +24,22 @@ const Main = () => (
24
{firebase => <Home firebase={firebase} />}
25
</FirebaseContext.Consumer>
26
</Route>
27
- <Route path='/about' component={About} />
28
- <Route path='/cv' component={Cv} />
29
- <Route path='/contact' component={Contact} />
27
+ <Route path='/about'>
28
+ <FirebaseContext.Consumer>
29
+ {firebase => <About firebase={firebase} />}
30
+ </FirebaseContext.Consumer>
31
+ </Route>
32
+ <Route path='/cv'>
33
+ <FirebaseContext.Consumer>
34
+ {firebase => <Cv firebase={firebase} />}
35
+ </FirebaseContext.Consumer>
36
+ </Route>
37
+
38
+ <Route path='/contact'>
39
+ <FirebaseContext.Consumer>
40
+ {firebase => <Contact firebase={firebase} />}
41
+ </FirebaseContext.Consumer>
42
+ </Route>
43
</Switch>
44
</main>
45
);
src/index.js
+5
-5
@@ -32,11 +32,11 @@ if (window.location.hostname === "id.setoelkahfi" || window.location.hostname ==
32
33
render((
34
<IntlProvider locale={language} messages={messages[language]}>
35
- <BrowserRouter>
36
- <FirebaseContext.Provider value={new Firebase(language)}>
37
- <App />
38
- </FirebaseContext.Provider>
39
- </BrowserRouter>
35
+ <BrowserRouter>
36
+ <FirebaseContext.Provider value={new Firebase(language)}>
37
+ <App />
38
+ </FirebaseContext.Provider>
39
+ </BrowserRouter>
40
</IntlProvider>
41
), document.getElementById('root'));
42