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