|
1
|
import React, { Component } from 'react'; |
|
2
|
import { FormattedMessage } from 'react-intl'; |
|
3
|
import Firebase from './Firebase'; |
|
4
|
import app from 'firebase/app'; |
|
5
|
import { InitialData, Path } from '../shared/routes'; |
|
6
|
|
|
7
|
type AboutProps = { |
|
8
|
firebase?: Firebase |
|
9
|
initialData?: InitialData |
|
10
|
} |
|
11
|
|
|
12
|
type AboutState = { |
|
13
|
contentMain: string, |
|
14
|
contentSkills: string, |
|
15
|
updatedAt: string |
|
16
|
} |
|
17
|
|
|
18
|
class About extends Component<AboutProps, AboutState> { |
|
19
|
|
|
20
|
aboutRef: app.database.Reference | undefined; |
|
21
|
|
|
22
|
constructor(props: AboutProps) { |
|
23
|
super(props); |
|
24
|
this.aboutRef = this.props.firebase?.aboutRef(); |
|
25
|
if (this.props.initialData?.path === Path.ABOUT) { |
|
26
|
console.log('SERVER#ABOUT', this.props.initialData); |
|
27
|
this.state = { |
|
28
|
contentMain: this.props.initialData.data['contentMain'], |
|
29
|
contentSkills: this.props.initialData.data['contentSkills'], |
|
30
|
updatedAt: this.props.initialData.data['updatedAt'] |
|
31
|
} |
|
32
|
} else { |
|
33
|
console.log('CLIENT#ABOUT'); |
|
34
|
this.state = { |
|
35
|
contentMain: "Loading ...", |
|
36
|
contentSkills: "Loading ...", |
|
37
|
updatedAt: "Loading ..." |
|
38
|
} |
|
39
|
} |
|
40
|
} |
|
41
|
|
|
42
|
componentDidMount() { |
|
43
|
if (this.props.initialData?.path === Path.ABOUT) |
|
44
|
return; |
|
45
|
|
|
46
|
this.aboutRef?.on('value', (snapshot) => { |
|
47
|
let items = snapshot?.val(); |
|
48
|
this.setState({ |
|
49
|
contentMain: items.contentMain, |
|
50
|
contentSkills: items.contentSkills, |
|
51
|
updatedAt: items.updatedAt |
|
52
|
}); |
|
53
|
}); |
|
54
|
} |
|
55
|
|
|
56
|
componentWillUnmount() { |
|
57
|
this.aboutRef?.off(); |
|
58
|
} |
|
59
|
|
|
60
|
render() { |
|
61
|
return ( |
|
62
|
<div> |
|
63
|
<h1> |
|
64
|
<FormattedMessage id="about.title" |
|
65
|
defaultMessage="About" |
|
66
|
description="About page title"/> |
|
67
|
</h1> |
|
68
|
<p style={{lineHeight: "150%"}}>{this.state.contentMain}</p> |
|
69
|
<h2 style={{marginTop: 8}}> |
|
70
|
<FormattedMessage id="about.skills" |
|
71
|
defaultMessage="Skills" |
|
72
|
description="About page skills"/> |
|
73
|
</h2> |
|
74
|
<p style={{lineHeight: "150%"}}>{this.state.contentSkills}</p> |
|
75
|
</div> |
|
76
|
); |
|
77
|
} |
|
78
|
} |
|
79
|
|
|
80
|
export default About; |