Display number of follow requests in getting started menu, and (#6313)
if notifications column is not mounted, also display number of unread notifications there.
This commit is contained in:
parent
1287de1b83
commit
31d1485887
|
@ -8,6 +8,8 @@ import PropTypes from 'prop-types';
|
|||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { me } from '../../initial_state';
|
||||
import { fetchFollowRequests } from '../../actions/accounts';
|
||||
import { List as ImmutableList } from 'immutable';
|
||||
|
||||
const messages = defineMessages({
|
||||
heading: { id: 'getting_started.heading', defaultMessage: 'Getting started' },
|
||||
|
@ -32,9 +34,25 @@ const messages = defineMessages({
|
|||
const mapStateToProps = state => ({
|
||||
myAccount: state.getIn(['accounts', me]),
|
||||
columns: state.getIn(['settings', 'columns']),
|
||||
unreadFollowRequests: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size,
|
||||
unreadNotifications: state.getIn(['notifications', 'unread']),
|
||||
});
|
||||
|
||||
@connect(mapStateToProps)
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
fetchFollowRequests: () => dispatch(fetchFollowRequests()),
|
||||
});
|
||||
|
||||
const badgeDisplay = (number, limit) => {
|
||||
if (number === 0) {
|
||||
return undefined;
|
||||
} else if (limit && number >= limit) {
|
||||
return `${limit}+`;
|
||||
} else {
|
||||
return number;
|
||||
}
|
||||
};
|
||||
|
||||
@connect(mapStateToProps, mapDispatchToProps)
|
||||
@injectIntl
|
||||
export default class GettingStarted extends ImmutablePureComponent {
|
||||
|
||||
|
@ -43,10 +61,21 @@ export default class GettingStarted extends ImmutablePureComponent {
|
|||
myAccount: ImmutablePropTypes.map.isRequired,
|
||||
columns: ImmutablePropTypes.list,
|
||||
multiColumn: PropTypes.bool,
|
||||
fetchFollowRequests: PropTypes.func.isRequired,
|
||||
unreadFollowRequests: PropTypes.number,
|
||||
unreadNotifications: PropTypes.number,
|
||||
};
|
||||
|
||||
componentDidMount () {
|
||||
const { myAccount, fetchFollowRequests } = this.props;
|
||||
|
||||
if (myAccount.get('locked')) {
|
||||
fetchFollowRequests();
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
const { intl, myAccount, columns, multiColumn } = this.props;
|
||||
const { intl, myAccount, columns, multiColumn, unreadFollowRequests, unreadNotifications } = this.props;
|
||||
|
||||
const navItems = [];
|
||||
|
||||
|
@ -56,7 +85,7 @@ export default class GettingStarted extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
if (!columns.find(item => item.get('id') === 'NOTIFICATIONS')) {
|
||||
navItems.push(<ColumnLink key='1' icon='bell' text={intl.formatMessage(messages.notifications)} to='/notifications' />);
|
||||
navItems.push(<ColumnLink key='1' icon='bell' text={intl.formatMessage(messages.notifications)} badge={badgeDisplay(unreadNotifications)} to='/notifications' />);
|
||||
}
|
||||
|
||||
if (!columns.find(item => item.get('id') === 'COMMUNITY')) {
|
||||
|
@ -74,7 +103,7 @@ export default class GettingStarted extends ImmutablePureComponent {
|
|||
);
|
||||
|
||||
if (myAccount.get('locked')) {
|
||||
navItems.push(<ColumnLink key='6' icon='users' text={intl.formatMessage(messages.follow_requests)} to='/follow_requests' />);
|
||||
navItems.push(<ColumnLink key='6' icon='users' text={intl.formatMessage(messages.follow_requests)} badge={badgeDisplay(unreadFollowRequests, 40)} to='/follow_requests' />);
|
||||
}
|
||||
|
||||
if (multiColumn) {
|
||||
|
|
|
@ -2,12 +2,15 @@ import React from 'react';
|
|||
import PropTypes from 'prop-types';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const ColumnLink = ({ icon, text, to, href, method }) => {
|
||||
const ColumnLink = ({ icon, text, to, href, method, badge }) => {
|
||||
const badgeElement = typeof badge !== 'undefined' ? <span className='column-link__badge'>{badge}</span> : null;
|
||||
|
||||
if (href) {
|
||||
return (
|
||||
<a href={href} className='column-link' data-method={method}>
|
||||
<i className={`fa fa-fw fa-${icon} column-link__icon`} />
|
||||
{text}
|
||||
{badgeElement}
|
||||
</a>
|
||||
);
|
||||
} else {
|
||||
|
@ -15,6 +18,7 @@ const ColumnLink = ({ icon, text, to, href, method }) => {
|
|||
<Link to={to} className='column-link'>
|
||||
<i className={`fa fa-fw fa-${icon} column-link__icon`} />
|
||||
{text}
|
||||
{badgeElement}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
@ -26,6 +30,7 @@ ColumnLink.propTypes = {
|
|||
to: PropTypes.string,
|
||||
href: PropTypes.string,
|
||||
method: PropTypes.string,
|
||||
badge: PropTypes.node,
|
||||
};
|
||||
|
||||
export default ColumnLink;
|
||||
|
|
|
@ -2070,6 +2070,17 @@
|
|||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.column-link__badge {
|
||||
display: inline-block;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
line-height: 19px;
|
||||
font-weight: 500;
|
||||
background: $ui-base-color;
|
||||
padding: 4px 8px;
|
||||
margin: -6px 10px;
|
||||
}
|
||||
|
||||
.column-subheading {
|
||||
background: $ui-base-color;
|
||||
color: $ui-base-lighter-color;
|
||||
|
|
Loading…
Reference in New Issue