From eb7b2481f631cec5953265eef4ebc3f2fa7e496a Mon Sep 17 00:00:00 2001 From: muhamedsalih-tw <104364298+muhamedsalih-tw@users.noreply.github.com> Date: Wed, 16 Nov 2022 23:30:39 +0530 Subject: Transform JSX components to TSX (#755) * color picker types * Import * SetupAssistant * Services & appear * ServiceWebView * SettingsLayout * ImportantScreen * WorkspaceDrawer * SetupAssistant * chore: update vscode settings * chore: removed stale Import screen component & its tree --- src/components/auth/Import.js | 168 ---------------- src/components/auth/SetupAssistant.jsx | 336 -------------------------------- src/components/auth/SetupAssistant.tsx | 337 +++++++++++++++++++++++++++++++++ 3 files changed, 337 insertions(+), 504 deletions(-) delete mode 100644 src/components/auth/Import.js delete mode 100644 src/components/auth/SetupAssistant.jsx create mode 100644 src/components/auth/SetupAssistant.tsx (limited to 'src/components/auth') diff --git a/src/components/auth/Import.js b/src/components/auth/Import.js deleted file mode 100644 index b897116e2..000000000 --- a/src/components/auth/Import.js +++ /dev/null @@ -1,168 +0,0 @@ -import { Component } from 'react'; -import PropTypes from 'prop-types'; -import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; -import { defineMessages, injectIntl } from 'react-intl'; -import { Link } from 'react-router-dom'; -import classnames from 'classnames'; -import Form from '../../lib/Form'; -import Toggle from '../ui/toggle'; -import Button from '../ui/button'; -import { H1 } from '../ui/headline'; - -const messages = defineMessages({ - headline: { - id: 'import.headline', - defaultMessage: 'Import your Ferdium 4 services', - }, - notSupportedHeadline: { - id: 'import.notSupportedHeadline', - defaultMessage: 'Services not yet supported in Ferdium 5', - }, - submitButtonLabel: { - id: 'import.submit.label', - defaultMessage: 'Import {count} services', - }, - skipButtonLabel: { - id: 'import.skip.label', - defaultMessage: 'I want to add services manually', - }, -}); - -class Import extends Component { - static propTypes = { - services: MobxPropTypes.arrayOrObservableArray.isRequired, - onSubmit: PropTypes.func.isRequired, - isSubmitting: PropTypes.bool.isRequired, - inviteRoute: PropTypes.string.isRequired, - }; - - componentDidMount() { - const config = { - fields: { - import: [ - ...this.props.services - .filter(s => s.recipe) - .map(s => ({ - fields: { - add: { - default: true, - options: s, - }, - }, - })), - ], - }, - }; - - this.form = new Form(config, this.props.intl); - } - - submit(e) { - const { services } = this.props; - e.preventDefault(); - this.form.submit({ - onSuccess: form => { - const servicesImport = form - .values() - .import.map( - (value, i) => !value.add || services.filter(s => s.recipe)[i], - ) - .filter(s => typeof s !== 'boolean'); - - this.props.onSubmit({ services: servicesImport }); - }, - onError: () => {}, - }); - } - - render() { - const { intl } = this.props; - const { services, isSubmitting, inviteRoute } = this.props; - - const availableServices = services.filter(s => s.recipe); - const unavailableServices = services.filter(s => !s.recipe); - - return ( -
-
-
this.submit(e)} - > - -

{intl.formatMessage(messages.headline)}

