import React from 'react' import PropTypes from 'prop-types' import { connect } from 'react-redux' import ReactSwipeableViews from 'react-swipeable-views' import ImmutablePropTypes from 'react-immutable-proptypes' import ImmutablePureComponent from 'react-immutable-pure-component' import { CX, BREAKPOINT_EXTRA_SMALL, GAB_COM_INTRODUCE_YOURSELF_GROUP_ID, } from '../constants' import { me } from '../initial_state' import { saveShownOnboarding } from '../actions/settings' import { fetchGroupsByTab } from '../actions/groups' import { saveUserProfileInformation } from '../actions/user' import { makeGetAccount } from '../selectors' import Button from '../components/button' import Divider from '../components/divider' import FileInput from '../components/file_input' import GroupListItem from '../components/group_list_item' import Heading from '../components/heading' import Icon from '../components/icon' import Image from '../components/image' import Input from '../components/input' import Text from '../components/text' import Pagination from '../components/pagination' import ComposeFormContainer from './compose/containers/compose_form_container' import Responsive from './ui/util/responsive_component' const SlideWelcome = () => (
Welcome to Gab
Gab is the home of free speech online and a place where users shape their own experience.
You will discover many different ideas, people, and topics on Gab.
Follow the people you find interesting and block or mute people you don't want to associate with.
Speak freely, associate freely!
Let's get started!
) class SlidePhotos extends ImmutablePureComponent { state = { displayNameValue: this.props.account.get('display_name'), } handleCoverPhotoChange = (e) => { try { this.props.onSave({ header: e.target.files[0] }) } catch (error) { // } } handleProfilePhotoChange = (e) => { try { this.props.onSave({ avatar: e.target.files[0] }) } catch (error) { // } } handleDisplayNameChange = (value) => { this.setState({ displayNameValue: value }) } handleDisplayNameBlur = () => { this.props.onSave({ displayName: this.state.displayNameValue, }) } render() { const { displayNameValue } = this.state return (
Set your cover photo, profile photo and enter your display name so people can find you.
) } } SlidePhotos.propTypes = { account: ImmutablePropTypes.map.isRequired, } class SlideGroups extends ImmutablePureComponent { render() { const { groupIds } = this.props return (
Gab Groups are a great way to connect with people who share your interests. Please select a few groups to get started.
{ groupIds.map((groupId, i) => ( )) }
) } } SlideGroups.propTypes = { groupIds: ImmutablePropTypes.list, } class SlideFirstPost extends React.PureComponent { render() { const { submitted } = this.props return (
{ !submitted && Now let's make your very first Gab post! Please introduce yourself to the Gab community. How did you hear about Gab? What are you interested in?
} { submitted && Your gab was posted!
Welcome to our community, remember to speak freely.
}
) } } SlideFirstPost.propTypes = { submitted: PropTypes.bool.isRequired, onNext: PropTypes.func.isRequired, } class Introduction extends ImmutablePureComponent { state = { currentIndex: 0, submittedFirstPost: false, } componentDidMount() { window.addEventListener('keyup', this.handleKeyUp) this.props.onFetchFeaturedGroups() this.props.onSaveShownOnboarding() } componentDidUpdate(prevProps) { if (!this.state.submittedFirstPost && !prevProps.isSubmitting && this.props.isSubmitting) { this.setState({ submittedFirstPost: true }) } } componentWillUnmount() { window.addEventListener('keyup', this.handleKeyUp) } handleDot = (i) => { this.setState({ currentIndex: i }) } handlePrev = () => { this.setState(({ currentIndex }) => ({ currentIndex: Math.max(0, currentIndex - 1), })) } handleNext = () => { const newIndex = Math.min(this.state.currentIndex + 1, 3) this.setState({ currentIndex: newIndex, }) } handleSwipe = (index) => { this.setState({ currentIndex: index }) } handleKeyUp = ({ key }) => { switch (key) { case 'ArrowLeft': this.handlePrev() break case 'ArrowRight': this.handleNext() break } } handleOnSaveUserProfileInformation = (data) => { this.props.onSaveUserProfileInformation(data) } render() { const { account, groupIds } = this.props const { currentIndex, submittedFirstPost } = this.state const pages = [ , , , , ] const titles = [ `Welcome to Gab!`, 'Complete your profile', 'Find your people', 'Start a conversation', ] const title = titles[currentIndex] const nextTitle = currentIndex === 3 ? 'Finish' : 'Next' return (
{title} {title}
{ pages.map((page, i) => (
{page}
)) }
{ currentIndex !== 0 &&
) } } const mapStateToProps = (state) => ({ account: makeGetAccount()(state, me), groupIds: state.getIn(['group_lists', 'featured', 'items']), shownOnboarding: state.getIn(['settings', 'shownOnboarding'], false), isSubmitting: state.getIn(['compose', 'is_submitting']), }) const mapDispatchToProps = (dispatch) => ({ onSaveShownOnboarding: () => dispatch(saveShownOnboarding()), onFetchFeaturedGroups: () => dispatch(fetchGroupsByTab('featured')), onSaveUserProfileInformation(data) { dispatch(saveUserProfileInformation(data)) }, }) Introduction.propTypes = { account: ImmutablePropTypes.map.isRequired, groupIds: ImmutablePropTypes.list, isSubmitting: PropTypes.bool.isRequired, shownOnboarding: PropTypes.bool.isRequired, onSaveShownOnboarding: PropTypes.func.isRequired, onFetchFeaturedGroups: PropTypes.func.isRequired, onSaveUserProfileInformation: PropTypes.func.isRequired, } export default connect(mapStateToProps, mapDispatchToProps)(Introduction)