gab-social/app/javascript/gabsocial/components/sidebar_menu.js

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Link, NavLink } from 'react-router-dom';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { injectIntl, defineMessages } from 'react-intl';
import classNames from 'classnames';
import Avatar from './avatar';
import IconButton from './icon_button';
import Icon from './icon';
import DisplayName from './display_name';
import { closeSidebar } from '../actions/sidebar';
import { shortNumberFormat } from '../utils/numbers';
import { me } from '../initial_state';
import { makeGetAccount } from '../selectors';

const messages = defineMessages({
  followers: { id: 'account.followers', defaultMessage: 'Followers' },
  follows: { id: 'account.follows', defaultMessage: 'Follows' },
  profile: { id: 'account.profile', defaultMessage: 'Profile' },
  preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
  follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
  blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
  domain_blocks: { id: 'navigation_bar.domain_blocks', defaultMessage: 'Hidden domains' },
  mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
  filters: { id: 'navigation_bar.filters', defaultMessage: 'Muted words' },
  logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
  lists: { id: 'column.lists', defaultMessage: 'Lists', },
  apps: { id: 'tabs_bar.apps', defaultMessage: 'Apps' },
  more: { id: 'sidebar.more', defaultMessage: 'More' },
  pro: { id: 'promo.gab_pro', defaultMessage: 'Upgrade to GabPRO' },
  trends: { id: 'promo.trends', defaultMessage: 'Trends' },
  search: { id: 'tabs_bar.search', defaultMessage: 'Search' },
  shop: { id: 'tabs_bar.shop', defaultMessage: 'Store - Buy Merch' },
})

const mapStateToProps = state => {
  const getAccount = makeGetAccount();

  return {
    account: getAccount(state, me),
    sidebarOpen: state.get('sidebar').sidebarOpen,
  };
};

const mapDispatchToProps = (dispatch) => ({
  onClose () {
    dispatch(closeSidebar());
  },
});

export default @connect(mapStateToProps, mapDispatchToProps)
@injectIntl
class SidebarMenu extends ImmutablePureComponent {

  static propTypes = {
    intl: PropTypes.object.isRequired,
    account: ImmutablePropTypes.map,
    sidebarOpen: PropTypes.bool,
    onClose: PropTypes.func.isRequired,
  };

  state = {
    moreOpen: false,
  }

  componentDidUpdate () {
    if (!me) return;

    if (this.props.sidebarOpen) {
      document.body.classList.add('with-modals--active');
    } else {
      document.body.classList.remove('with-modals--active');
    }
  }

  toggleMore = () => {
    this.setState({
      moreOpen: !this.state.moreOpen
    });
  }

  handleSidebarClose = () => {
    this.props.onClose();
    this.setState({
      moreOpen: false,
    });
  }