- - - {this.form.$('import').map((service, i) => ( - - - - - - ))} - -
- - - - - {availableServices[i].name !== '' - ? availableServices[i].name - : availableServices[i].recipe.name} -
- {unavailableServices.length > 0 && ( -
- - {intl.formatMessage(messages.notSupportedHeadline)} - -

- {services - .filter(s => !s.recipe) - .map((service, i) => ( - - {service.name !== '' ? service.name : service.service} - {unavailableServices.length > i + 1 ? ', ' : ''} - - ))} -

-
- )} - - {isSubmitting ? ( -
-
- ); - } -} - -export default injectIntl(observer(Import)); diff --git a/src/components/auth/SetupAssistant.jsx b/src/components/auth/SetupAssistant.jsx deleted file mode 100644 index 8d15e36d1..000000000 --- a/src/components/auth/SetupAssistant.jsx +++ /dev/null @@ -1,336 +0,0 @@ -import { Component } from 'react'; -import PropTypes from 'prop-types'; -import { observer } from 'mobx-react'; -import { defineMessages, injectIntl } from 'react-intl'; -import injectSheet from 'react-jss'; -import classnames from 'classnames'; - -import Input from '../ui/input/index'; -import Button from '../ui/button'; -import Badge from '../ui/badge'; -import Modal from '../ui/Modal'; -import Infobox from '../ui/Infobox'; -import Appear from '../ui/effects/Appear'; -import globalMessages from '../../i18n/globalMessages'; - -import { CDN_URL } from '../../config'; -import { H1, H2 } from '../ui/headline'; - -const SLACK_ID = 'slack'; - -const messages = defineMessages({ - headline: { - id: 'setupAssistant.headline', - defaultMessage: "Let's get started", - }, - subHeadline: { - id: 'setupAssistant.subheadline', - defaultMessage: - 'Choose from our most used services and get back on top of your messaging now.', - }, - submitButtonLabel: { - id: 'setupAssistant.submit.label', - defaultMessage: "Let's go", - }, - skipButtonLabel: { - id: 'setupAssistant.skip.label', - defaultMessage: 'Skip', - }, - inviteSuccessInfo: { - id: 'invite.successInfo', - defaultMessage: 'Invitations sent successfully', - }, -}); - -let transition = 'none'; - -if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) { - transition = 'all 0.25s'; -} - -const styles = theme => ({ - root: { - width: '500px !important', - textAlign: 'center', - padding: 20, - - '& h1': {}, - }, - servicesGrid: { - display: 'flex', - flexWrap: 'wrap', - justifyContent: 'space-between', - }, - serviceContainer: { - background: theme.colorBackground, - position: 'relative', - width: '32%', - display: 'flex', - alignItems: 'center', - flexDirection: 'column', - justifyContent: 'center', - padding: 20, - borderRadius: theme.borderRadius, - marginBottom: 10, - opacity: 0.5, - transition, - border: [3, 'solid', 'transparent'], - - '& h2': { - margin: [10, 0, 0], - color: theme.colorText, - }, - - '&:hover': { - border: [3, 'solid', theme.brandPrimary], - '& $serviceIcon': {}, - }, - }, - selected: { - border: [3, 'solid', theme.brandPrimary], - background: `${theme.brandPrimary}47`, - opacity: 1, - }, - serviceIcon: { - width: 50, - transition, - }, - - slackModalContent: { - textAlign: 'center', - - '& img': { - width: 50, - marginBottom: 20, - }, - }, - modalActionContainer: { - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'center', - }, - ctaCancel: { - background: 'none !important', - }, - slackBadge: { - position: 'absolute', - bottom: 4, - height: 'auto', - padding: '0px 4px', - borderRadius: theme.borderRadiusSmall, - margin: 0, - display: 'flex', - overflow: 'hidden', - }, - clearSlackWorkspace: { - background: theme.inputPrefixColor, - marginLeft: 5, - height: '100%', - color: theme.colorText, - display: 'inline-flex', - justifyContent: 'center', - alignItems: 'center', - marginRight: -4, - padding: [0, 5], - }, -}); - -class SetupAssistant extends Component { - static propTypes = { - classes: PropTypes.object.isRequired, - onSubmit: PropTypes.func.isRequired, - isInviteSuccessful: PropTypes.bool, - services: PropTypes.object.isRequired, - isSettingUpServices: PropTypes.bool.isRequired, - }; - - static defaultProps = { - isInviteSuccessful: false, - }; - - constructor() { - super(); - - this.state = { - services: [], - isSlackModalOpen: false, - slackWorkspace: '', - }; - } - - slackWorkspaceHandler() { - const { slackWorkspace = '', services } = this.state; - - const sanitizedWorkspace = slackWorkspace - .trim() - .replace(/^https?:\/\//, ''); - - if (sanitizedWorkspace) { - const index = services.findIndex(s => s.id === SLACK_ID); - - if (index === -1) { - const newServices = services; - newServices.push({ id: SLACK_ID, team: sanitizedWorkspace }); - this.setState({ services: newServices }); - } - } - - this.setState({ - isSlackModalOpen: false, - slackWorkspace: sanitizedWorkspace, - }); - } - - render() { - const { intl } = this.props; - const { - classes, - isInviteSuccessful, - onSubmit, - services, - isSettingUpServices, - } = this.props; - const { - isSlackModalOpen, - slackWorkspace, - services: addedServices, - } = this.state; - - return ( -
- {this.state.showSuccessInfo && isInviteSuccessful && ( - - - {intl.formatMessage(messages.inviteSuccessInfo)} - - - )} - - -

{intl.formatMessage(messages.headline)}

-

{intl.formatMessage(messages.subHeadline)}

-
- {Object.keys(services).map(id => { - const service = services[id]; - return ( - - - )} - - ); - })} -
- this.setState({ isSlackModalOpen: false })} - > -
- -

Create your first Slack workspace

