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 });
  35
  36 const mapStateToProps = state => ({
  37   myAccount: state.getIn(['accounts', me]),
  38   unreadFollowRequests: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size,
  39 });
  40
  41 const mapDispatchToProps = dispatch => ({
  42   fetchFollowRequests: () => dispatch(fetchFollowRequests()),
  43 });
  44
  45 const badgeDisplay = (number, limit) => {
  46   if (number === 0) {
  47     return undefined;
  48   } else if (limit && number >= limit) {
  49     return `${limit}+`;
  50   } else {
  51     return number;
  52   }
  53 };
  54
  55 @connect(mapStateToProps, mapDispatchToProps)
  56 @injectIntl
  57 export default class GettingStarted extends ImmutablePureComponent {
  58
  59   static propTypes = {
  60     intl: PropTypes.object.isRequired,
  61     myAccount: ImmutablePropTypes.map.isRequired,
  62     columns: ImmutablePropTypes.list,
  63     multiColumn: PropTypes.bool,
  64     fetchFollowRequests: PropTypes.func.isRequired,
  65     unreadFollowRequests: PropTypes.number,
  66     unreadNotifications: PropTypes.number,
  67   };
  68
  69   componentDidMount () {
  70     const { myAccount, fetchFollowRequests } = this.props;
  71
  72     if (myAccount.get('locked')) {
  73       fetchFollowRequests();
  74     }
  75   }
  76
  77   render () {
  78     const { intl, myAccount, multiColumn, unreadFollowRequests } = this.props;
  79
  80     const navItems = [];
  81     let i = 1;
  82     let height = (multiColumn) ? 0 : 60;
  83
  84     if (multiColumn) {
  85       navItems.push(
  86         <ColumnSubheading key={i++} text={intl.formatMessage(messages.discover)} />,
  87         <ColumnLink key={i++} icon='users' text={intl.formatMessage(messages.community_timeline)} to='/timelines/public/local' />,
  88         <ColumnLink key={i++} icon='globe' text={intl.formatMessage(messages.public_timeline)} to='/timelines/public' />,
  89         <ColumnSubheading key={i++} text={intl.formatMessage(messages.personal)} />
  90       );
  91
  92       height += 34*2 + 48*2;
  93     }
  94
  95     navItems.push(
  96       <ColumnLink key={i++} icon='envelope' text={intl.formatMessage(messages.direct)} to='/timelines/direct' />,
  97       <ColumnLink key={i++} icon='star' text={intl.formatMessage(messages.favourites)} to='/favourites' />,
  98       <ColumnLink key={i++} icon='list-ul' text={intl.formatMessage(messages.lists)} to='/lists' />
  99     );
 100
 101     height += 48*3;
 102
 103     if (myAccount.get('locked')) {
 104       navItems.push(<ColumnLink key={i++} icon='users' text={intl.formatMessage(messages.follow_requests)} badge={badgeDisplay(unreadFollowRequests, 40)} to='/follow_requests' />);
 105       height += 48;
 106     }
 107
 108     if (!multiColumn) {
 109       navItems.push(
 110         <ColumnSubheading key={i++} text={intl.formatMessage(messages.settings_subheading)} />,
 111         <ColumnLink key={i++} icon='gears' text={intl.formatMessage(messages.preferences)} href='/settings/preferences' />,
 112       );
 113
 114       height += 34 + 48;
 115     }
 116
 117     return (
 118       <Column>
 119         {multiColumn && <div className='column-header__wrapper'>
 120           <h1 className='column-header'>
 121             <button>
 122               <i className='fa fa-bars fa-fw column-header__icon' />
 123               <FormattedMessage id='getting_started.heading' defaultMessage='Getting started' />
 124             </button>
 125           </h1>
 126         </div>}
 127
 128         <div className='getting-started__wrapper' style={{ height }}>
 129           {!multiColumn && <NavigationBar account={myAccount} />}
 130           {navItems}
 131         </div>
 132
 133         {!multiColumn && <div className='flex-spacer' />}
 134
 135         <div className='getting-started getting-started__footer'>
 136           <ul>
 137             <li><a href='https://bridge.joinmastodon.org/' target='_blank'><FormattedMessage id='getting_started.find_friends' defaultMessage='Find friends from Twitter' /></a> · </li>
 138             {invitesEnabled && <li><a href='/invites' target='_blank'><FormattedMessage id='getting_started.invite' defaultMessage='Invite people' /></a> · </li>}
 139             {multiColumn && <li><Link to='/keyboard-shortcuts'><FormattedMessage id='navigation_bar.keyboard_shortcuts' defaultMessage='Hotkeys' /></Link> · </li>}
 140             <li><a href='/auth/edit'><FormattedMessage id='getting_started.security' defaultMessage='Security' /></a> · </li>
 141             <li><a href='/about/more' target='_blank'><FormattedMessage id='navigation_bar.info' defaultMessage='About this instance' /></a> · </li>
 142             <li><a href='https://joinmastodon.org/apps' target='_blank'><FormattedMessage id='navigation_bar.apps' defaultMessage='Mobile apps' /></a> · </li>
 143             <li><a href='/terms' target='_blank'><FormattedMessage id='getting_started.terms' defaultMessage='Terms of service' /></a> · </li>
 144             <li><a href='/settings/applications' target='_blank'><FormattedMessage id='getting_started.developers' defaultMessage='Developers' /></a> · </li>
 145             <li><a href='https://github.com/tootsuite/documentation#documentation' target='_blank'><FormattedMessage id='getting_started.documentation' defaultMessage='Documentation' /></a> · </li>
 146             <li><a href='/auth/sign_out' data-method='delete'><FormattedMessage id='navigation_bar.logout' defaultMessage='Logout' /></a></li>
 147           </ul>
 148
 149           <p>
 150             <FormattedMessage
 151               id='getting_started.open_source_notice'
 152               defaultMessage='Mastodon is open source software. You can contribute or report issues on GitHub at {github}.'
 153               values={{ github: <span><a href='https://github.com/tootsuite/mastodon' rel='noopener' target='_blank'>tootsuite/mastodon</a> (v{version})</span> }}
 154             />
 155           </p>
 156         </div>
 157       </Column>
 158     );
 159   }
 160
 161 }