diff options
Diffstat (limited to 'src/containers/auth/AuthReleaseNotesScreen.tsx')
-rw-r--r-- | src/containers/auth/AuthReleaseNotesScreen.tsx | 107 |
1 files changed, 107 insertions, 0 deletions
diff --git a/src/containers/auth/AuthReleaseNotesScreen.tsx b/src/containers/auth/AuthReleaseNotesScreen.tsx new file mode 100644 index 000000000..c717529fa --- /dev/null +++ b/src/containers/auth/AuthReleaseNotesScreen.tsx | |||
@@ -0,0 +1,107 @@ | |||
1 | import { Component } from 'react'; | ||
2 | import { inject, observer } from 'mobx-react'; | ||
3 | |||
4 | import { defineMessages, injectIntl } from 'react-intl'; | ||
5 | import Markdown from 'markdown-to-jsx'; | ||
6 | import { mdiArrowLeftCircle } from '@mdi/js'; | ||
7 | import { openExternalUrl } from '../../helpers/url-helpers'; | ||
8 | import Icon from '../../components/ui/icon'; | ||
9 | import { ferdiumVersion } from '../../environment-remote'; | ||
10 | import { | ||
11 | getFerdiumVersion, | ||
12 | getUpdateInfoFromGH, | ||
13 | } from '../../helpers/update-helpers'; | ||
14 | |||
15 | const messages = defineMessages({ | ||
16 | headline: { | ||
17 | id: 'settings.releasenotes.headline', | ||
18 | defaultMessage: 'Release Notes', | ||
19 | }, | ||
20 | }); | ||
21 | |||
22 | interface IProps { | ||
23 | intl: any; | ||
24 | } | ||
25 | |||
26 | class AuthReleaseNotesScreen extends Component<IProps> { | ||
27 | state = { | ||
28 | data: '', | ||
29 | }; | ||
30 | |||
31 | constructor(props) { | ||
32 | super(props); | ||
33 | |||
34 | this.state = { data: '' }; | ||
35 | } | ||
36 | |||
37 | async componentDidMount() { | ||
38 | const { intl } = this.props; | ||
39 | |||
40 | const data = await getUpdateInfoFromGH( | ||
41 | window.location.href, | ||
42 | ferdiumVersion, | ||
43 | intl, | ||
44 | ); | ||
45 | |||
46 | this.setState({ | ||
47 | data, | ||
48 | }); | ||
49 | |||
50 | for (const link of document.querySelectorAll('.releasenotes__body a')) { | ||
51 | link.addEventListener('click', this.handleClick.bind(this), false); | ||
52 | } | ||
53 | } | ||
54 | |||
55 | handleClick(e) { | ||
56 | e.preventDefault(); | ||
57 | openExternalUrl(e.target.href); | ||
58 | } | ||
59 | |||
60 | componentWillUnmount() { | ||
61 | document.removeEventListener( | ||
62 | 'click', | ||
63 | // eslint-disable-next-line unicorn/no-invalid-remove-event-listener | ||
64 | this.handleClick.bind(this), | ||
65 | false, | ||
66 | ); | ||
67 | } | ||
68 | |||
69 | render() { | ||
70 | const { intl } = this.props; | ||
71 | |||
72 | const { data } = this.state; | ||
73 | return ( | ||
74 | <div className="auth__container auth__container--releasenotes"> | ||
75 | <div className="auth__main--releasenotes"> | ||
76 | <div className="auth__header"> | ||
77 | <span className="auth__header-item"> | ||
78 | Ferdium {getFerdiumVersion(window.location.href, ferdiumVersion)}{' '} | ||
79 | {' | '} | ||
80 | </span> | ||
81 | <span className="auth__header-item__secondary"> | ||
82 | {intl.formatMessage(messages.headline)} | ||
83 | </span> | ||
84 | </div> | ||
85 | <div className="auth__body releasenotes__body"> | ||
86 | <Markdown options={{ wrapper: 'article' }}>{data}</Markdown> | ||
87 | </div> | ||
88 | <div className="auth__help"> | ||
89 | <button | ||
90 | type="button" | ||
91 | onClick={() => { | ||
92 | // For some reason <Link> doesn't work here. So we hard code the path to take us to the Welcome Screen | ||
93 | window.location.href = '#/auth/welcome'; | ||
94 | }} | ||
95 | > | ||
96 | <Icon icon={mdiArrowLeftCircle} size={1.5} /> | ||
97 | </button> | ||
98 | </div> | ||
99 | </div> | ||
100 | </div> | ||
101 | ); | ||
102 | } | ||
103 | } | ||
104 | |||
105 | export default injectIntl<'intl', IProps>( | ||
106 | inject('stores', 'actions')(observer(AuthReleaseNotesScreen)), | ||
107 | ); | ||