-
{ - e.preventDefault(); - this.slackWorkspaceHandler(); - }} - > - - this.setState({ slackWorkspace: e.target.value }) - } - value={slackWorkspace} - /> -
-
-
-
- -
- ); - } -} - -export default injectIntl( - injectSheet(styles, { injectTheme: true })(observer(SetupAssistant)), -); diff --git a/src/components/auth/SetupAssistant.tsx b/src/components/auth/SetupAssistant.tsx new file mode 100644 index 000000000..c5fb79919 --- /dev/null +++ b/src/components/auth/SetupAssistant.tsx @@ -0,0 +1,337 @@ +import { Component } from 'react'; +import { observer } from 'mobx-react'; +import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; +import withStyles, { WithStylesProps } from 'react-jss'; +import classnames from 'classnames'; +import Input from '../ui/input/index'; +import Button from '../ui/button'; +import Badge from '../ui/badge'; +import Modal from '../ui/Modal'; +import Infobox from '../ui/Infobox'; +import Appear from '../ui/effects/Appear'; +import globalMessages from '../../i18n/globalMessages'; +import { CDN_URL } from '../../config'; +import { H1, H2 } from '../ui/headline'; + +const SLACK_ID = 'slack'; + +const messages = defineMessages({ + headline: { + id: 'setupAssistant.headline', + defaultMessage: "Let's get started", + }, + subHeadline: { + id: 'setupAssistant.subheadline', + defaultMessage: + 'Choose from our most used services and get back on top of your messaging now.', + }, + submitButtonLabel: { + id: 'setupAssistant.submit.label', + defaultMessage: "Let's go", + }, + skipButtonLabel: { + id: 'setupAssistant.skip.label', + defaultMessage: 'Skip', + }, + inviteSuccessInfo: { + id: 'invite.successInfo', + defaultMessage: 'Invitations sent successfully', + }, +}); + +const transition = + window && window.matchMedia('(prefers-reduced-motion: no-preference)') + ? 'all 0.25s' + : 'none'; + +const styles = theme => ({ + root: { + width: '500px !important', + textAlign: 'center', + padding: 20, + + '& h1': {}, + }, + servicesGrid: { + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'space-between', + }, + serviceContainer: { + background: theme.colorBackground, + position: 'relative', + width: '32%', + display: 'flex', + alignItems: 'center', + flexDirection: 'column', + justifyContent: 'center', + padding: 20, + borderRadius: theme.borderRadius, + marginBottom: 10, + opacity: 0.5, + transition, + border: [3, 'solid', 'transparent'], + + '& h2': { + margin: [10, 0, 0], + color: theme.colorText, + }, + + '&:hover': { + border: [3, 'solid', theme.brandPrimary], + '& $serviceIcon': {}, + }, + }, + selected: { + border: [3, 'solid', theme.brandPrimary], + background: `${theme.brandPrimary}47`, + opacity: 1, + }, + serviceIcon: { + width: 50, + transition, + }, + + slackModalContent: { + textAlign: 'center', + + '& img': { + width: 50, + marginBottom: 20, + }, + }, + modalActionContainer: { + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + }, + ctaCancel: { + background: 'none !important', + }, + slackBadge: { + position: 'absolute', + bottom: 4, + height: 'auto', + padding: '0px 4px', + borderRadius: theme.borderRadiusSmall, + margin: 0, + display: 'flex', + overflow: 'hidden', + }, + clearSlackWorkspace: { + background: theme.inputPrefixColor, + marginLeft: 5, + height: '100%', + color: theme.colorText, + display: 'inline-flex', + justifyContent: 'center', + alignItems: 'center', + marginRight: -4, + padding: [0, 5], + }, +}); + +interface IProps extends WithStylesProps, WrappedComponentProps { + onSubmit: (...args: any[]) => void; + isInviteSuccessful?: boolean; + services: any; // TODO - [TS DEBT] check legacy services type + isSettingUpServices: boolean; +} + +interface IState { + services: any[]; + isSlackModalOpen: boolean; + slackWorkspace: string; + showSuccessInfo: boolean; +} + +@observer +class SetupAssistant extends Component { + constructor(props: IProps) { + super(props); + + this.state = { + services: [], + isSlackModalOpen: false, + showSuccessInfo: false, + slackWorkspace: '', + }; + } + + slackWorkspaceHandler(): void { + const { slackWorkspace = '', services } = this.state; + const sanitizedWorkspace = slackWorkspace + .trim() + .replace(/^https?:\/\//, ''); + + if (sanitizedWorkspace) { + const index = services.findIndex(s => s.id === SLACK_ID); + if (index === -1) { + const newServices = services; + newServices.push({ id: SLACK_ID, team: sanitizedWorkspace }); + this.setState({ services: newServices }); + } + } + + this.setState({ + isSlackModalOpen: false, + slackWorkspace: sanitizedWorkspace, + }); + } + + render() { + const { + classes, + isInviteSuccessful = false, + onSubmit, + services, + isSettingUpServices, + intl, + } = this.props; + const { + isSlackModalOpen, + slackWorkspace, + services: addedServices, + } = this.state; + + return ( +
+ {this.state.showSuccessInfo && isInviteSuccessful && ( + + + {intl.formatMessage(messages.inviteSuccessInfo)} + + + )} + + +

{intl.formatMessage(messages.headline)}

+

{intl.formatMessage(messages.subHeadline)}

+
+ {Object.keys(services).map(id => { + const service = services[id]; + return ( + + + )} + + ); + })} +
+ this.setState({ isSlackModalOpen: false })} + > +
+ +

Create your first Slack workspace

+
{ + e.preventDefault(); + this.slackWorkspaceHandler(); + }} + > + + this.setState({ slackWorkspace: e.target.value }) + } + value={slackWorkspace} + /> +
+
+
+
+ +
+ ); + } +} + +export default injectIntl( + withStyles(styles, { injectTheme: true })(SetupAssistant), +); -- cgit v1.2.3-54-g00ecf