2022-01-10 14:17:52 -08:00
|
|
|
import classNames from 'classnames';
|
2021-09-12 16:51:39 -07:00
|
|
|
import PropTypes from 'prop-types';
|
2022-01-10 14:17:52 -08:00
|
|
|
import React from 'react';
|
2021-09-12 16:51:39 -07:00
|
|
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
2021-09-12 16:16:53 -07:00
|
|
|
import { FormattedMessage } from 'react-intl';
|
2022-01-10 14:17:52 -08:00
|
|
|
import { connect } from 'react-redux';
|
|
|
|
import { NavLink, withRouter } from 'react-router-dom';
|
2022-01-10 14:25:06 -08:00
|
|
|
|
2022-01-10 14:17:52 -08:00
|
|
|
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
|
2021-09-12 16:16:53 -07:00
|
|
|
import Icon from 'soapbox/components/icon';
|
2021-09-12 16:51:39 -07:00
|
|
|
import IconWithCounter from 'soapbox/components/icon_with_counter';
|
|
|
|
import { isStaff } from 'soapbox/utils/accounts';
|
|
|
|
import { getFeatures } from 'soapbox/utils/features';
|
2021-09-12 16:16:53 -07:00
|
|
|
|
2021-09-12 16:51:39 -07:00
|
|
|
const mapStateToProps = state => {
|
|
|
|
const me = state.get('me');
|
|
|
|
const reportsCount = state.getIn(['admin', 'openReports']).count();
|
|
|
|
const approvalCount = state.getIn(['admin', 'awaitingApproval']).count();
|
|
|
|
const instance = state.get('instance');
|
|
|
|
|
|
|
|
return {
|
|
|
|
account: state.getIn(['accounts', me]),
|
|
|
|
logo: getSoapboxConfig(state).get('logo'),
|
|
|
|
notificationCount: state.getIn(['notifications', 'unread']),
|
2021-12-12 11:45:59 -08:00
|
|
|
chatsCount: state.getIn(['chats', 'items']).reduce((acc, curr) => acc + Math.min(curr.get('unread', 0), 1), 0),
|
2021-09-12 16:51:39 -07:00
|
|
|
dashboardCount: reportsCount + approvalCount,
|
|
|
|
features: getFeatures(instance),
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
export default @withRouter
|
|
|
|
@connect(mapStateToProps)
|
2021-09-12 16:16:53 -07:00
|
|
|
class ThumbNavigation extends React.PureComponent {
|
|
|
|
|
2021-09-12 16:51:39 -07:00
|
|
|
static propTypes = {
|
|
|
|
logo: PropTypes.string,
|
|
|
|
account: ImmutablePropTypes.map,
|
|
|
|
dashboardCount: PropTypes.number,
|
|
|
|
notificationCount: PropTypes.number,
|
|
|
|
chatsCount: PropTypes.number,
|
|
|
|
features: PropTypes.object.isRequired,
|
2021-09-20 15:05:59 -07:00
|
|
|
location: PropTypes.object,
|
2021-09-12 16:51:39 -07:00
|
|
|
}
|
|
|
|
|
2021-09-12 16:16:53 -07:00
|
|
|
render() {
|
2021-09-20 16:28:55 -07:00
|
|
|
const { account, notificationCount, chatsCount, dashboardCount, location, features } = this.props;
|
2021-09-12 16:51:39 -07:00
|
|
|
|
2021-09-12 16:16:53 -07:00
|
|
|
return (
|
|
|
|
<div className='thumb-navigation'>
|
|
|
|
<NavLink to='/' exact className='thumb-navigation__link'>
|
2021-10-05 15:58:25 -07:00
|
|
|
<Icon
|
|
|
|
src={require('icons/home-square.svg')}
|
|
|
|
className={classNames('svg-icon--home', { 'svg-icon--active': location.pathname === '/' })}
|
|
|
|
/>
|
2021-09-12 16:16:53 -07:00
|
|
|
<span>
|
|
|
|
<FormattedMessage id='navigation.home' defaultMessage='Home' />
|
|
|
|
</span>
|
|
|
|
</NavLink>
|
|
|
|
|
2021-10-23 12:09:17 -07:00
|
|
|
<NavLink to='/search' className='thumb-navigation__link'>
|
|
|
|
<Icon
|
|
|
|
src={require('@tabler/icons/icons/search.svg')}
|
|
|
|
className={classNames({ 'svg-icon--active': location.pathname === '/search' })}
|
|
|
|
/>
|
|
|
|
<span>
|
|
|
|
<FormattedMessage id='navigation.search' defaultMessage='Search' />
|
|
|
|
</span>
|
|
|
|
</NavLink>
|
|
|
|
|
2021-09-12 16:51:39 -07:00
|
|
|
{account && (
|
|
|
|
<NavLink to='/notifications' className='thumb-navigation__link'>
|
2021-09-20 15:05:59 -07:00
|
|
|
<IconWithCounter
|
2021-10-05 15:49:44 -07:00
|
|
|
src={require('@tabler/icons/icons/bell.svg')}
|
|
|
|
className={classNames({
|
|
|
|
'svg-icon--active': location.pathname === '/notifications',
|
|
|
|
'svg-icon--unread': notificationCount > 0,
|
|
|
|
})}
|
2021-09-20 15:05:59 -07:00
|
|
|
count={notificationCount}
|
|
|
|
/>
|
2021-09-12 16:51:39 -07:00
|
|
|
<span>
|
|
|
|
<FormattedMessage id='navigation.notifications' defaultMessage='Notifications' />
|
|
|
|
</span>
|
|
|
|
</NavLink>
|
|
|
|
)}
|
|
|
|
|
2021-10-05 15:07:00 -07:00
|
|
|
{account && (
|
|
|
|
features.chats ? (
|
|
|
|
<NavLink to='/chats' className='thumb-navigation__link'>
|
|
|
|
<IconWithCounter
|
|
|
|
src={require('@tabler/icons/icons/messages.svg')}
|
|
|
|
className={classNames({ 'svg-icon--active': location.pathname === '/chats' })}
|
|
|
|
count={chatsCount}
|
|
|
|
/>
|
|
|
|
<span>
|
|
|
|
<FormattedMessage id='navigation.chats' defaultMessage='Chats' />
|
|
|
|
</span>
|
|
|
|
</NavLink>
|
|
|
|
) : (
|
|
|
|
<NavLink to='/messages' className='thumb-navigation__link'>
|
|
|
|
<Icon
|
|
|
|
src={require('@tabler/icons/icons/mail.svg')}
|
|
|
|
className={classNames({ 'svg-icon--active': ['/messages', '/conversations'].includes(location.pathname) })}
|
|
|
|
/>
|
|
|
|
<span>
|
|
|
|
<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />
|
|
|
|
</span>
|
|
|
|
</NavLink>
|
|
|
|
)
|
2021-09-12 16:51:39 -07:00
|
|
|
)}
|
|
|
|
|
|
|
|
{(account && isStaff(account)) && (
|
|
|
|
<NavLink key='dashboard' to='/admin' className='thumb-navigation__link'>
|
2021-09-20 15:05:59 -07:00
|
|
|
<IconWithCounter
|
|
|
|
src={location.pathname.startsWith('/admin') ? require('icons/dashboard-filled.svg') : require('@tabler/icons/icons/dashboard.svg')}
|
|
|
|
count={dashboardCount}
|
|
|
|
/>
|
2021-09-12 16:51:39 -07:00
|
|
|
<span>
|
2021-10-15 11:06:05 -07:00
|
|
|
<FormattedMessage id='navigation.dashboard' defaultMessage='Dashboard' />
|
2021-09-12 16:51:39 -07:00
|
|
|
</span>
|
|
|
|
</NavLink>
|
|
|
|
)}
|
2021-09-12 16:16:53 -07:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|