83 lines
2.3 KiB
JavaScript
83 lines
2.3 KiB
JavaScript
import 'preact/devtools';
|
|
import { h, Component } from 'preact';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import IntroSlide from './components/IntroSlide';
|
|
import EmailPreferencesForm from './components/EmailPreferencesForm';
|
|
import FollowTags from './components/FollowTags';
|
|
import FollowUsers from './components/FollowUsers';
|
|
import ProfileForm from './components/ProfileForm';
|
|
|
|
export default class Onboarding extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
const url = new URL(window.location);
|
|
const previousLocation = url.searchParams.get('referrer');
|
|
|
|
const slides = [
|
|
IntroSlide,
|
|
FollowTags,
|
|
ProfileForm,
|
|
FollowUsers,
|
|
EmailPreferencesForm,
|
|
];
|
|
|
|
this.nextSlide = this.nextSlide.bind(this);
|
|
this.prevSlide = this.prevSlide.bind(this);
|
|
this.slidesCount = slides.length;
|
|
|
|
this.state = {
|
|
currentSlide: 0,
|
|
};
|
|
|
|
this.slides = slides.map((SlideComponent, index) => (
|
|
<SlideComponent
|
|
next={this.nextSlide}
|
|
prev={this.prevSlide}
|
|
slidesCount={this.slidesCount}
|
|
currentSlideIndex={index}
|
|
communityConfig={props.communityConfig}
|
|
previousLocation={previousLocation}
|
|
/>
|
|
));
|
|
}
|
|
|
|
nextSlide() {
|
|
const { currentSlide } = this.state;
|
|
const nextSlide = currentSlide + 1;
|
|
if (nextSlide < this.slides.length) {
|
|
this.setState({
|
|
currentSlide: nextSlide,
|
|
});
|
|
} else {
|
|
// Redirect to the main feed at the end of onboarding.
|
|
window.location.href = '/';
|
|
}
|
|
}
|
|
|
|
prevSlide() {
|
|
const { currentSlide } = this.state;
|
|
const prevSlide = currentSlide - 1;
|
|
if (prevSlide >= 0) {
|
|
this.setState({
|
|
currentSlide: prevSlide,
|
|
});
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { currentSlide } = this.state;
|
|
const { communityConfig } = this.props;
|
|
return <main className="onboarding-body" style={communityConfig.communityBackground && {backgroundImage: `url(${communityConfig.communityBackground})`}}>{this.slides[currentSlide]}</main>;
|
|
}
|
|
}
|
|
|
|
Onboarding.propTypes = {
|
|
communityConfig: PropTypes.shape({
|
|
communityName: PropTypes.string.isRequired,
|
|
communityBackground: PropTypes.string.isRequired,
|
|
communityLogo: PropTypes.string.isRequired,
|
|
communityDescription: PropTypes.string.isRequired
|
|
}).isRequired
|
|
};
|