From f06c7da3e09afbbe757101677b4c8f32d051e471 Mon Sep 17 00:00:00 2001 From: Markus Hatvan Date: Thu, 14 Oct 2021 08:48:08 +0200 Subject: chore: convert class components to functional (#2065) --- src/components/AppUpdateInfoBar.js | 60 ------ src/components/AppUpdateInfoBar.tsx | 55 +++++ .../services/content/ErrorHandlers/styles.js | 25 --- .../services/content/ErrorHandlers/styles.ts | 25 +++ .../settings/supportFerdi/SupportFerdiDashboard.js | 234 --------------------- .../supportFerdi/SupportFerdiDashboard.tsx | 232 ++++++++++++++++++++ src/components/ui/AppLoader/styles.js | 22 -- src/components/ui/AppLoader/styles.ts | 22 ++ src/components/ui/WebviewLoader/styles.js | 9 - src/components/ui/WebviewLoader/styles.ts | 9 + src/components/ui/effects/Appear.js | 47 ----- src/components/ui/effects/Appear.tsx | 39 ++++ 12 files changed, 382 insertions(+), 397 deletions(-) delete mode 100644 src/components/AppUpdateInfoBar.js create mode 100644 src/components/AppUpdateInfoBar.tsx delete mode 100644 src/components/services/content/ErrorHandlers/styles.js create mode 100644 src/components/services/content/ErrorHandlers/styles.ts delete mode 100644 src/components/settings/supportFerdi/SupportFerdiDashboard.js create mode 100644 src/components/settings/supportFerdi/SupportFerdiDashboard.tsx delete mode 100644 src/components/ui/AppLoader/styles.js create mode 100644 src/components/ui/AppLoader/styles.ts delete mode 100644 src/components/ui/WebviewLoader/styles.js create mode 100644 src/components/ui/WebviewLoader/styles.ts delete mode 100644 src/components/ui/effects/Appear.js create mode 100644 src/components/ui/effects/Appear.tsx (limited to 'src/components') 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 @@ -import { Component } from 'react'; -import PropTypes from 'prop-types'; -import { defineMessages, injectIntl } from 'react-intl'; - -import InfoBar from './ui/InfoBar'; -import { GITHUB_FERDI_URL } from '../config'; -import { openExternalUrl } from '../helpers/url-helpers'; - -const messages = defineMessages({ - updateAvailable: { - id: 'infobar.updateAvailable', - defaultMessage: 'A new update for Ferdi is available.', - }, - changelog: { - id: 'infobar.buttonChangelog', - defaultMessage: 'What is new?', - }, - buttonInstallUpdate: { - id: 'infobar.buttonInstallUpdate', - defaultMessage: 'Restart & install update', - }, -}); - -class AppUpdateInfoBar extends Component { - static propTypes = { - onInstallUpdate: PropTypes.func.isRequired, - onHide: PropTypes.func.isRequired, - }; - - render() { - const { intl } = this.props; - const { onInstallUpdate, onHide } = this.props; - - return ( - - - {intl.formatMessage(messages.updateAvailable)}{' '} - - - ); - } -} - -export 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 @@ +import { defineMessages, useIntl } from 'react-intl'; + +import InfoBar from './ui/InfoBar'; +import { GITHUB_FERDI_URL } from '../config'; +import { openExternalUrl } from '../helpers/url-helpers'; + +const messages = defineMessages({ + updateAvailable: { + id: 'infobar.updateAvailable', + defaultMessage: 'A new update for Ferdi is available.', + }, + changelog: { + id: 'infobar.buttonChangelog', + defaultMessage: 'What is new?', + }, + buttonInstallUpdate: { + id: 'infobar.buttonInstallUpdate', + defaultMessage: 'Restart & install update', + }, +}); + +type Props = { + onInstallUpdate: () => void; + onHide: () => void; +}; + +const AppUpdateInfoBar = ({ onInstallUpdate, onHide }: Props) => { + const intl = useIntl(); + + return ( + + + {intl.formatMessage(messages.updateAvailable)}{' '} + + + ); +}; + +export default AppUpdateInfoBar; diff --git a/src/components/services/content/ErrorHandlers/styles.js b/src/components/services/content/ErrorHandlers/styles.js deleted file mode 100644 index 72d62f5e3..000000000 --- a/src/components/services/content/ErrorHandlers/styles.js +++ /dev/null @@ -1,25 +0,0 @@ -export default (theme) => ({ - component: { - left: 0, - position: 'absolute', - top: 0, - width: '100%', - zIndex: 0, - alignItems: 'center', - background: theme.colorWebviewErrorHandlerBackground, - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - textAlign: 'center', - }, - buttonContainer: { - display: 'flex', - flexDirection: 'row', - height: 'auto', - margin: [40, 0, 20], - - '& button': { - margin: [0, 10, 0, 10], - }, - }, -}); diff --git a/src/components/services/content/ErrorHandlers/styles.ts b/src/components/services/content/ErrorHandlers/styles.ts new file mode 100644 index 000000000..72d62f5e3 --- /dev/null +++ b/src/components/services/content/ErrorHandlers/styles.ts @@ -0,0 +1,25 @@ +export default (theme) => ({ + component: { + left: 0, + position: 'absolute', + top: 0, + width: '100%', + zIndex: 0, + alignItems: 'center', + background: theme.colorWebviewErrorHandlerBackground, + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + textAlign: 'center', + }, + buttonContainer: { + display: 'flex', + flexDirection: 'row', + height: 'auto', + margin: [40, 0, 20], + + '& button': { + margin: [0, 10, 0, 10], + }, + }, +}); 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 @@ -import { Component } from 'react'; -import { defineMessages, injectIntl } from 'react-intl'; -import { BrowserWindow } from '@electron/remote'; -import InfoBar from '../../ui/InfoBar'; - -const messages = defineMessages({ - headline: { - id: 'settings.supportFerdi.headline', - defaultMessage: 'About Ferdi', - }, - title: { - id: 'settings.supportFerdi.title', - defaultMessage: 'Do you like Ferdi?', - }, - aboutIntro: { - id: 'settings.supportFerdi.aboutIntro', - defaultMessage: - '

Ferdi is an open-source and a community-lead application.

Thanks to the people who make this possbile:

', - }, - textListContributors: { - id: 'settings.supportFerdi.textListContributors', - defaultMessage: 'Full list of contributors', - }, - textListContributorsHere: { - id: 'settings.supportFerdi.textListContributorsHere', - defaultMessage: 'here', - }, - textVolunteers: { - id: 'settings.supportFerdi.textVolunteers', - defaultMessage: - 'The development of Ferdi is done by volunteers. People who use Ferdi like you. They maintain, fix, and improve Ferdi in their spare time.', - }, - textSupportWelcome: { - id: 'settings.supportFerdi.textSupportWelcome', - defaultMessage: - 'Support is always welcome. You can find a list of the help we need', - }, - textSupportWelcomeHere: { - id: 'settings.supportFerdi.textSupportWelcomeHere', - defaultMessage: 'here', - }, - textExpenses: { - id: 'settings.supportFerdi.textExpenses', - defaultMessage: - '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', - }, - textOpenCollective: { - id: 'settings.supportFerdi.textOpenCollective', - defaultMessage: 'Open Collective', - }, - textDonation: { - id: 'settings.supportFerdi.textDonation', - defaultMessage: - 'If you feel like supporting Ferdi development with a donation, you can do so on both,', - }, - textDonationAnd: { - id: 'settings.supportFerdi.textDonationAnd', - defaultMessage: 'and', - }, - textGitHubSponsors: { - id: 'settings.supportFerdi.textGitHubSponsors', - defaultMessage: 'GitHub Sponsors', - }, - openSurvey: { - id: 'settings.supportFerdi.openSurvey', - defaultMessage: 'Open survey', - }, - bannerText: { - id: 'settings.supportFerdi.bannerText', - defaultMessage: 'Do you want to help us improve Ferdi?', - }, -}); - -class SupportFerdiDashboard extends Component { - openSurveyWindow() { - let win = new BrowserWindow({ width: 670, height: 400 }); - win.on('closed', () => { - win = null; - }); - - win.loadURL('https://rp28.typeform.com/to/E3phJT'); - } - - render() { - const { intl } = this.props; - - const aboutIntro = intl.formatMessage(messages.aboutIntro); - - return ( -
-
- - {intl.formatMessage(messages.headline)} - -
-
-

{intl.formatMessage(messages.title)}

-
-

- - GitHub Stars - - - Twitter Follow - - - Open Collective backers - - - Open Collective sponsors - -

- -
-
-

- - GitHub contributors (non-exhaustive) - -

-

- {intl.formatMessage(messages.textListContributors)} - - {' '} - {intl.formatMessage(messages.textListContributorsHere)} - - -
-
-

-

{intl.formatMessage(messages.textVolunteers)}

-

- {intl.formatMessage(messages.textSupportWelcome)} - - {' '} - {intl.formatMessage(messages.textSupportWelcomeHere)} - - -

-

- {intl.formatMessage(messages.textExpenses)} - - {' '} - {intl.formatMessage(messages.textOpenCollective)} - - -

-

- {intl.formatMessage(messages.textDonation)} - - {' '} - {intl.formatMessage(messages.textOpenCollective)} - - {' '} - {intl.formatMessage(messages.textDonationAnd)} - - {' '} - {intl.formatMessage(messages.textGitHubSponsors)} - - -

-
-
- - {intl.formatMessage(messages.bannerText)} - -
- ); - } -} - -export 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 @@ +import { defineMessages, useIntl } from 'react-intl'; +import { BrowserWindow } from '@electron/remote'; +import InfoBar from '../../ui/InfoBar'; + +const messages = defineMessages({ + headline: { + id: 'settings.supportFerdi.headline', + defaultMessage: 'About Ferdi', + }, + title: { + id: 'settings.supportFerdi.title', + defaultMessage: 'Do you like Ferdi?', + }, + aboutIntro: { + id: 'settings.supportFerdi.aboutIntro', + defaultMessage: + '

Ferdi is an open-source and a community-lead application.

Thanks to the people who make this possbile:

', + }, + textListContributors: { + id: 'settings.supportFerdi.textListContributors', + defaultMessage: 'Full list of contributors', + }, + textListContributorsHere: { + id: 'settings.supportFerdi.textListContributorsHere', + defaultMessage: 'here', + }, + textVolunteers: { + id: 'settings.supportFerdi.textVolunteers', + defaultMessage: + 'The development of Ferdi is done by volunteers. People who use Ferdi like you. They maintain, fix, and improve Ferdi in their spare time.', + }, + textSupportWelcome: { + id: 'settings.supportFerdi.textSupportWelcome', + defaultMessage: + 'Support is always welcome. You can find a list of the help we need', + }, + textSupportWelcomeHere: { + id: 'settings.supportFerdi.textSupportWelcomeHere', + defaultMessage: 'here', + }, + textExpenses: { + id: 'settings.supportFerdi.textExpenses', + defaultMessage: + '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', + }, + textOpenCollective: { + id: 'settings.supportFerdi.textOpenCollective', + defaultMessage: 'Open Collective', + }, + textDonation: { + id: 'settings.supportFerdi.textDonation', + defaultMessage: + 'If you feel like supporting Ferdi development with a donation, you can do so on both,', + }, + textDonationAnd: { + id: 'settings.supportFerdi.textDonationAnd', + defaultMessage: 'and', + }, + textGitHubSponsors: { + id: 'settings.supportFerdi.textGitHubSponsors', + defaultMessage: 'GitHub Sponsors', + }, + openSurvey: { + id: 'settings.supportFerdi.openSurvey', + defaultMessage: 'Open survey', + }, + bannerText: { + id: 'settings.supportFerdi.bannerText', + defaultMessage: 'Do you want to help us improve Ferdi?', + }, +}); + +const openSurveyWindow = () => { + let win = new BrowserWindow({ width: 670, height: 400 }); + win.on('closed', () => { + // @ts-expect-error Type 'null' is not assignable to type 'BrowserWindow'. + win = null; + }); + + win.loadURL('https://rp28.typeform.com/to/E3phJT'); +}; + +const SupportFerdiDashboard = () => { + const intl = useIntl(); + + const aboutIntro = intl.formatMessage(messages.aboutIntro); + + return ( +
+
+ + {intl.formatMessage(messages.headline)} + +
+
+

{intl.formatMessage(messages.title)}

+
+

+ + GitHub Stars + + + Twitter Follow + + + Open Collective backers + + + Open Collective sponsors + +

+ +
+
+

+ + GitHub contributors (non-exhaustive) + +

+

+ {intl.formatMessage(messages.textListContributors)} + + {' '} + {intl.formatMessage(messages.textListContributorsHere)} + + +
+
+

+

{intl.formatMessage(messages.textVolunteers)}

+

+ {intl.formatMessage(messages.textSupportWelcome)} + + {' '} + {intl.formatMessage(messages.textSupportWelcomeHere)} + + +

+

+ {intl.formatMessage(messages.textExpenses)} + + {' '} + {intl.formatMessage(messages.textOpenCollective)} + + +

+

+ {intl.formatMessage(messages.textDonation)} + + {' '} + {intl.formatMessage(messages.textOpenCollective)} + + {' '} + {intl.formatMessage(messages.textDonationAnd)} + + {' '} + {intl.formatMessage(messages.textGitHubSponsors)} + + +

+
+
+ + {intl.formatMessage(messages.bannerText)} + +
+ ); +}; + +export default SupportFerdiDashboard; diff --git a/src/components/ui/AppLoader/styles.js b/src/components/ui/AppLoader/styles.js deleted file mode 100644 index 9891e0387..000000000 --- a/src/components/ui/AppLoader/styles.js +++ /dev/null @@ -1,22 +0,0 @@ -let sloganTransition = 'none'; - -if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) { - sloganTransition = 'opacity 1s ease'; -} - -export default { - component: { - color: '#FFF', - }, - slogan: { - display: 'block', - opacity: 0, - transition: sloganTransition, - position: 'absolute', - textAlign: 'center', - width: '100%', - }, - visible: { - opacity: 1, - }, -}; diff --git a/src/components/ui/AppLoader/styles.ts b/src/components/ui/AppLoader/styles.ts new file mode 100644 index 000000000..9891e0387 --- /dev/null +++ b/src/components/ui/AppLoader/styles.ts @@ -0,0 +1,22 @@ +let sloganTransition = 'none'; + +if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) { + sloganTransition = 'opacity 1s ease'; +} + +export default { + component: { + color: '#FFF', + }, + slogan: { + display: 'block', + opacity: 0, + transition: sloganTransition, + position: 'absolute', + textAlign: 'center', + width: '100%', + }, + visible: { + opacity: 1, + }, +}; diff --git a/src/components/ui/WebviewLoader/styles.js b/src/components/ui/WebviewLoader/styles.js deleted file mode 100644 index 5d58011fe..000000000 --- a/src/components/ui/WebviewLoader/styles.js +++ /dev/null @@ -1,9 +0,0 @@ -export default (theme) => ({ - component: { - background: theme.colorWebviewLoaderBackground, - padding: 20, - width: 'auto', - margin: [0, 'auto'], - borderRadius: 6, - }, -}); diff --git a/src/components/ui/WebviewLoader/styles.ts b/src/components/ui/WebviewLoader/styles.ts new file mode 100644 index 000000000..5d58011fe --- /dev/null +++ b/src/components/ui/WebviewLoader/styles.ts @@ -0,0 +1,9 @@ +export default (theme) => ({ + component: { + background: theme.colorWebviewLoaderBackground, + padding: 20, + width: 'auto', + margin: [0, 'auto'], + borderRadius: 6, + }, +}); 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 @@ -import { Component } from 'react'; -import PropTypes from 'prop-types'; -import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; - -export default class Appear extends Component { - static propTypes = { - // eslint-disable-next-line react/forbid-prop-types - children: PropTypes.any.isRequired, - transitionName: PropTypes.string, - className: PropTypes.string, - }; - - static defaultProps = { - transitionName: 'fadeIn', - className: '', - }; - - state = { - mounted: false, - }; - - componentDidMount() { - this.setState({ mounted: true }); - } - - render() { - const { children, transitionName, className } = this.props; - - if (!this.state.mounted) { - return null; - } - - return ( - - {children} - - ); - } -} 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 @@ +import { ReactChildren, useEffect, useState } from 'react'; +import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; + +type Props = { + children: ReactChildren; + transitionName: string; + className: string; +}; +const Appear = ({ + children, + transitionName = 'fadeIn', + className = '', +}: Props) => { + const [mounted, setMounted] = useState(false); + + useEffect(() => { + setMounted(true); + }, []); + + if (!mounted) { + return null; + } + + return ( + + {children} + + ); +}; + +export default Appear; -- cgit v1.2.3-70-g09d2