masto-fe-archos/app/javascript/mastodon/features/onboarding/index.jsx

import PropTypes from "prop-types";

import { FormattedMessage, injectIntl, defineMessages } from "react-intl";

import { Helmet } from "react-helmet";
import { Link } from "react-router-dom";

import ImmutablePropTypes from "react-immutable-proptypes";
import ImmutablePureComponent from "react-immutable-pure-component";
import { connect } from "react-redux";

import { debounce } from "lodash";

import illustration from "mastodon/../images/elephant_ui_conversation.svg";
import { fetchAccount } from "mastodon/actions/accounts";
import { focusCompose } from "mastodon/actions/compose";
import { closeOnboarding } from "mastodon/actions/onboarding";
import Column from "mastodon/features/ui/components/column";
import { me } from "mastodon/initial_state";
import { makeGetAccount } from "mastodon/selectors";
import { assetHost } from "mastodon/utils/config";

import ArrowSmallRight from "./components/arrow_small_right";
import Step from "./components/step";
import Follows from "./follows";
import Share from "./share";

const messages = defineMessages({
  template: { id: "onboarding.compose.template", defaultMessage: "Hello #Mastodon!" },
});

const mapStateToProps = () => {
  const getAccount = makeGetAccount();

  return state => ({
    account: getAccount(state, me),
  });
};

class Onboarding extends ImmutablePureComponent {

  static contextTypes = {
    router: PropTypes.object.isRequired,
  };

  static propTypes = {
    dispatch: PropTypes.func.isRequired,
    account: ImmutablePropTypes.map,
    multiColumn: PropTypes.bool,
  };

  state = {
    step: null,
    profileClicked: false,
    shareClicked: false,
  };

  handleClose = () => {
    const { dispatch } = this.props;
    const { router } = this.context;

    dispatch(closeOnboarding());
    router.history.push("/home");
  };

  handleProfileClick = () => {
    this.setState({ profileClicked: true });
  };

  handleFollowClick = () => {
    this.setState({ step: "follows" });
  };

  handleComposeClick = () => {
    const { dispatch, intl } = this.props;
    const { router } = this.context;

    dispatch(focusCompose(router.history, intl.formatMessage(messages.template)));
  };

  handleShareClick = () => {
    this.setState({ step: "share", shareClicked: true });
  };

  handleBackClick = () => {
    this.setState({ step: null });
  };

  handleWindowFocus = debounce(() => {
    const { dispatch, account } = this.props;
    dispatch(fetchAccount(account.get("id")));
  }, 1000, { trailing: true });

  componentDidMount () {
    window.addEventListener("focus", this.handleWindowFocus, false);
  }

  componentWillUnmount () {
    window.removeEventListener("focus", this.handleWindowFocus);
  }

  render () {
    const { account, multiColumn } = this.props;
    const { step, shareClicked } = this.state;

    switch(step) {
      case "follows":
        return <Follows onBack={this.handleBackClick} multiColumn={multiColumn} />;
      case "share":
        return <Share onBack={this.handleBackClick} multiColumn={multiColumn} />;
    }

    return (
      <Column>
        <div className='scrollable privacy-policy'>
          <div className='column-title'>
            <img src={illustration} alt='' className='onboarding__illustration' />
            <h3><FormattedMessage id='onboarding.start.title' defaultMessage="You've made it!" /></h3>
            <p><FormattedMessage id='onboarding.start.lead' defaultMessage="Your new Mastodon account is ready to go. Here's how you can make the most of it:" /></p>
          </div>

          <div className='onboarding__steps'>
            <Step onClick={this.handleProfileClick} href='/settings/profile' completed={(!account.get("avatar").endsWith("missing.png")) || (account.get("display_name").length > 0 && account.get("note").length > 0)} icon='address-book-o' label={<FormattedMessage id='onboarding.steps.setup_profile.title' defaultMessage='Customize your profile' />} description={<FormattedMessage id='onboarding.steps.setup_profile.body' defaultMessage='Others are more likely to interact with you with a filled out profile.' />} />
            <Step onClick={this.handleFollowClick} completed={(account.get("following_count") * 1) >= 7} icon='user-plus' label={<FormattedMessage id='onboarding.steps.follow_people.title' defaultMessage='Find at least {count, plural, one {one person} other {# people}} to follow' values={{ count: 7 }} />} description={<FormattedMessage id='onboarding.steps.follow_people.body' defaultMessage="You curate your own home feed. Let's fill it with interesting people." />} />
            <Step onClick={this.handleComposeClick} completed={(account.get("statuses_count") * 1) >= 1} icon='pencil-square-o' label={<FormattedMessage id='onboarding.steps.publish_status.title' defaultMessage='Make your first post' />} description={<FormattedMessage id='onboarding.steps.publish_status.body' defaultMessage='Say hello to the world.' values={{ emoji: <img className='emojione' alt='🐘' src={`${assetHost}/emoji/1f418.svg`} /> }} />} />
            <Step onClick={this.handleShareClick} completed={shareClicked} icon='copy' label={<FormattedMessage id='onboarding.steps.share_profile.title' defaultMessage='Share your profile' />} description={<FormattedMessage id='onboarding.steps.share_profile.body' defaultMessage='Let your friends know how to find you on Mastodon!' />} />
          </div>

          <p className='onboarding__lead'><FormattedMessage id='onboarding.start.skip' defaultMessage="Don't need help getting started?" /></p>

          <div className='onboarding__links'>
            <Link to='/explore' className='onboarding__link'>
              <FormattedMessage id='onboarding.actions.go_to_explore' defaultMessage='Take me to trending' />
              <ArrowSmallRight />
            </Link>

            <Link to='/home' className='onboarding__link'>
              <FormattedMessage id='onboarding.actions.go_to_home' defaultMessage='Take me to my home feed' />
              <ArrowSmallRight />
            </Link>
          </div>
        </div>

        <Helmet>
          <meta name='robots' content='noindex' />
        </Helmet>
      </Column>
    );
  }

}

export default connect(mapStateToProps)(injectIntl(Onboarding));