import { Fragment } from 'react' 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/onboarding' import { fetchGroups } 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 ComposeFormContainer from './compose/containers/compose_form_container' import Responsive from './ui/util/responsive_component' class SlideWelcome extends PureComponent { render() { return (
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 { static propTypes = { account: ImmutablePropTypes.map.isRequired, } 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.
) } } class SlideGroups extends ImmutablePureComponent { static propTypes = { groupIds: ImmutablePropTypes.list, } 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) => ( )) }
) } } class SlideFirstPost extends PureComponent { static propTypes = { submitted: PropTypes.bool.isRequired, onNext: PropTypes.func.isRequired, } 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.
}
) } } 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(fetchGroups('featured')), onSaveUserProfileInformation(data) { dispatch(saveUserProfileInformation(data)) }, }) export default @connect(mapStateToProps, mapDispatchToProps) class Introduction extends ImmutablePureComponent { static 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, } 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 = (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 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 pagination = pages.map((page, i) => { const btnClasses = CX({ default: 1, width10PX: 1, height10PX: 1, outlineNone: 1, circle: 1, cursorPointer: 1, bgBrandLightOpaque: i !== currentIndex, bgBrand: i === currentIndex, }) return (
  • ) }) const nextTitle = currentIndex === 3 ? 'Finish' : 'Next' return (
    {title} {title}
    { pages.map((page, i) => (
    {page}
    )) }
    { currentIndex !== 0 &&
      {pagination}
    ) } }