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, spring } from 'react-motion'; 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 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 }) => (
{}} onSubmit={() => {}} onPaste={() => {}} onPickEmoji={() => {}} onChangeSpoilerText={() => {}} onClearSuggestions={() => {}} onFetchSuggestions={() => {}} onSuggestionSelected={() => {}} />

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

#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 { constructor (props, context) { super(props, context); this.state = { currentIndex: 0 }; this.handleSkip = this.handleSkip.bind(this); this.handleDot = this.handleDot.bind(this); this.handleNext = this.handleNext.bind(this); } handleSkip (e) { e.preventDefault(); this.props.onClose(); } handleDot (i, e) { e.preventDefault(); this.setState({ currentIndex: i }); } handleNext (maxNum, e) { 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}
); } } OnboardingModal.propTypes = { onClose: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, me: ImmutablePropTypes.map.isRequired, domain: PropTypes.string.isRequired, admin: ImmutablePropTypes.map } export default connect(mapStateToProps)(injectIntl(OnboardingModal));