app/javascript/mastodon/features/getting_started/index.js

   1 import React from 'react';
   2 import Column from '../ui/components/column';
   3 import ColumnLink from '../ui/components/column_link';
   4 import ColumnSubheading from '../ui/components/column_subheading';
   5 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
   6 import { connect } from 'react-redux';
   7 import PropTypes from 'prop-types';
   8 import ImmutablePropTypes from 'react-immutable-proptypes';
   9 import ImmutablePureComponent from 'react-immutable-pure-component';
  10 import { me, invitesEnabled, version } from '../../initial_state';
  11 import { fetchFollowRequests } from '../../actions/accounts';
  12 import { List as ImmutableList } from 'immutable';
  13 import { Link } from 'react-router-dom';
  14 import NavigationBar from '../compose/components/navigation_bar';
  15
  16 const messages = defineMessages({
  17   home_timeline: { id: 'tabs_bar.home', defaultMessage: 'Home' },
  18   notifications: { id: 'tabs_bar.notifications', defaultMessage: 'Notifications' },
  19   public_timeline: { id: 'navigation_bar.public_timeline', defaultMessage: 'Federated timeline' },
  20   settings_subheading: { id: 'column_subheading.settings', defaultMessage: 'Settings' },
  21   community_timeline: { id: 'navigation_bar.community_timeline', defaultMessage: 'Local timeline' },
  22   direct: { id: 'navigation_bar.direct', defaultMessage: 'Direct messages' },
  23   preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
  24   follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
  25   favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favourites' },
  26   blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
  27   domain_blocks: { id: 'navigation_bar.domain_blocks', defaultMessage: 'Hidden domains' },
  28   mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
  29   pins: { id: 'navigation_bar.pins', defaultMessage: 'Pinned toots' },
  30   lists: { id: 'navigation_bar.lists', defaultMessage: 'Lists' },
  31   discover: { id: 'navigation_bar.discover', defaultMessage: 'Discover' },
  32   personal: { id: 'navigation_bar.personal', defaultMessage: 'Personal' },
  33   security: { id: 'navigation_bar.security', defaultMessage: 'Security' },
  34   menu: { id: 'getting_started.heading', defaultMessage: 'Getting started' },
  35 });
  36
  37 const mapStateToProps = state => ({
  38   myAccount: state.getIn(['accounts', me]),
  39   unreadFollowRequests: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size,
  40 });
  41
  42 const mapDispatchToProps = dispatch => ({
  43   fetchFollowRequests: () => dispatch(fetchFollowRequests()),
  44 });
  45
  46 const badgeDisplay = (number, limit) => {
  47   if (number === 0) {
  48     return undefined;
  49   } else if (limit && number >= limit) {
  50     return `${limit}+`;
  51   } else {
  52     return number;
  53   }
  54 };
  55
  56 export default @connect(mapStateToProps, mapDispatchToProps)
  57 @injectIntl
  58 class GettingStarted extends ImmutablePureComponent {
  59
  60   static propTypes = {
  61     intl: PropTypes.object.isRequired,
  62     myAccount: ImmutablePropTypes.map.isRequired,
  63     columns: ImmutablePropTypes.list,
  64     multiColumn: PropTypes.bool,
  65     fetchFollowRequests: PropTypes.func.isRequired,
  66     unreadFollowRequests: PropTypes.number,
  67     unreadNotifications: PropTypes.number,
  68   };
  69
  70   componentDidMount () {
  71     const { myAccount, fetchFollowRequests } = this.props;
  72
  73     if (myAccount.get('locked')) {
  74       fetchFollowRequests();
  75     }
  76   }
  77
  78   render () {
  79     const { intl, myAccount, multiColumn, unreadFollowRequests } = this.props;
  80
  81     const navItems = [];
  82     let i = 1;
  83     let height = (multiColumn) ? 0 : 60;
  84
  85     if (multiColumn) {
  86       navItems.push(
  87         <ColumnSubheading key={i++} text={intl.formatMessage(messages.discover)} />,
  88         <ColumnLink key={i++} icon='users' text={intl.formatMessage(messages.community_timeline)} to='/timelines/public/local' />,
  89         <ColumnLink key={i++} icon='globe' text={intl.formatMessage(messages.public_timeline)} to='/timelines/public' />,
  90         <ColumnSubheading key={i++} text={intl.formatMessage(messages.personal)} />
  91       );
  92
  93       height += 34*2 + 48*2;
  94     }
  95
  96     navItems.push(
  97       <ColumnLink key={i++} icon='envelope' text={intl.formatMessage(messages.direct)} to='/timelines/direct' />,
  98       <ColumnLink key={i++} icon='star' text={intl.formatMessage(messages.favourites)} to='/favourites' />,
  99       <ColumnLink key={i++} icon='list-ul' text={intl.formatMessage(messages.lists)} to='/lists' />
 100     );
 101
 102     height += 48*3;
 103
 104     if (myAccount.get('locked')) {
 105       navItems.push(<ColumnLink key={i++} icon='users' text={intl.formatMessage(messages.follow_requests)} badge={badgeDisplay(unreadFollowRequests, 40)} to='/follow_requests' />);
 106       height += 48;
 107     }
 108
 109     if (!multiColumn) {
 110       navItems.push(
 111         <ColumnSubheading key={i++} text={intl.formatMessage(messages.settings_subheading)} />,
 112         <ColumnLink key={i++} icon='gears' text={intl.formatMessage(messages.preferences)} href='/settings/preferences' />,
 113       );
 114
 115       height += 34 + 48;
 116     }
 117
 118     return (
 119       <Column label={intl.formatMessage(messages.menu)}>
 120         {multiColumn && <div className='column-header__wrapper'>
 121           <h1 className='column-header'>
 122             <button>
 123               <i className='fa fa-bars fa-fw column-header__icon' />
 124               <FormattedMessage id='getting_started.heading' defaultMessage='Getting started' />
 125             </button>
 126           </h1>
 127         </div>}
 128
 129         <div className='getting-started'>
 130           <div className='getting-started__wrapper' style={{ height }}>
 131             {!multiColumn && <NavigationBar account={myAccount} />}
 132             {navItems}
 133           </div>
 134
 135           {!multiColumn && <div className='flex-spacer' />}
 136
 137           <div className='getting-started__footer'>
 138             <ul>
 139               <li><a href='https://bridge.joinmastodon.org/' target='_blank'><FormattedMessage id='getting_started.find_friends' defaultMessage='Find friends from Twitter' /></a> · </li>
 140               {invitesEnabled && <li><a href='/invites' target='_blank'><FormattedMessage id='getting_started.invite' defaultMessage='Invite people' /></a> · </li>}
 141               {multiColumn && <li><Link to='/keyboard-shortcuts'><FormattedMessage id='navigation_bar.keyboard_shortcuts' defaultMessage='Hotkeys' /></Link> · </li>}
 142               <li><a href='/auth/edit'><FormattedMessage id='getting_started.security' defaultMessage='Security' /></a> · </li>
 143               <li><a href='/about/more' target='_blank'><FormattedMessage id='navigation_bar.info' defaultMessage='About this instance' /></a> · </li>
 144               <li><a href='https://joinmastodon.org/apps' target='_blank'><FormattedMessage id='navigation_bar.apps' defaultMessage='Mobile apps' /></a> · </li>
 145               <li><a href='/terms' target='_blank'><FormattedMessage id='getting_started.terms' defaultMessage='Terms of service' /></a> · </li>
 146               <li><a href='/settings/applications' target='_blank'><FormattedMessage id='getting_started.developers' defaultMessage='Developers' /></a> · </li>
 147               <li><a href='https://github.com/tootsuite/documentation#documentation' target='_blank'><FormattedMessage id='getting_started.documentation' defaultMessage='Documentation' /></a> · </li>
 148               <li><a href='/auth/sign_out' data-method='delete'><FormattedMessage id='navigation_bar.logout' defaultMessage='Logout' /></a></li>
 149             </ul>
 150
 151             <p>
 152               <FormattedMessage
 153                 id='getting_started.open_source_notice'
 154                 defaultMessage='Mastodon is open source software. You can contribute or report issues on GitHub at {github}.'
 155                 values={{ github: <span><a href='https://github.com/tootsuite/mastodon' rel='noopener' target='_blank'>tootsuite/mastodon</a> (v{version})</span> }}
 156               />
 157             </p>
 158           </div>
 159         </div>
 160       </Column>
 161     );
 162   }
 163
 164 }