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