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 { ComposeForm } from 'flavours/glitch/features/compose/components/compose_form';
import DrawerAccount from 'flavours/glitch/features/compose/components/navigation_bar';
import Search from 'flavours/glitch/features/compose/components/search';
import ColumnHeader from './column_header';
import { me } from 'flavours/glitch/util/initial_state';
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 = ({ 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 (
);
};
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}
);
}
}