import PropTypes from 'prop-types'; import { FormattedMessage, injectIntl, defineMessages } from 'react-intl'; import { Helmet } from 'react-helmet'; import { Link, withRouter } from 'react-router-dom'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { connect } from 'react-redux'; import { ReactComponent as AccountCircleIcon } from '@material-symbols/svg-600/outlined/account_circle.svg'; import { ReactComponent as ArrowRightAltIcon } from '@material-symbols/svg-600/outlined/arrow_right_alt.svg'; import { ReactComponent as ContentCopyIcon } from '@material-symbols/svg-600/outlined/content_copy.svg'; import { ReactComponent as EditNoteIcon } from '@material-symbols/svg-600/outlined/edit_note.svg'; import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outlined/person_add.svg'; import { debounce } from 'lodash'; import illustration from 'mastodon/../images/elephant_ui_conversation.svg'; import { fetchAccount } from 'mastodon/actions/accounts'; import { focusCompose } from 'mastodon/actions/compose'; import { closeOnboarding } from 'mastodon/actions/onboarding'; import { Icon } from 'mastodon/components/icon'; import Column from 'mastodon/features/ui/components/column'; import { me } from 'mastodon/initial_state'; import { makeGetAccount } from 'mastodon/selectors'; import { assetHost } from 'mastodon/utils/config'; import { WithRouterPropTypes } from 'mastodon/utils/react_router'; import Step from './components/step'; import Follows from './follows'; import Share from './share'; const messages = defineMessages({ template: { id: 'onboarding.compose.template', defaultMessage: 'Hello #Mastodon!' }, }); const mapStateToProps = () => { const getAccount = makeGetAccount(); return state => ({ account: getAccount(state, me), }); }; class Onboarding extends ImmutablePureComponent { static propTypes = { dispatch: PropTypes.func.isRequired, account: ImmutablePropTypes.map, multiColumn: PropTypes.bool, ...WithRouterPropTypes, }; state = { step: null, profileClicked: false, shareClicked: false, }; handleClose = () => { const { dispatch, history } = this.props; dispatch(closeOnboarding()); history.push('/home'); }; handleProfileClick = () => { this.setState({ profileClicked: true }); }; handleFollowClick = () => { this.setState({ step: 'follows' }); }; handleComposeClick = () => { const { dispatch, intl, history } = this.props; dispatch(focusCompose(history, intl.formatMessage(messages.template))); }; handleShareClick = () => { this.setState({ step: 'share', shareClicked: true }); }; handleBackClick = () => { this.setState({ step: null }); }; handleWindowFocus = debounce(() => { const { dispatch, account } = this.props; dispatch(fetchAccount(account.get('id'))); }, 1000, { trailing: true }); componentDidMount () { window.addEventListener('focus', this.handleWindowFocus, false); } componentWillUnmount () { window.removeEventListener('focus', this.handleWindowFocus); } render () { const { account, multiColumn } = this.props; const { step, shareClicked } = this.state; switch(step) { case 'follows': return ; case 'share': return ; } return (

0 && account.get('note').length > 0)} icon='address-book-o' iconComponent={AccountCircleIcon} label={} description={} /> = 7} icon='user-plus' iconComponent={PersonAddIcon} label={} description={} /> = 1} icon='pencil-square-o' iconComponent={EditNoteIcon} label={} description={ }} />} /> } description={} />

); } } export default withRouter(connect(mapStateToProps)(injectIntl(Onboarding)));