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:
Eugen Rochko 2018-01-21 13:20:20 +01:00 committed by GitHub
parent 1287de1b83
commit 31d1485887
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 50 additions and 5 deletions

View file

@ -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) {

View file

@ -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;

View file

@ -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;