aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorLibravatar Markus Hatvan <markus_hatvan@aon.at>2021-10-14 08:48:08 +0200
committerLibravatar GitHub <noreply@github.com>2021-10-14 08:48:08 +0200
commitf06c7da3e09afbbe757101677b4c8f32d051e471 (patch)
treeb8ceb13fef267c6963931286d082a07d62ed3402 /src
parent5.6.3-nightly.33 [skip ci] (diff)
downloadferdium-app-f06c7da3e09afbbe757101677b4c8f32d051e471.tar.gz
ferdium-app-f06c7da3e09afbbe757101677b4c8f32d051e471.tar.zst
ferdium-app-f06c7da3e09afbbe757101677b4c8f32d051e471.zip
chore: convert class components to functional (#2065)
Diffstat (limited to 'src')
-rw-r--r--src/components/AppUpdateInfoBar.js60
-rw-r--r--src/components/AppUpdateInfoBar.tsx55
-rw-r--r--src/components/services/content/ErrorHandlers/styles.ts (renamed from src/components/services/content/ErrorHandlers/styles.js)0
-rw-r--r--src/components/settings/supportFerdi/SupportFerdiDashboard.js234
-rw-r--r--src/components/settings/supportFerdi/SupportFerdiDashboard.tsx232
-rw-r--r--src/components/ui/AppLoader/styles.ts (renamed from src/components/ui/AppLoader/styles.js)0
-rw-r--r--src/components/ui/WebviewLoader/styles.ts (renamed from src/components/ui/WebviewLoader/styles.js)0
-rw-r--r--src/components/ui/effects/Appear.js47
-rw-r--r--src/components/ui/effects/Appear.tsx39
9 files changed, 326 insertions, 341 deletions
diff --git a/src/components/AppUpdateInfoBar.js b/src/components/AppUpdateInfoBar.js
deleted file mode 100644
index 3f2b1ae95..000000000
--- a/src/components/AppUpdateInfoBar.js
+++ /dev/null
@@ -1,60 +0,0 @@
1import { Component } from 'react';
2import PropTypes from 'prop-types';
3import { defineMessages, injectIntl } from 'react-intl';
4
5import InfoBar from './ui/InfoBar';
6import { GITHUB_FERDI_URL } from '../config';
7import { openExternalUrl } from '../helpers/url-helpers';
8
9const messages = defineMessages({
10 updateAvailable: {
11 id: 'infobar.updateAvailable',
12 defaultMessage: 'A new update for Ferdi is available.',
13 },
14 changelog: {
15 id: 'infobar.buttonChangelog',
16 defaultMessage: 'What is new?',
17 },
18 buttonInstallUpdate: {
19 id: 'infobar.buttonInstallUpdate',
20 defaultMessage: 'Restart & install update',
21 },
22});
23
24class AppUpdateInfoBar extends Component {
25 static propTypes = {
26 onInstallUpdate: PropTypes.func.isRequired,
27 onHide: PropTypes.func.isRequired,
28 };
29
30 render() {
31 const { intl } = this.props;
32 const { onInstallUpdate, onHide } = this.props;
33
34 return (
35 <InfoBar
36 type="primary"
37 ctaLabel={intl.formatMessage(messages.buttonInstallUpdate)}
38 onClick={onInstallUpdate}
39 onHide={onHide}
40 >
41 <span className="mdi mdi-information" />
42 {intl.formatMessage(messages.updateAvailable)}{' '}
43 <button
44 className="info-bar__inline-button"
45 type="button"
46 onClick={() =>
47 openExternalUrl(
48 `${GITHUB_FERDI_URL}/ferdi/blob/develop/CHANGELOG.md`,
49 true,
50 )
51 }
52 >
53 <u>{intl.formatMessage(messages.changelog)}</u>
54 </button>
55 </InfoBar>
56 );
57 }
58}
59
60export default injectIntl(AppUpdateInfoBar);
diff --git a/src/components/AppUpdateInfoBar.tsx b/src/components/AppUpdateInfoBar.tsx
new file mode 100644
index 000000000..1dd3723cc
--- /dev/null
+++ b/src/components/AppUpdateInfoBar.tsx
@@ -0,0 +1,55 @@
1import { defineMessages, useIntl } from 'react-intl';
2
3import InfoBar from './ui/InfoBar';
4import { GITHUB_FERDI_URL } from '../config';
5import { openExternalUrl } from '../helpers/url-helpers';
6
7const messages = defineMessages({
8 updateAvailable: {
9 id: 'infobar.updateAvailable',
10 defaultMessage: 'A new update for Ferdi is available.',
11 },
12 changelog: {
13 id: 'infobar.buttonChangelog',
14 defaultMessage: 'What is new?',
15 },
16 buttonInstallUpdate: {
17 id: 'infobar.buttonInstallUpdate',
18 defaultMessage: 'Restart & install update',
19 },
20});
21
22type Props = {
23 onInstallUpdate: () => void;
24 onHide: () => void;
25};
26
27const AppUpdateInfoBar = ({ onInstallUpdate, onHide }: Props) => {
28 const intl = useIntl();
29
30 return (
31 <InfoBar
32 type="primary"
33 ctaLabel={intl.formatMessage(messages.buttonInstallUpdate)}
34 onClick={onInstallUpdate}
35 onHide={onHide}
36 >
37 <span className="mdi mdi-information" />
38 {intl.formatMessage(messages.updateAvailable)}{' '}
39 <button
40 className="info-bar__inline-button"
41 type="button"
42 onClick={() =>
43 openExternalUrl(
44 `${GITHUB_FERDI_URL}/ferdi/blob/develop/CHANGELOG.md`,
45 true,
46 )
47 }
48 >
49 <u>{intl.formatMessage(messages.changelog)}</u>
50 </button>
51 </InfoBar>
52 );
53};
54
55export default AppUpdateInfoBar;
diff --git a/src/components/services/content/ErrorHandlers/styles.js b/src/components/services/content/ErrorHandlers/styles.ts
index 72d62f5e3..72d62f5e3 100644
--- a/src/components/services/content/ErrorHandlers/styles.js
+++ b/src/components/services/content/ErrorHandlers/styles.ts
diff --git a/src/components/settings/supportFerdi/SupportFerdiDashboard.js b/src/components/settings/supportFerdi/SupportFerdiDashboard.js
deleted file mode 100644
index b906df5c8..000000000
--- a/src/components/settings/supportFerdi/SupportFerdiDashboard.js
+++ /dev/null
@@ -1,234 +0,0 @@
1import { Component } from 'react';
2import { defineMessages, injectIntl } from 'react-intl';
3import { BrowserWindow } from '@electron/remote';
4import InfoBar from '../../ui/InfoBar';
5
6const messages = defineMessages({
7 headline: {
8 id: 'settings.supportFerdi.headline',
9 defaultMessage: 'About Ferdi',
10 },
11 title: {
12 id: 'settings.supportFerdi.title',
13 defaultMessage: 'Do you like Ferdi?',
14 },
15 aboutIntro: {
16 id: 'settings.supportFerdi.aboutIntro',
17 defaultMessage:
18 '<p>Ferdi is an open-source and a community-lead application.</p><p>Thanks to the people who make this possbile:</p>',
19 },
20 textListContributors: {
21 id: 'settings.supportFerdi.textListContributors',
22 defaultMessage: 'Full list of contributors',
23 },
24 textListContributorsHere: {
25 id: 'settings.supportFerdi.textListContributorsHere',
26 defaultMessage: 'here',
27 },
28 textVolunteers: {
29 id: 'settings.supportFerdi.textVolunteers',
30 defaultMessage:
31 'The development of Ferdi is done by volunteers. People who use Ferdi like you. They maintain, fix, and improve Ferdi in their spare time.',
32 },
33 textSupportWelcome: {
34 id: 'settings.supportFerdi.textSupportWelcome',
35 defaultMessage:
36 'Support is always welcome. You can find a list of the help we need',
37 },
38 textSupportWelcomeHere: {
39 id: 'settings.supportFerdi.textSupportWelcomeHere',
40 defaultMessage: 'here',
41 },
42 textExpenses: {
43 id: 'settings.supportFerdi.textExpenses',
44 defaultMessage:
45 'While volunteers do most of the work, we still need to pay for servers and certificates. As a community, we are fully transparent on funds we collect and spend - see our',
46 },
47 textOpenCollective: {
48 id: 'settings.supportFerdi.textOpenCollective',
49 defaultMessage: 'Open Collective',
50 },
51 textDonation: {
52 id: 'settings.supportFerdi.textDonation',
53 defaultMessage:
54 'If you feel like supporting Ferdi development with a donation, you can do so on both,',
55 },
56 textDonationAnd: {
57 id: 'settings.supportFerdi.textDonationAnd',
58 defaultMessage: 'and',
59 },
60 textGitHubSponsors: {
61 id: 'settings.supportFerdi.textGitHubSponsors',
62 defaultMessage: 'GitHub Sponsors',
63 },
64 openSurvey: {
65 id: 'settings.supportFerdi.openSurvey',
66 defaultMessage: 'Open survey',
67 },
68 bannerText: {
69 id: 'settings.supportFerdi.bannerText',
70 defaultMessage: 'Do you want to help us improve Ferdi?',
71 },
72});
73
74class SupportFerdiDashboard extends Component {
75 openSurveyWindow() {
76 let win = new BrowserWindow({ width: 670, height: 400 });
77 win.on('closed', () => {
78 win = null;
79 });
80
81 win.loadURL('https://rp28.typeform.com/to/E3phJT');
82 }
83
84 render() {
85 const { intl } = this.props;
86
87 const aboutIntro = intl.formatMessage(messages.aboutIntro);
88
89 return (
90 <div className="settings__main">
91 <div className="settings__header">
92 <span className="settings__header-item">
93 {intl.formatMessage(messages.headline)}
94 </span>
95 </div>
96 <div className="settings__body">
97 <h1>{intl.formatMessage(messages.title)}</h1>
98 <div>
99 <p className="settings__support-badges">
100 <a
101 href="https://github.com/getferdi/ferdi"
102 target="_blank"
103 rel="noreferrer"
104 >
105 <img
106 alt="GitHub Stars"
107 src="https://img.shields.io/github/stars/getferdi/ferdi?style=social"
108 />
109 </a>
110 <a
111 href="https://twitter.com/getferdi/"
112 target="_blank"
113 rel="noreferrer"
114 >
115 <img
116 alt="Twitter Follow"
117 src="https://img.shields.io/twitter/follow/getferdi?label=Follow&style=social"
118 />
119 </a>
120 <a
121 href="https://opencollective.com/getferdi#section-contributors"
122 target="_blank"
123 rel="noreferrer"
124 >
125 <img
126 alt="Open Collective backers"
127 src="https://img.shields.io/opencollective/backers/getferdi?logo=open-collective"
128 />
129 </a>
130 <a
131 href="https://opencollective.com/getferdi#section-contributors"
132 target="_blank"
133 rel="noreferrer"
134 >
135 <img
136 alt="Open Collective sponsors"
137 src="https://img.shields.io/opencollective/sponsors/getferdi?logo=open-collective"
138 />
139 </a>
140 </p>
141 <span dangerouslySetInnerHTML={{ __html: aboutIntro }} />
142 <br />
143 <br />
144 <p>
145 <a href="#contributors-via-opencollective">
146 <img
147 alt="GitHub contributors (non-exhaustive)"
148 width="100%"
149 src="https://opencollective.com/getferdi/contributors.svg?width=642&button=false"
150 />
151 </a>
152 </p>
153 <p>
154 {intl.formatMessage(messages.textListContributors)}
155 <a
156 href="https://github.com/getferdi/ferdi#contributors-"
157 target="_blank"
158 className="link"
159 rel="noreferrer"
160 >
161 {' '}
162 {intl.formatMessage(messages.textListContributorsHere)}
163 <i className="mdi mdi-open-in-new" />
164 </a>
165 <br />
166 <br />
167 </p>
168 <p>{intl.formatMessage(messages.textVolunteers)}</p>
169 <p>
170 {intl.formatMessage(messages.textSupportWelcome)}
171 <a
172 href="https://help.getferdi.com/general/support"
173 target="_blank"
174 className="link"
175 rel="noreferrer"
176 >
177 {' '}
178 {intl.formatMessage(messages.textSupportWelcomeHere)}
179 <i className="mdi mdi-open-in-new" />
180 </a>
181 </p>
182 <p>
183 {intl.formatMessage(messages.textExpenses)}
184 <a
185 href="https://opencollective.com/getferdi#section-budget"
186 target="_blank"
187 className="link"
188 rel="noreferrer"
189 >
190 {' '}
191 {intl.formatMessage(messages.textOpenCollective)}
192 <i className="mdi mdi-open-in-new" />
193 </a>
194 </p>
195 <p>
196 {intl.formatMessage(messages.textDonation)}
197 <a
198 href="https://opencollective.com/getferdi#section-contribute"
199 target="_blank"
200 className="link"
201 rel="noreferrer"
202 >
203 {' '}
204 {intl.formatMessage(messages.textOpenCollective)}
205 <i className="mdi mdi-open-in-new" />
206 </a>{' '}
207 {intl.formatMessage(messages.textDonationAnd)}
208 <a
209 href="https://github.com/sponsors/getferdi"
210 target="_blank"
211 className="link"
212 rel="noreferrer"
213 >
214 {' '}
215 {intl.formatMessage(messages.textGitHubSponsors)}
216 <i className="mdi mdi-open-in-new" />
217 </a>
218 </p>
219 </div>
220 </div>
221 <InfoBar
222 sticky
223 type="primary"
224 ctaLabel={intl.formatMessage(messages.openSurvey)}
225 onClick={this.openSurveyWindow}
226 >
227 {intl.formatMessage(messages.bannerText)}
228 </InfoBar>
229 </div>
230 );
231 }
232}
233
234export default injectIntl(SupportFerdiDashboard);
diff --git a/src/components/settings/supportFerdi/SupportFerdiDashboard.tsx b/src/components/settings/supportFerdi/SupportFerdiDashboard.tsx
new file mode 100644
index 000000000..505c49812
--- /dev/null
+++ b/src/components/settings/supportFerdi/SupportFerdiDashboard.tsx
@@ -0,0 +1,232 @@
1import { defineMessages, useIntl } from 'react-intl';
2import { BrowserWindow } from '@electron/remote';
3import InfoBar from '../../ui/InfoBar';
4
5const messages = defineMessages({
6 headline: {
7 id: 'settings.supportFerdi.headline',
8 defaultMessage: 'About Ferdi',
9 },
10 title: {
11 id: 'settings.supportFerdi.title',
12 defaultMessage: 'Do you like Ferdi?',
13 },
14 aboutIntro: {
15 id: 'settings.supportFerdi.aboutIntro',
16 defaultMessage:
17 '<p>Ferdi is an open-source and a community-lead application.</p><p>Thanks to the people who make this possbile:</p>',
18 },
19 textListContributors: {
20 id: 'settings.supportFerdi.textListContributors',
21 defaultMessage: 'Full list of contributors',
22 },
23 textListContributorsHere: {
24 id: 'settings.supportFerdi.textListContributorsHere',
25 defaultMessage: 'here',
26 },
27 textVolunteers: {
28 id: 'settings.supportFerdi.textVolunteers',
29 defaultMessage:
30 'The development of Ferdi is done by volunteers. People who use Ferdi like you. They maintain, fix, and improve Ferdi in their spare time.',
31 },
32 textSupportWelcome: {
33 id: 'settings.supportFerdi.textSupportWelcome',
34 defaultMessage:
35 'Support is always welcome. You can find a list of the help we need',
36 },
37 textSupportWelcomeHere: {
38 id: 'settings.supportFerdi.textSupportWelcomeHere',
39 defaultMessage: 'here',
40 },
41 textExpenses: {
42 id: 'settings.supportFerdi.textExpenses',
43 defaultMessage:
44 'While volunteers do most of the work, we still need to pay for servers and certificates. As a community, we are fully transparent on funds we collect and spend - see our',
45 },
46 textOpenCollective: {
47 id: 'settings.supportFerdi.textOpenCollective',
48 defaultMessage: 'Open Collective',
49 },
50 textDonation: {
51 id: 'settings.supportFerdi.textDonation',
52 defaultMessage:
53 'If you feel like supporting Ferdi development with a donation, you can do so on both,',
54 },
55 textDonationAnd: {
56 id: 'settings.supportFerdi.textDonationAnd',
57 defaultMessage: 'and',
58 },
59 textGitHubSponsors: {
60 id: 'settings.supportFerdi.textGitHubSponsors',
61 defaultMessage: 'GitHub Sponsors',
62 },
63 openSurvey: {
64 id: 'settings.supportFerdi.openSurvey',
65 defaultMessage: 'Open survey',
66 },
67 bannerText: {
68 id: 'settings.supportFerdi.bannerText',
69 defaultMessage: 'Do you want to help us improve Ferdi?',
70 },
71});
72
73const openSurveyWindow = () => {
74 let win = new BrowserWindow({ width: 670, height: 400 });
75 win.on('closed', () => {
76 // @ts-expect-error Type 'null' is not assignable to type 'BrowserWindow'.
77 win = null;
78 });
79
80 win.loadURL('https://rp28.typeform.com/to/E3phJT');
81};
82
83const SupportFerdiDashboard = () => {
84 const intl = useIntl();
85
86 const aboutIntro = intl.formatMessage(messages.aboutIntro);
87
88 return (
89 <div className="settings__main">
90 <div className="settings__header">
91 <span className="settings__header-item">
92 {intl.formatMessage(messages.headline)}
93 </span>
94 </div>
95 <div className="settings__body">
96 <h1>{intl.formatMessage(messages.title)}</h1>
97 <div>
98 <p className="settings__support-badges">
99 <a
100 href="https://github.com/getferdi/ferdi"
101 target="_blank"
102 rel="noreferrer"
103 >
104 <img
105 alt="GitHub Stars"
106 src="https://img.shields.io/github/stars/getferdi/ferdi?style=social"
107 />
108 </a>
109 <a
110 href="https://twitter.com/getferdi/"
111 target="_blank"
112 rel="noreferrer"
113 >
114 <img
115 alt="Twitter Follow"
116 src="https://img.shields.io/twitter/follow/getferdi?label=Follow&style=social"
117 />
118 </a>
119 <a
120 href="https://opencollective.com/getferdi#section-contributors"
121 target="_blank"
122 rel="noreferrer"
123 >
124 <img
125 alt="Open Collective backers"
126 src="https://img.shields.io/opencollective/backers/getferdi?logo=open-collective"
127 />
128 </a>
129 <a
130 href="https://opencollective.com/getferdi#section-contributors"
131 target="_blank"
132 rel="noreferrer"
133 >
134 <img
135 alt="Open Collective sponsors"
136 src="https://img.shields.io/opencollective/sponsors/getferdi?logo=open-collective"
137 />
138 </a>
139 </p>
140 <span dangerouslySetInnerHTML={{ __html: aboutIntro }} />
141 <br />
142 <br />
143 <p>
144 <a href="#contributors-via-opencollective">
145 <img
146 alt="GitHub contributors (non-exhaustive)"
147 width="100%"
148 src="https://opencollective.com/getferdi/contributors.svg?width=642&button=false"
149 />
150 </a>
151 </p>
152 <p>
153 {intl.formatMessage(messages.textListContributors)}
154 <a
155 href="https://github.com/getferdi/ferdi#contributors-"
156 target="_blank"
157 className="link"
158 rel="noreferrer"
159 >
160 {' '}
161 {intl.formatMessage(messages.textListContributorsHere)}
162 <i className="mdi mdi-open-in-new" />
163 </a>
164 <br />
165 <br />
166 </p>
167 <p>{intl.formatMessage(messages.textVolunteers)}</p>
168 <p>
169 {intl.formatMessage(messages.textSupportWelcome)}
170 <a
171 href="https://help.getferdi.com/general/support"
172 target="_blank"
173 className="link"
174 rel="noreferrer"
175 >
176 {' '}
177 {intl.formatMessage(messages.textSupportWelcomeHere)}
178 <i className="mdi mdi-open-in-new" />
179 </a>
180 </p>
181 <p>
182 {intl.formatMessage(messages.textExpenses)}
183 <a
184 href="https://opencollective.com/getferdi#section-budget"
185 target="_blank"
186 className="link"
187 rel="noreferrer"
188 >
189 {' '}
190 {intl.formatMessage(messages.textOpenCollective)}
191 <i className="mdi mdi-open-in-new" />
192 </a>
193 </p>
194 <p>
195 {intl.formatMessage(messages.textDonation)}
196 <a
197 href="https://opencollective.com/getferdi#section-contribute"
198 target="_blank"
199 className="link"
200 rel="noreferrer"
201 >
202 {' '}
203 {intl.formatMessage(messages.textOpenCollective)}
204 <i className="mdi mdi-open-in-new" />
205 </a>{' '}
206 {intl.formatMessage(messages.textDonationAnd)}
207 <a
208 href="https://github.com/sponsors/getferdi"
209 target="_blank"
210 className="link"
211 rel="noreferrer"
212 >
213 {' '}
214 {intl.formatMessage(messages.textGitHubSponsors)}
215 <i className="mdi mdi-open-in-new" />
216 </a>
217 </p>
218 </div>
219 </div>
220 <InfoBar
221 sticky
222 type="primary"
223 ctaLabel={intl.formatMessage(messages.openSurvey)}
224 onClick={openSurveyWindow}
225 >
226 {intl.formatMessage(messages.bannerText)}
227 </InfoBar>
228 </div>
229 );
230};
231
232export default SupportFerdiDashboard;
diff --git a/src/components/ui/AppLoader/styles.js b/src/components/ui/AppLoader/styles.ts
index 9891e0387..9891e0387 100644
--- a/src/components/ui/AppLoader/styles.js
+++ b/src/components/ui/AppLoader/styles.ts
diff --git a/src/components/ui/WebviewLoader/styles.js b/src/components/ui/WebviewLoader/styles.ts
index 5d58011fe..5d58011fe 100644
--- a/src/components/ui/WebviewLoader/styles.js
+++ b/src/components/ui/WebviewLoader/styles.ts
diff --git a/src/components/ui/effects/Appear.js b/src/components/ui/effects/Appear.js
deleted file mode 100644
index fc319fe28..000000000
--- a/src/components/ui/effects/Appear.js
+++ /dev/null
@@ -1,47 +0,0 @@
1import { Component } from 'react';
2import PropTypes from 'prop-types';
3import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
4
5export default class Appear extends Component {
6 static propTypes = {
7 // eslint-disable-next-line react/forbid-prop-types
8 children: PropTypes.any.isRequired,
9 transitionName: PropTypes.string,
10 className: PropTypes.string,
11 };
12
13 static defaultProps = {
14 transitionName: 'fadeIn',
15 className: '',
16 };
17
18 state = {
19 mounted: false,
20 };
21
22 componentDidMount() {
23 this.setState({ mounted: true });
24 }
25
26 render() {
27 const { children, transitionName, className } = this.props;
28
29 if (!this.state.mounted) {
30 return null;
31 }
32
33 return (
34 <ReactCSSTransitionGroup
35 transitionName={transitionName}
36 transitionAppear
37 transitionLeave
38 transitionAppearTimeout={1500}
39 transitionEnterTimeout={1500}
40 transitionLeaveTimeout={1500}
41 className={className}
42 >
43 {children}
44 </ReactCSSTransitionGroup>
45 );
46 }
47}
diff --git a/src/components/ui/effects/Appear.tsx b/src/components/ui/effects/Appear.tsx
new file mode 100644
index 000000000..117c02f97
--- /dev/null
+++ b/src/components/ui/effects/Appear.tsx
@@ -0,0 +1,39 @@
1import { ReactChildren, useEffect, useState } from 'react';
2import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
3
4type Props = {
5 children: ReactChildren;
6 transitionName: string;
7 className: string;
8};
9const Appear = ({
10 children,
11 transitionName = 'fadeIn',
12 className = '',
13}: Props) => {
14 const [mounted, setMounted] = useState(false);
15
16 useEffect(() => {
17 setMounted(true);
18 }, []);
19
20 if (!mounted) {
21 return null;
22 }
23
24 return (
25 <ReactCSSTransitionGroup
26 transitionName={transitionName}
27 transitionAppear
28 transitionLeave
29 transitionAppearTimeout={1500}
30 transitionEnterTimeout={1500}
31 transitionLeaveTimeout={1500}
32 className={className}
33 >
34 {children}
35 </ReactCSSTransitionGroup>
36 );
37};
38
39export default Appear;
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-07-04 01:36:02 +0000