  render () {
    const { sidebarOpen, intl, account } = this.props;
    const { moreOpen } = this.state;

    if (!me || !account) return null;

    const acct = account.get('acct');
    const isPro = account.get('is_pro');

    const classes = classNames('sidebar-menu__root', {
      'sidebar-menu__root--visible': sidebarOpen,
    });

    const moreIcon = moreOpen ? 'minus' : 'plus';
    const moreContainerStyle = { display: moreOpen ? 'block' : 'none' };

    return (
      <div className={classes}>
        <div className='sidebar-menu__wrapper' role='button' onClick={this.handleSidebarClose} />
        <div className='sidebar-menu'>

          <div className='sidebar-menu-header'>
            <span className='sidebar-menu-header__title'>Account Info</span>
            <IconButton title='close' onClick={this.handleSidebarClose} icon='close' className='sidebar-menu-header__btn' />
          </div>

          <div className='sidebar-menu__content'>

            <div className='sidebar-menu-profile'>
              <div className='sidebar-menu-profile__avatar'>
                <Link to={`/${acct}`} title={acct} onClick={this.handleSidebarClose}>
                  <Avatar account={account} />
                </Link>
              </div>
              <div className='sidebar-menu-profile__name'>
                <DisplayName account={account}/>
              </div>

              <div className='sidebar-menu-profile__stats'>
                <NavLink className='sidebar-menu-profile-stat' to={`/${acct}/followers`} onClick={this.handleSidebarClose} title={intl.formatNumber(account.get('followers_count'))}>
                  <strong className='sidebar-menu-profile-stat__value'>{shortNumberFormat(account.get('followers_count'))}</strong>
                  <span className='sidebar-menu-profile-stat__label'>{intl.formatMessage(messages.followers)}</span>
                </NavLink>
                <NavLink className='sidebar-menu-profile-stat' to={`/${acct}/following`} onClick={this.handleSidebarClose} title={intl.formatNumber(account.get('following_count'))}>
                  <strong className='sidebar-menu-profile-stat__value'>{shortNumberFormat(account.get('following_count'))}</strong>
                  <span className='sidebar-menu-profile-stat__label'>{intl.formatMessage(messages.follows)}</span>
                </NavLink>
              </div>

            </div>

            <div className='sidebar-menu__section sidebar-menu__section--borderless'>
              <NavLink className='sidebar-menu-item' to={`/${acct}`} onClick={this.handleSidebarClose}>
                <Icon id='user' fixedWidth />
                <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.profile)}</span>
              </NavLink>
              {
                !isPro &&
                <a className='sidebar-menu-item' href='https://pro.gab.com'>
                  <Icon id='arrow-up' fixedWidth />
                  <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.pro)}</span>
                </a>
              }
                <a className='sidebar-menu-item' href='https://shop.dissenter.com'>
                  <Icon id='shopping-cart' fixedWidth />
                  <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.shop)}</span>
                </a>
              <a className='sidebar-menu-item' href='https://trends.gab.com'>
                <Icon id='signal' fixedWidth />
                <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.trends)}</span>
              </a>
              <NavLink className='sidebar-menu-item' to='/search' onClick={this.handleSidebarClose}>
                <Icon id='search' fixedWidth />
                <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.search)}</span>
              </NavLink>
              <a className='sidebar-menu-item' href='https://apps.gab.com'>
                <Icon id='th' fixedWidth />
                <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.apps)}</span>
              </a>
              <a className='sidebar-menu-item' href='/settings/preferences'>
                <Icon id='cog' fixedWidth />
                <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.preferences)}</span>
              </a>
            </div>

            <div className='sidebar-menu__section'>
              <div className='sidebar-menu-item' onClick={this.toggleMore} role='button'>
                <Icon id={moreIcon} fixedWidth />
                <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.more)}</span>
              </div>
              <div style={moreContainerStyle}>
                <NavLink className='sidebar-menu-item' to='/lists' onClick={this.handleSidebarClose}>
                  <Icon id='list' fixedWidth />
                  <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.lists)}</span>
                </NavLink>
                <NavLink className='sidebar-menu-item' to='/follow_requests' onClick={this.handleSidebarClose}>
                  <Icon id='user-plus' fixedWidth />
                  <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.follow_requests)}</span>
                </NavLink>
                <NavLink className='sidebar-menu-item' to='/blocks' onClick={this.handleSidebarClose}>
                  <Icon id='ban' fixedWidth />
                  <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.blocks)}</span>
                </NavLink>
                <NavLink className='sidebar-menu-item' to='/domain_blocks' onClick={this.handleSidebarClose}>
                  <Icon id='sitemap' fixedWidth />
                  <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.domain_blocks)}</span>
                </NavLink>
                <NavLink className='sidebar-menu-item' to='/mutes' onClick={this.handleSidebarClose}>
                  <Icon id='times-circle' fixedWidth />
                  <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.mutes)}</span>
                </NavLink>
                <a className='sidebar-menu-item' href='/filters'>
                  <Icon id='filter' fixedWidth />
                  <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.filters)}</span>
                </a>
              </div>
            </div>

            <div className='sidebar-menu__section'>
              <a className='sidebar-menu-item' href='/auth/sign_out' data-method='delete'>
                <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.logout)}</span>
              </a>
            </div>

          </div>
        </div>
      </div>
    );
  }

}