|
1
|
|
|
import React, { useEffect } from 'react' |
|
2
|
|
|
import PropTypes from 'prop-types' |
|
3
|
|
|
import { withTranslation } from 'react-i18next' |
|
4
|
|
|
import { Helmet } from 'react-helmet' |
|
5
|
|
|
import { connect } from 'react-redux' |
|
6
|
|
|
import { |
|
7
|
|
|
createMuiTheme, |
|
8
|
|
|
ThemeProvider, |
|
9
|
|
|
makeStyles, |
|
10
|
|
|
} from '@material-ui/core/styles' |
|
11
|
|
|
import { blue } from '@material-ui/core/colors' |
|
12
|
|
|
import CircularProgress from '@material-ui/core/CircularProgress' |
|
13
|
|
|
import settings from 'Settings' |
|
14
|
|
|
import { changeLangAsync } from './actions' |
|
15
|
|
|
import './global_styles/global.scss' |
|
16
|
|
|
import ButtonMenu from './components/ButtonMenu' |
|
17
|
|
|
import CVPage from './components/CV' |
|
18
|
|
|
import ProjectListPage from './components/ProjectList' |
|
19
|
|
|
|
|
20
|
|
|
const blueTheme = createMuiTheme({ |
|
21
|
|
|
palette: { |
|
22
|
|
|
primary: { |
|
23
|
|
|
main: blue[500], |
|
24
|
|
|
}, |
|
25
|
|
|
}, |
|
26
|
|
|
typography: { |
|
27
|
|
|
fontFamily: [ |
|
28
|
|
|
'Roboto', |
|
29
|
|
|
'"PingFang SC"', |
|
30
|
|
|
'"Hiragino Sans GB"', |
|
31
|
|
|
'"Microsoft YaHei"', |
|
32
|
|
|
'"WenQuanYi Micro Hei"', |
|
33
|
|
|
'sans-serif', |
|
34
|
|
|
'"Apple Color Emoji"', |
|
35
|
|
|
'"Segoe UI Emoji"', |
|
36
|
|
|
'"Segoe UI Symbol"', |
|
37
|
|
|
].join(','), |
|
38
|
|
|
}, |
|
39
|
|
|
}) |
|
40
|
|
|
|
|
41
|
|
|
const useStyles = makeStyles({ |
|
42
|
|
|
circularProgressRoot: { |
|
43
|
|
|
position: 'absolute', |
|
44
|
|
|
top: 'calc(50% - 10px)', |
|
45
|
|
|
left: 'calc(50% - 10px)', |
|
46
|
|
|
}, |
|
47
|
|
|
}) |
|
48
|
|
|
|
|
49
|
|
|
const App = ({ currentLang, userName, dispatch, t }) => { |
|
50
|
|
|
const classes = useStyles() |
|
51
|
|
|
|
|
52
|
|
|
useEffect(() => { |
|
53
|
|
|
dispatch(changeLangAsync(settings.default_lang)) |
|
54
|
|
|
}, []) |
|
55
|
|
|
|
|
56
|
|
|
return ( |
|
57
|
|
|
<ThemeProvider theme={blueTheme}> |
|
58
|
|
|
{!settings.generate_backend_pdf_template && <ButtonMenu />} |
|
59
|
|
|
{userName ? ( |
|
60
|
|
|
<> |
|
61
|
|
|
<CVPage /> |
|
62
|
|
|
<ProjectListPage /> |
|
63
|
|
|
<Helmet> |
|
64
|
|
|
<html lang={currentLang} /> |
|
65
|
|
|
<title>{t('Curriculum vitae of {{userName}}', { userName })}</title> |
|
66
|
|
|
<meta |
|
67
|
|
|
name="description" |
|
68
|
|
|
content={t('Curriculum vitae of {{userName}}', { userName })} |
|
69
|
|
|
/> |
|
70
|
|
|
</Helmet> |
|
71
|
|
|
</> |
|
72
|
|
|
) : ( |
|
73
|
|
|
<CircularProgress classes={{ root: classes.circularProgressRoot }} /> |
|
74
|
|
|
)} |
|
75
|
|
|
</ThemeProvider> |
|
76
|
|
|
) |
|
77
|
|
|
} |
|
78
|
|
|
|
|
79
|
|
|
App.propTypes = { |
|
80
|
|
|
currentLang: PropTypes.string, |
|
81
|
|
|
userName: PropTypes.string, |
|
82
|
|
|
dispatch: PropTypes.func.isRequired, |
|
83
|
|
|
t: PropTypes.func.isRequired, |
|
84
|
|
|
} |
|
85
|
|
|
|
|
86
|
|
|
const mapStateToProps = (state) => ({ |
|
87
|
|
|
currentLang: state.lang, |
|
88
|
|
|
userName: state.userData.name, |
|
89
|
|
|
}) |
|
90
|
|
|
|
|
91
|
|
|
export default connect(mapStateToProps)(withTranslation()(App)) |
|
92
|
|
|
|
tomchen /
react-printable-cv
