diff options
author | André Oliveira <37463445+SpecialAro@users.noreply.github.com> | 2022-07-19 12:52:31 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-07-19 12:52:31 +0100 |
commit | 3bb1ca7825a0381ddd8dbe7f44f7dcf4a788b165 (patch) | |
tree | 6b414b9ef3be7656da1717b0d6def62e95d1fb90 /src/components/settings/releaseNotes | |
parent | fix: remove autoHibernate (diff) | |
download | ferdium-app-3bb1ca7825a0381ddd8dbe7f44f7dcf4a788b165.tar.gz ferdium-app-3bb1ca7825a0381ddd8dbe7f44f7dcf4a788b165.tar.zst ferdium-app-3bb1ca7825a0381ddd8dbe7f44f7dcf4a788b165.zip |
Feature: Add Release Notes (#491)
Co-authored-by: Vijay A <vraravam@users.noreply.github.com>
Co-authored-by: Ricardo Cino <ricardo@cino.io>
Diffstat (limited to 'src/components/settings/releaseNotes')
-rw-r--r-- | src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx | 99 | ||||
-rw-r--r-- | src/components/settings/releaseNotes/ReleaseNotesLayout.tsx | 79 |
2 files changed, 178 insertions, 0 deletions
diff --git a/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx b/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx new file mode 100644 index 000000000..d0be82312 --- /dev/null +++ b/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx | |||
@@ -0,0 +1,99 @@ | |||
1 | import { Component } from 'react'; | ||
2 | import { observer } from 'mobx-react'; | ||
3 | import { defineMessages, injectIntl } from 'react-intl'; | ||
4 | import Markdown from 'markdown-to-jsx'; | ||
5 | import { openExternalUrl } from '../../../helpers/url-helpers'; | ||
6 | import { ferdiumVersion } from '../../../environment-remote'; | ||
7 | import { | ||
8 | getFerdiumVersion, | ||
9 | getUpdateInfoFromGH, | ||
10 | } from '../../../helpers/update-helpers'; | ||
11 | |||
12 | const messages = defineMessages({ | ||
13 | headline: { | ||
14 | id: 'settings.releasenotes.headline', | ||
15 | defaultMessage: 'Release Notes', | ||
16 | }, | ||
17 | connectionError: { | ||
18 | id: 'settings.releasenotes.connectionError', | ||
19 | defaultMessage: | ||
20 | 'An error occured when connecting to Github, please try again later.', | ||
21 | }, | ||
22 | connectionErrorPageMissing: { | ||
23 | id: 'settings.releasenotes.connectionErrorPageMissing', | ||
24 | defaultMessage: | ||
25 | 'An error occured when connecting to Github, the page you are looking for is missing.', | ||
26 | }, | ||
27 | }); | ||
28 | |||
29 | interface IProps { | ||
30 | intl: any; | ||
31 | } | ||
32 | |||
33 | class ReleaseNotesDashboard extends Component<IProps> { | ||
34 | state = { | ||
35 | data: '', | ||
36 | }; | ||
37 | |||
38 | constructor(props) { | ||
39 | super(props); | ||
40 | |||
41 | this.state = { data: '' }; | ||
42 | } | ||
43 | |||
44 | async componentDidMount() { | ||
45 | const { intl } = this.props; | ||
46 | |||
47 | const data = await getUpdateInfoFromGH( | ||
48 | window.location.href, | ||
49 | ferdiumVersion, | ||
50 | intl, | ||
51 | ); | ||
52 | |||
53 | this.setState({ | ||
54 | data, | ||
55 | }); | ||
56 | |||
57 | for (const link of document.querySelectorAll('.releasenotes__body a')) { | ||
58 | link.addEventListener('click', this.handleClick.bind(this), false); | ||
59 | } | ||
60 | } | ||
61 | |||
62 | handleClick(e) { | ||
63 | e.preventDefault(); | ||
64 | openExternalUrl(e.target.href); | ||
65 | } | ||
66 | |||
67 | componentWillUnmount() { | ||
68 | document.removeEventListener( | ||
69 | 'click', | ||
70 | // eslint-disable-next-line unicorn/no-invalid-remove-event-listener | ||
71 | this.handleClick.bind(this), | ||
72 | false, | ||
73 | ); | ||
74 | } | ||
75 | |||
76 | render() { | ||
77 | const { intl } = this.props; | ||
78 | |||
79 | const { data } = this.state; | ||
80 | return ( | ||
81 | <div className="settings__main"> | ||
82 | <div className="settings__header"> | ||
83 | <span className="settings__header-item"> | ||
84 | Ferdium {getFerdiumVersion(window.location.href, ferdiumVersion)}{' '} | ||
85 | {' | '} | ||
86 | </span> | ||
87 | <span className="settings__header-item__secondary"> | ||
88 | {intl.formatMessage(messages.headline)} | ||
89 | </span> | ||
90 | </div> | ||
91 | <div className="settings__body releasenotes__body"> | ||
92 | <Markdown options={{ wrapper: 'article' }}>{data}</Markdown> | ||
93 | </div> | ||
94 | </div> | ||
95 | ); | ||
96 | } | ||
97 | } | ||
98 | |||
99 | export default injectIntl(observer(ReleaseNotesDashboard)); | ||
diff --git a/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx b/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx new file mode 100644 index 000000000..ee0ba75a8 --- /dev/null +++ b/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx | |||
@@ -0,0 +1,79 @@ | |||
1 | import { Component } from 'react'; | ||
2 | import { inject, observer } from 'mobx-react'; | ||
3 | import { defineMessages, injectIntl } from 'react-intl'; | ||
4 | |||
5 | import { mdiClose } from '@mdi/js'; | ||
6 | import { Outlet } from 'react-router-dom'; | ||
7 | import { StoresProps } from '../../../@types/ferdium-components.types'; | ||
8 | import ErrorBoundary from '../../util/ErrorBoundary'; | ||
9 | import Appear from '../../ui/effects/Appear'; | ||
10 | import Icon from '../../ui/icon'; | ||
11 | import { isEscKeyPress } from '../../../jsUtils'; | ||
12 | |||
13 | const messages = defineMessages({ | ||
14 | closeSettings: { | ||
15 | id: 'settings.app.closeSettings', | ||
16 | defaultMessage: 'Close settings', | ||
17 | }, | ||
18 | }); | ||
19 | |||
20 | interface IProps extends StoresProps { | ||
21 | intl: any; | ||
22 | } | ||
23 | |||
24 | class ReleaseNotesLayout extends Component<IProps> { | ||
25 | componentDidMount() { | ||
26 | document.addEventListener('keydown', this.handleKeyDown.bind(this), false); | ||
27 | } | ||
28 | |||
29 | componentWillUnmount() { | ||
30 | document.removeEventListener( | ||
31 | 'keydown', | ||
32 | // eslint-disable-next-line unicorn/no-invalid-remove-event-listener | ||
33 | this.handleKeyDown.bind(this), | ||
34 | false, | ||
35 | ); | ||
36 | } | ||
37 | |||
38 | handleKeyDown(e) { | ||
39 | if (isEscKeyPress(e.keyCode)) { | ||
40 | this.props.actions.ui.closeSettings(); | ||
41 | } | ||
42 | } | ||
43 | |||
44 | render() { | ||
45 | const { closeSettings } = this.props.actions.ui; | ||
46 | |||
47 | const { intl } = this.props; | ||
48 | |||
49 | return ( | ||
50 | <Appear transitionName="fadeIn-fast"> | ||
51 | <div className="settings-wrapper"> | ||
52 | <ErrorBoundary> | ||
53 | <button | ||
54 | type="button" | ||
55 | className="settings-wrapper__action" | ||
56 | onClick={closeSettings} | ||
57 | aria-label={intl.formatMessage(messages.closeSettings)} | ||
58 | /> | ||
59 | <div className="settings franz-form"> | ||
60 | <Outlet /> | ||
61 | <button | ||
62 | type="button" | ||
63 | className="settings__close" | ||
64 | onClick={closeSettings} | ||
65 | aria-label={intl.formatMessage(messages.closeSettings)} | ||
66 | > | ||
67 | <Icon icon={mdiClose} size={1.35} /> | ||
68 | </button> | ||
69 | </div> | ||
70 | </ErrorBoundary> | ||
71 | </div> | ||
72 | </Appear> | ||
73 | ); | ||
74 | } | ||
75 | } | ||
76 | |||
77 | export default injectIntl<'intl', IProps>( | ||
78 | inject('stores', 'actions')(observer(ReleaseNotesLayout)), | ||
79 | ); | ||