2020-03-27 13:59:38 -07:00
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2020-04-14 14:37:17 -07:00
|
|
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
2020-04-10 17:32:16 -07:00
|
|
|
import { Link, NavLink, withRouter } from 'react-router-dom';
|
2020-06-06 12:57:05 -07:00
|
|
|
import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
|
2020-03-27 13:59:38 -07:00
|
|
|
import { connect } from 'react-redux';
|
|
|
|
import classNames from 'classnames';
|
2020-12-29 18:26:26 -08:00
|
|
|
import IconWithCounter from 'soapbox/components/icon_with_counter';
|
2020-05-28 15:52:07 -07:00
|
|
|
import SearchContainer from 'soapbox/features/compose/containers/search_container';
|
2020-03-27 13:59:38 -07:00
|
|
|
import Avatar from '../../../components/avatar';
|
2021-03-23 17:06:55 -07:00
|
|
|
import ProfileDropdown from './profile_dropdown';
|
2020-03-27 13:59:38 -07:00
|
|
|
import { openModal } from '../../../actions/modal';
|
|
|
|
import { openSidebar } from '../../../actions/sidebar';
|
2020-04-28 20:00:50 -07:00
|
|
|
import Icon from '../../../components/icon';
|
2020-10-01 17:33:03 -07:00
|
|
|
import ThemeToggle from '../../ui/components/theme_toggle_container';
|
2020-08-23 13:56:18 -07:00
|
|
|
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
|
2020-08-24 15:18:53 -07:00
|
|
|
import { isStaff } from 'soapbox/utils/accounts';
|
2020-03-27 13:59:38 -07:00
|
|
|
|
2020-06-06 12:57:05 -07:00
|
|
|
const messages = defineMessages({
|
|
|
|
post: { id: 'tabs_bar.post', defaultMessage: 'Post' },
|
|
|
|
});
|
|
|
|
|
2020-03-27 13:59:38 -07:00
|
|
|
@withRouter
|
|
|
|
class TabsBar extends React.PureComponent {
|
|
|
|
|
|
|
|
static propTypes = {
|
|
|
|
intl: PropTypes.object.isRequired,
|
|
|
|
history: PropTypes.object.isRequired,
|
|
|
|
onOpenCompose: PropTypes.func,
|
|
|
|
onOpenSidebar: PropTypes.func.isRequired,
|
2020-04-14 14:37:17 -07:00
|
|
|
logo: PropTypes.string,
|
|
|
|
account: ImmutablePropTypes.map,
|
2020-12-29 18:26:26 -08:00
|
|
|
dashboardCount: PropTypes.number,
|
|
|
|
notificationCount: PropTypes.number,
|
|
|
|
chatsCount: PropTypes.number,
|
2020-03-27 13:59:38 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
state = {
|
|
|
|
collapsed: false,
|
|
|
|
}
|
|
|
|
|
|
|
|
static contextTypes = {
|
|
|
|
router: PropTypes.object,
|
|
|
|
}
|
|
|
|
|
|
|
|
setRef = ref => {
|
|
|
|
this.node = ref;
|
|
|
|
}
|
|
|
|
|
2020-09-09 12:52:27 -07:00
|
|
|
isHomeActive = (match, location) => {
|
|
|
|
const { pathname } = location;
|
|
|
|
return pathname === '/' || pathname.startsWith('/timeline/');
|
|
|
|
}
|
|
|
|
|
2020-04-10 17:32:16 -07:00
|
|
|
getNavLinks() {
|
2020-12-29 18:26:26 -08:00
|
|
|
const { intl: { formatMessage }, logo, account, dashboardCount, notificationCount, chatsCount } = this.props;
|
2020-04-01 16:10:48 -07:00
|
|
|
let links = [];
|
|
|
|
if (logo) {
|
|
|
|
links.push(
|
2020-04-28 22:36:25 -07:00
|
|
|
<Link key='logo' className='tabs-bar__link--logo' to='/' data-preview-title-id='column.home'>
|
|
|
|
<img alt='Logo' src={logo} />
|
2020-06-04 16:11:24 -07:00
|
|
|
<span><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></span>
|
2020-04-14 11:44:40 -07:00
|
|
|
</Link>);
|
2020-04-01 16:10:48 -07:00
|
|
|
}
|
|
|
|
links.push(
|
2020-09-09 12:52:27 -07:00
|
|
|
<NavLink key='home' className='tabs-bar__link' exact to='/' data-preview-title-id='column.home' isActive={this.isHomeActive}>
|
2020-04-28 20:00:50 -07:00
|
|
|
<Icon id='home' />
|
2020-06-04 16:11:24 -07:00
|
|
|
<span><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></span>
|
2020-04-14 11:44:40 -07:00
|
|
|
</NavLink>);
|
2020-04-10 17:32:16 -07:00
|
|
|
if (account) {
|
|
|
|
links.push(
|
|
|
|
<NavLink key='notifications' className='tabs-bar__link' to='/notifications' data-preview-title-id='column.notifications'>
|
2020-12-29 18:26:26 -08:00
|
|
|
<IconWithCounter icon='bell' count={notificationCount} />
|
2020-06-04 16:11:24 -07:00
|
|
|
<span><FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></span>
|
2020-04-14 11:44:40 -07:00
|
|
|
</NavLink>);
|
2020-04-10 17:32:16 -07:00
|
|
|
}
|
2020-08-28 13:22:33 -07:00
|
|
|
if (account) {
|
|
|
|
links.push(
|
|
|
|
<NavLink key='chats' className='tabs-bar__link tabs-bar__link--chats' to='/chats' data-preview-title-id='column.chats'>
|
2020-12-29 18:26:26 -08:00
|
|
|
<IconWithCounter icon='comment' count={chatsCount} />
|
2020-08-28 13:22:33 -07:00
|
|
|
<span><FormattedMessage id='tabs_bar.chats' defaultMessage='Chats' /></span>
|
|
|
|
</NavLink>);
|
|
|
|
}
|
2020-08-24 15:18:53 -07:00
|
|
|
if (account && isStaff(account)) {
|
|
|
|
links.push(
|
2020-12-29 18:26:26 -08:00
|
|
|
<NavLink key='dashboard' className='tabs-bar__link' to='/admin' data-preview-title-id='tabs_bar.dashboard'>
|
|
|
|
<IconWithCounter icon='tachometer' count={dashboardCount} />
|
|
|
|
<span><FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' /></span>
|
|
|
|
</NavLink>);
|
2020-08-24 15:18:53 -07:00
|
|
|
}
|
2020-04-10 17:32:16 -07:00
|
|
|
links.push(
|
|
|
|
<NavLink key='search' className='tabs-bar__link tabs-bar__link--search' to='/search' data-preview-title-id='tabs_bar.search'>
|
2020-04-28 20:00:50 -07:00
|
|
|
<Icon id='search' />
|
2020-06-04 16:11:24 -07:00
|
|
|
<span><FormattedMessage id='tabs_bar.search' defaultMessage='Search' /></span>
|
2020-10-07 11:08:36 -07:00
|
|
|
</NavLink>,
|
2020-04-01 16:10:48 -07:00
|
|
|
);
|
|
|
|
return links.map((link) =>
|
|
|
|
React.cloneElement(link, {
|
|
|
|
'aria-label': formatMessage({
|
2020-04-14 11:44:40 -07:00
|
|
|
id: link.props['data-preview-title-id'],
|
|
|
|
}),
|
|
|
|
}));
|
2020-04-01 16:10:48 -07:00
|
|
|
}
|
|
|
|
|
2020-04-14 14:47:35 -07:00
|
|
|
render() {
|
2020-07-19 17:44:17 -07:00
|
|
|
const { account, onOpenCompose, onOpenSidebar, intl } = this.props;
|
2020-07-11 13:22:39 -07:00
|
|
|
const { collapsed } = this.state;
|
2020-03-27 13:59:38 -07:00
|
|
|
|
|
|
|
const classes = classNames('tabs-bar', {
|
|
|
|
'tabs-bar--collapsed': collapsed,
|
2020-04-14 11:44:40 -07:00
|
|
|
});
|
2020-03-27 13:59:38 -07:00
|
|
|
|
|
|
|
return (
|
|
|
|
<nav className={classes} ref={this.setRef}>
|
|
|
|
<div className='tabs-bar__container'>
|
|
|
|
<div className='tabs-bar__split tabs-bar__split--left'>
|
2020-04-10 17:32:16 -07:00
|
|
|
{this.getNavLinks()}
|
2020-03-27 13:59:38 -07:00
|
|
|
</div>
|
|
|
|
<div className='tabs-bar__split tabs-bar__split--right'>
|
|
|
|
<div className='tabs-bar__search-container'>
|
|
|
|
<SearchContainer openInRoute />
|
|
|
|
</div>
|
|
|
|
{ account &&
|
2020-07-20 13:34:54 -07:00
|
|
|
<>
|
2020-07-19 17:44:17 -07:00
|
|
|
<ThemeToggle />
|
2020-03-27 13:59:38 -07:00
|
|
|
<div className='tabs-bar__profile'>
|
|
|
|
<Avatar account={account} />
|
2020-04-14 11:44:40 -07:00
|
|
|
<button className='tabs-bar__sidebar-btn' onClick={onOpenSidebar} />
|
2021-03-23 17:06:55 -07:00
|
|
|
<ProfileDropdown account={account} size={34} />
|
2020-03-27 13:59:38 -07:00
|
|
|
</div>
|
2020-06-06 12:57:05 -07:00
|
|
|
<button className='tabs-bar__button-compose button' onClick={onOpenCompose} aria-label={intl.formatMessage(messages.post)}>
|
|
|
|
<span>{intl.formatMessage(messages.post)}</span>
|
2020-03-27 13:59:38 -07:00
|
|
|
</button>
|
2020-07-20 13:34:54 -07:00
|
|
|
</>
|
2020-03-27 13:59:38 -07:00
|
|
|
}
|
|
|
|
{
|
|
|
|
!account &&
|
|
|
|
<div className='flex'>
|
2020-04-10 17:32:16 -07:00
|
|
|
<Link className='tabs-bar__button button' to='/auth/sign_in'>
|
2020-03-27 13:59:38 -07:00
|
|
|
<FormattedMessage id='account.login' defaultMessage='Log In' />
|
2020-04-10 17:32:16 -07:00
|
|
|
</Link>
|
2020-06-07 14:55:28 -07:00
|
|
|
<Link className='tabs-bar__button button button-alternative-2' to='/'>
|
2020-03-27 13:59:38 -07:00
|
|
|
<FormattedMessage id='account.register' defaultMessage='Sign up' />
|
2020-04-10 17:32:16 -07:00
|
|
|
</Link>
|
2020-03-27 13:59:38 -07:00
|
|
|
</div>
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</nav>
|
|
|
|
);
|
|
|
|
}
|
2020-04-14 11:44:40 -07:00
|
|
|
|
2020-03-27 13:59:38 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
const mapStateToProps = state => {
|
2020-04-01 19:20:47 -07:00
|
|
|
const me = state.get('me');
|
2020-12-31 12:29:31 -08:00
|
|
|
const reportsCount = state.getIn(['admin', 'openReports']).count();
|
2020-12-29 18:26:26 -08:00
|
|
|
const approvalCount = state.getIn(['admin', 'awaitingApproval']).count();
|
2020-03-27 13:59:38 -07:00
|
|
|
return {
|
|
|
|
account: state.getIn(['accounts', me]),
|
2020-08-23 13:56:18 -07:00
|
|
|
logo: getSoapboxConfig(state).get('logo'),
|
2020-12-29 18:26:26 -08:00
|
|
|
notificationCount: state.getIn(['notifications', 'unread']),
|
|
|
|
chatsCount: state.get('chats').reduce((acc, curr) => acc + Math.min(curr.get('unread', 0), 1), 0),
|
|
|
|
dashboardCount: reportsCount + approvalCount,
|
2020-03-27 13:59:38 -07:00
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
|
|
onOpenCompose() {
|
|
|
|
dispatch(openModal('COMPOSE'));
|
|
|
|
},
|
|
|
|
onOpenSidebar() {
|
|
|
|
dispatch(openSidebar());
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
export default injectIntl(
|
2020-10-07 11:08:36 -07:00
|
|
|
connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true },
|
2020-04-14 11:44:40 -07:00
|
|
|
)(TabsBar));
|