import React from 'react'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import ReactSwipeableViews from 'react-swipeable-views'; import classNames from 'classnames'; import Permalink from 'flavours/glitch/components/permalink'; import { WrappedComponent as RawComposer } from 'flavours/glitch/features/composer'; import DrawerAccount from 'flavours/glitch/features/drawer/account'; import DrawerSearch from 'flavours/glitch/features/drawer/search'; import ColumnHeader from './column_header'; import { me } from 'flavours/glitch/util/initial_state'; const messages = defineMessages({ home_title: { id: 'column.home', defaultMessage: 'Home' }, notifications_title: { id: 'column.notifications', defaultMessage: 'Notifications' }, local_title: { id: 'column.community', defaultMessage: 'Local timeline' }, federated_title: { id: 'column.public', defaultMessage: 'Federated timeline' }, }); const PageOne = ({ acct, domain }) => (

@{acct}@{domain} }} />

); PageOne.propTypes = { acct: PropTypes.string.isRequired, domain: PropTypes.string.isRequired, }; const PageTwo = ({ intl, myAccount }) => (

); PageTwo.propTypes = { intl: PropTypes.object.isRequired, myAccount: ImmutablePropTypes.map.isRequired, }; const PageThree = ({ intl, myAccount }) => (

#illustration, introductions: #introductions }} />

); PageThree.propTypes = { intl: PropTypes.object.isRequired, myAccount: ImmutablePropTypes.map.isRequired, }; const PageFour = ({ domain, intl }) => (

); PageFour.propTypes = { domain: PropTypes.string.isRequired, intl: PropTypes.object.isRequired, }; const PageSix = ({ admin, domain }) => { let adminSection = ''; if (admin) { adminSection = (

@{admin.get('acct')} }} />
}} />

); } return (

{adminSection}

fork, Mastodon: Mastodon, github: GitHub }} />

}} />

); }; PageSix.propTypes = { admin: ImmutablePropTypes.map, domain: PropTypes.string.isRequired, }; const mapStateToProps = state => ({ myAccount: state.getIn(['accounts', me]), admin: state.getIn(['accounts', state.getIn(['meta', 'admin'])]), domain: state.getIn(['meta', 'domain']), }); @connect(mapStateToProps) @injectIntl export default class OnboardingModal extends React.PureComponent { static propTypes = { onClose: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, myAccount: ImmutablePropTypes.map.isRequired, domain: PropTypes.string.isRequired, admin: ImmutablePropTypes.map, }; state = { currentIndex: 0, }; componentWillMount() { const { myAccount, admin, domain, intl } = this.props; this.pages = [ , , , , , ]; }; componentDidMount() { window.addEventListener('keyup', this.handleKeyUp); } componentWillUnmount() { window.addEventListener('keyup', this.handleKeyUp); } handleSkip = (e) => { e.preventDefault(); this.props.onClose(); } handleDot = (e) => { const i = Number(e.currentTarget.getAttribute('data-index')); e.preventDefault(); this.setState({ currentIndex: i }); } handlePrev = () => { this.setState(({ currentIndex }) => ({ currentIndex: Math.max(0, currentIndex - 1), })); } handleNext = () => { const { pages } = this; this.setState(({ currentIndex }) => ({ currentIndex: Math.min(currentIndex + 1, pages.length - 1), })); } handleSwipe = (index) => { this.setState({ currentIndex: index }); } handleKeyUp = ({ key }) => { switch (key) { case 'ArrowLeft': this.handlePrev(); break; case 'ArrowRight': this.handleNext(); break; } } handleClose = () => { this.props.onClose(); } render () { const { pages } = this; const { currentIndex } = this.state; const hasMore = currentIndex < pages.length - 1; const nextOrDoneBtn = hasMore ? ( ) : ( ); return (
{pages.map((page, i) => { const className = classNames('onboarding-modal__page__wrapper', { 'onboarding-modal__page__wrapper--active': i === currentIndex, }); return (
{page}
); })}
{pages.map((_, i) => { const className = classNames('onboarding-modal__dot', { active: i === currentIndex, }); return (
); })}
{nextOrDoneBtn}
); } }