app/javascript/mastodon/features/ui/components/onboarding_modal.js

   1 import React from 'react';
   2 import { connect } from 'react-redux';
   3 import PropTypes from 'prop-types';
   4 import ImmutablePropTypes from 'react-immutable-proptypes';
   5 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
   6 import Permalink from '../../../components/permalink';
   7 import TransitionMotion from 'react-motion/lib/TransitionMotion';
   8 import spring from 'react-motion/lib/spring';
   9 import ComposeForm from '../../compose/components/compose_form';
  10 import Search from '../../compose/components/search';
  11 import NavigationBar from '../../compose/components/navigation_bar';
  12 import ColumnHeader from './column_header';
  13 import Immutable from 'immutable';
  14
  15 const noop = () => { };
  16
  17 const messages = defineMessages({
  18   home_title: { id: 'column.home', defaultMessage: 'Home' },
  19   notifications_title: { id: 'column.notifications', defaultMessage: 'Notifications' },
  20   local_title: { id: 'column.community', defaultMessage: 'Local timeline' },
  21   federated_title: { id: 'column.public', defaultMessage: 'Federated timeline' },
  22 });
  23
  24 const PageOne = ({ acct, domain }) => (
  25   <div className='onboarding-modal__page onboarding-modal__page-one'>
  26     <div style={{ flex: '0 0 auto' }}>
  27       <div className='onboarding-modal__page-one__elephant-friend' />
  28     </div>
  29
  30     <div>
  31       <h1><FormattedMessage id='onboarding.page_one.welcome' defaultMessage='Welcome to Mastodon!' /></h1>
  32       <p><FormattedMessage id='onboarding.page_one.federation' defaultMessage='Mastodon is a network of independent servers joining up to make one larger social network. We call these servers instances.' /></p>
  33       <p><FormattedMessage id='onboarding.page_one.handle' defaultMessage='You are on {domain}, so your full handle is {handle}' values={{ domain, handle: <strong>{acct}@{domain}</strong> }}/></p>
  34     </div>
  35   </div>
  36 );
  37
  38 PageOne.propTypes = {
  39   acct: PropTypes.string.isRequired,
  40   domain: PropTypes.string.isRequired,
  41 };
  42
  43 const PageTwo = ({ me }) => (
  44   <div className='onboarding-modal__page onboarding-modal__page-two'>
  45     <div className='figure non-interactive'>
  46       <div className='pseudo-drawer'>
  47         <NavigationBar account={me} />
  48       </div>
  49       <ComposeForm
  50         text='Awoo! #introductions'
  51         suggestions={Immutable.List()}
  52         mentionedDomains={[]}
  53         spoiler={false}
  54         onChange={noop}
  55         onSubmit={noop}
  56         onPaste={noop}
  57         onPickEmoji={noop}
  58         onChangeSpoilerText={noop}
  59         onClearSuggestions={noop}
  60         onFetchSuggestions={noop}
  61         onSuggestionSelected={noop}
  62       />
  63     </div>
  64
  65     <p><FormattedMessage id='onboarding.page_two.compose' defaultMessage='Write posts from the compose column. You can upload images, change privacy settings, and add content warnings with the icons below.' /></p>
  66   </div>
  67 );
  68
  69 PageTwo.propTypes = {
  70   me: ImmutablePropTypes.map.isRequired,
  71 };
  72
  73 const PageThree = ({ me, domain }) => (
  74   <div className='onboarding-modal__page onboarding-modal__page-three'>
  75     <div className='figure non-interactive'>
  76       <Search
  77         value=''
  78         onChange={noop}
  79         onSubmit={noop}
  80         onClear={noop}
  81         onShow={noop}
  82       />
  83
  84       <div className='pseudo-drawer'>
  85         <NavigationBar account={me} />
  86       </div>
  87     </div>
  88
  89     <p><FormattedMessage id='onboarding.page_three.search' defaultMessage='Use the search bar to find people and look at hashtags, such as {illustration} and {introductions}. To look for a person who is not on this instance, use their full handle.' values={{ illustration: <Permalink to='/timelines/tag/illustration' href='/tags/illustration'>#illustration</Permalink>, introductions: <Permalink to='/timelines/tag/introductions' href='/tags/introductions'>#introductions</Permalink> }}/></p>
  90     <p><FormattedMessage id='onboarding.page_three.profile' defaultMessage='Edit your profile to change your avatar, bio, and display name. There, you will also find other preferences.' /></p>
  91   </div>
  92 );
  93
  94 PageThree.propTypes = {
  95   me: ImmutablePropTypes.map.isRequired,
  96   domain: PropTypes.string.isRequired,
  97 };
  98
  99 const PageFour = ({ domain, intl }) => (
 100   <div className='onboarding-modal__page onboarding-modal__page-four'>
 101     <div className='onboarding-modal__page-four__columns'>
 102       <div className='row'>
 103         <div>
 104           <div className='figure non-interactive'><ColumnHeader icon='home' type={intl.formatMessage(messages.home_title)} /></div>
 105           <p><FormattedMessage id='onboarding.page_four.home' defaultMessage='The home timeline shows posts from people you follow.'/></p>
 106         </div>
 107
 108         <div>
 109           <div className='figure non-interactive'><ColumnHeader icon='bell' type={intl.formatMessage(messages.notifications_title)} /></div>
 110           <p><FormattedMessage id='onboarding.page_four.notifications' defaultMessage='The notifications column shows when someone interacts with you.' /></p>
 111         </div>
 112       </div>
 113
 114       <div className='row'>
 115         <div>
 116           <div className='figure non-interactive' style={{ marginBottom: 0 }}><ColumnHeader icon='users' type={intl.formatMessage(messages.local_title)} /></div>
 117         </div>
 118
 119         <div>
 120           <div className='figure non-interactive' style={{ marginBottom: 0 }}><ColumnHeader icon='globe' type={intl.formatMessage(messages.federated_title)} /></div>
 121         </div>
 122       </div>
 123
 124       <p><FormattedMessage id='onboarding.page_five.public_timelines' defaultMessage='The local timeline shows public posts from everyone on {domain}. The federated timeline shows public posts from everyone who people on {domain} follow. These are the Public Timelines, a great way to discover new people.' values={{ domain }} /></p>
 125     </div>
 126   </div>
 127 );
 128
 129 PageFour.propTypes = {
 130   domain: PropTypes.string.isRequired,
 131   intl: PropTypes.object.isRequired,
 132 };
 133
 134 const PageSix = ({ admin, domain }) => {
 135   let adminSection = '';
 136
 137   if (admin) {
 138     adminSection = (
 139       <p>
 140         <FormattedMessage id='onboarding.page_six.admin' defaultMessage="Your instance's admin is {admin}." values={{ admin: <Permalink href={admin.get('url')} to={`/accounts/${admin.get('id')}`}>@{admin.get('acct')}</Permalink> }} />
 141         <br />
 142         <FormattedMessage id='onboarding.page_six.read_guidelines' defaultMessage="Please read {domain}'s {guidelines}!" values={{domain, guidelines: <a href='/about/more' target='_blank'><FormattedMessage id='onboarding.page_six.guidelines' defaultMessage='community guidelines' /></a> }}/>
 143       </p>
 144     );
 145   }
 146
 147   return (
 148     <div className='onboarding-modal__page onboarding-modal__page-six'>
 149       <h1><FormattedMessage id='onboarding.page_six.almost_done' defaultMessage='Almost done...' /></h1>
 150       {adminSection}
 151       <p><FormattedMessage id='onboarding.page_six.github' defaultMessage='Mastodon is free open-source software. You can report bugs, request features, or contribute to the code on {github}.' values={{ github: <a href='https://github.com/tootsuite/mastodon' target='_blank' rel='noopener'>GitHub</a> }} /></p>
 152       <p><FormattedMessage id='onboarding.page_six.apps_available' defaultMessage='There are {apps} available for iOS, Android and other platforms.' values={{ apps: <a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/Apps.md' target='_blank' rel='noopener'><FormattedMessage id='onboarding.page_six.various_app' defaultMessage='mobile apps' /></a> }} /></p>
 153       <p><em><FormattedMessage id='onboarding.page_six.appetoot' defaultMessage='Bon Appetoot!' /></em></p>
 154     </div>
 155   );
 156 };
 157
 158 PageSix.propTypes = {
 159   admin: ImmutablePropTypes.map,
 160   domain: PropTypes.string.isRequired,
 161 };
 162
 163 const mapStateToProps = state => ({
 164   me: state.getIn(['accounts', state.getIn(['meta', 'me'])]),
 165   admin: state.getIn(['accounts', state.getIn(['meta', 'admin'])]),
 166   domain: state.getIn(['meta', 'domain']),
 167 });
 168
 169 class OnboardingModal extends React.PureComponent {
 170
 171   static propTypes = {
 172     onClose: PropTypes.func.isRequired,
 173     intl: PropTypes.object.isRequired,
 174     me: ImmutablePropTypes.map.isRequired,
 175     domain: PropTypes.string.isRequired,
 176     admin: ImmutablePropTypes.map,
 177   };
 178
 179   state = {
 180     currentIndex: 0,
 181   };
 182
 183   handleSkip = (e) => {
 184     e.preventDefault();
 185     this.props.onClose();
 186   }
 187
 188   handleDot = (e) => {
 189     const i = Number(e.currentTarget.getAttribute('data-index'));
 190     e.preventDefault();
 191     this.setState({ currentIndex: i });
 192   }
 193
 194   handleNext = (e) => {
 195     const maxNum = Number(e.currentTarget.getAttribute('data-length'));
 196     e.preventDefault();
 197
 198     if (this.state.currentIndex < maxNum - 1) {
 199       this.setState({ currentIndex: this.state.currentIndex + 1 });
 200     } else {
 201       this.props.onClose();
 202     }
 203   }
 204
 205   render () {
 206     const { me, admin, domain, intl } = this.props;
 207
 208     const pages = [
 209       <PageOne acct={me.get('acct')} domain={domain} />,
 210       <PageTwo me={me} />,
 211       <PageThree me={me} domain={domain} />,
 212       <PageFour domain={domain} intl={intl} />,
 213       <PageSix admin={admin} domain={domain} />,
 214     ];
 215
 216     const { currentIndex } = this.state;
 217     const hasMore = currentIndex < pages.length - 1;
 218
 219     let nextOrDoneBtn;
 220
 221     if(hasMore) {
 222       nextOrDoneBtn = <a href='#' data-length={pages.length} onClick={this.handleNext} className='onboarding-modal__nav onboarding-modal__next'><FormattedMessage id='onboarding.next' defaultMessage='Next' /></a>;
 223     } else {
 224       nextOrDoneBtn = <a href='#' data-length={pages.length} onClick={this.handleNext} className='onboarding-modal__nav onboarding-modal__done'><FormattedMessage id='onboarding.done' defaultMessage='Done' /></a>;
 225     }
 226
 227     const styles = pages.map((page, i) => ({
 228       key: `page-${i}`,
 229       style: { opacity: spring(i === currentIndex ? 1 : 0) },
 230     }));
 231
 232     return (
 233       <div className='modal-root__modal onboarding-modal'>
 234         <TransitionMotion styles={styles}>
 235           {interpolatedStyles =>
 236             <div className='onboarding-modal__pager'>
 237               {pages.map((page, i) =>
 238                 <div key={`page-${i}`} style={{ opacity: interpolatedStyles[i].style.opacity, pointerEvents: i === currentIndex ? 'auto' : 'none' }}>{page}</div>
 239               )}
 240             </div>
 241           }
 242         </TransitionMotion>
 243
 244         <div className='onboarding-modal__paginator'>
 245           <div>
 246             <a href='#' className='onboarding-modal__skip' onClick={this.handleSkip}><FormattedMessage id='onboarding.skip' defaultMessage='Skip' /></a>
 247           </div>
 248
 249           <div className='onboarding-modal__dots'>
 250             {pages.map((_, i) => <div key={i} role='button' tabIndex='0' data-index={i} onClick={this.handleDot} className={`onboarding-modal__dot ${i === currentIndex ? 'active' : ''}`} />)}
 251           </div>
 252
 253           <div>
 254             {nextOrDoneBtn}
 255           </div>
 256         </div>
 257       </div>
 258     );
 259   }
 260
 261 }
 262
 263 export default connect(mapStateToProps)(injectIntl(OnboardingModal));