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' }, news: { id: 'tabs_bar.news', defaultMessage: 'News' }, more: { id: 'sidebar.more', defaultMessage: 'More' }, partners: { id: 'promo.partners', defaultMessage: 'Affiliate Partners' }, }) 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 classes = classNames('sidebar-menu__root', { 'sidebar-menu__root--visible': sidebarOpen, }); const moreIcon = moreOpen ? 'minus' : 'plus'; const moreContainerStyle = { display: moreOpen ? 'block' : 'none' }; return (
Account Info
{shortNumberFormat(account.get('followers_count'))} {intl.formatMessage(messages.followers)} {shortNumberFormat(account.get('following_count'))} {intl.formatMessage(messages.follows)}
{intl.formatMessage(messages.profile)} {intl.formatMessage(messages.news)} {intl.formatMessage(messages.partners)} {intl.formatMessage(messages.apps)} {intl.formatMessage(messages.preferences)}
{intl.formatMessage(messages.more)}
{intl.formatMessage(messages.lists)} {intl.formatMessage(messages.follow_requests)} {intl.formatMessage(messages.blocks)} {intl.formatMessage(messages.domain_blocks)} {intl.formatMessage(messages.mutes)} {intl.formatMessage(messages.filters)}
{intl.formatMessage(messages.logout)}
); } }