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 Permalink from '../../../components/permalink'; import TransitionMotion from 'react-motion/lib/TransitionMotion'; import spring from 'react-motion/lib/spring'; import ComposeForm from '../../compose/components/compose_form'; import Search from '../../compose/components/search'; import NavigationBar from '../../compose/components/navigation_bar'; import ColumnHeader from './column_header'; import Immutable from 'immutable'; const noop = () => { }; 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 = ({ me }) => (

); PageTwo.propTypes = { me: ImmutablePropTypes.map.isRequired, }; const PageThree = ({ me, domain }) => (

#illustration, introductions: #introductions }}/>

); PageThree.propTypes = { me: ImmutablePropTypes.map.isRequired, domain: PropTypes.string.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}

GitHub }} />

}} />

); }; PageSix.propTypes = { admin: ImmutablePropTypes.map, domain: PropTypes.string.isRequired }; const mapStateToProps = state => ({ me: state.getIn(['accounts', state.getIn(['meta', 'me'])]), admin: state.getIn(['accounts', state.getIn(['meta', 'admin'])]), domain: state.getIn(['meta', 'domain']) }); class OnboardingModal extends React.PureComponent { static propTypes = { onClose: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, me: ImmutablePropTypes.map.isRequired, domain: PropTypes.string.isRequired, admin: ImmutablePropTypes.map }; state = { currentIndex: 0 }; handleSkip = (e) => { e.preventDefault(); this.props.onClose(); } handleDot = (e) => { const i = Number(e.currentTarget.getAttribute('data-index')); e.preventDefault(); this.setState({ currentIndex: i }); } handleNext = (e) => { const maxNum = Number(e.currentTarget.getAttribute('data-length')); e.preventDefault(); if (this.state.currentIndex < maxNum - 1) { this.setState({ currentIndex: this.state.currentIndex + 1 }); } else { this.props.onClose(); } } render () { const { me, admin, domain, intl } = this.props; const pages = [ , , , , ]; const { currentIndex } = this.state; const hasMore = currentIndex < pages.length - 1; let nextOrDoneBtn; if(hasMore) { nextOrDoneBtn = ; } else { nextOrDoneBtn = ; } const styles = pages.map((page, i) => ({ key: `page-${i}`, style: { opacity: spring(i === currentIndex ? 1 : 0) } })); return (
{interpolatedStyles =>
{pages.map((page, i) =>
{page}
)}
}
{pages.map((_, i) =>
)}
{nextOrDoneBtn}
); } } export default connect(mapStateToProps)(injectIntl(OnboardingModal));