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, 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 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 }) => (
);
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}
)}
}
);
}
}
export default connect(mapStateToProps)(injectIntl(OnboardingModal));