diff --git a/app/soapbox/components/icon_with_badge.js b/app/soapbox/components/icon_with_badge.js
deleted file mode 100644
index 741401982..000000000
--- a/app/soapbox/components/icon_with_badge.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { shortNumberFormat } from 'soapbox/utils/numbers';
-
-const IconWithBadge = ({ id, count, className }) => {
- if (count < 1) return null;
-
- return (
-
- {count > 0 && {shortNumberFormat(count)}}
-
- );
-};
-
-IconWithBadge.propTypes = {
- id: PropTypes.string.isRequired,
- count: PropTypes.number.isRequired,
- className: PropTypes.string,
-};
-
-export default IconWithBadge;
diff --git a/app/soapbox/features/ui/components/chats_counter_icon.js b/app/soapbox/features/ui/components/chats_counter_icon.js
deleted file mode 100644
index bb6d32907..000000000
--- a/app/soapbox/features/ui/components/chats_counter_icon.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { connect } from 'react-redux';
-import IconWithBadge from 'soapbox/components/icon_with_badge';
-
-const mapStateToProps = state => ({
- count: state.get('chats').reduce((acc, curr) => acc + Math.min(curr.get('unread', 0), 1), 0),
- id: 'comment',
-});
-
-export default connect(mapStateToProps)(IconWithBadge);
diff --git a/app/soapbox/features/ui/components/follow_requests_nav_link.js b/app/soapbox/features/ui/components/follow_requests_nav_link.js
deleted file mode 100644
index 132637fa0..000000000
--- a/app/soapbox/features/ui/components/follow_requests_nav_link.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { fetchFollowRequests } from 'soapbox/actions/accounts';
-import { connect } from 'react-redux';
-import { NavLink, withRouter } from 'react-router-dom';
-import IconWithBadge from 'soapbox/components/icon_with_badge';
-import { List as ImmutableList } from 'immutable';
-import { FormattedMessage } from 'react-intl';
-
-const mapStateToProps = state => {
- const me = state.get('me');
- return {
- locked: state.getIn(['accounts', me, 'locked']),
- count: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size,
- };
-};
-
-export default @withRouter
-@connect(mapStateToProps)
-class FollowRequestsNavLink extends React.Component {
-
- static propTypes = {
- dispatch: PropTypes.func.isRequired,
- locked: PropTypes.bool,
- count: PropTypes.number.isRequired,
- };
-
- componentDidMount() {
- const { dispatch, locked } = this.props;
-
- if (locked) {
- dispatch(fetchFollowRequests());
- }
- }
-
- render() {
- const { locked, count } = this.props;
-
- if (!locked || count === 0) {
- return null;
- }
-
- return ;
- }
-
-}
diff --git a/app/soapbox/features/ui/components/notifications_counter_icon.js b/app/soapbox/features/ui/components/notifications_counter_icon.js
deleted file mode 100644
index a2c3039cb..000000000
--- a/app/soapbox/features/ui/components/notifications_counter_icon.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { connect } from 'react-redux';
-import IconWithBadge from 'soapbox/components/icon_with_badge';
-
-const mapStateToProps = state => ({
- count: state.getIn(['notifications', 'unread']),
- id: 'bell',
-});
-
-export default connect(mapStateToProps)(IconWithBadge);
diff --git a/app/soapbox/features/ui/components/reports_counter_icon.js b/app/soapbox/features/ui/components/reports_counter_icon.js
deleted file mode 100644
index 14a121887..000000000
--- a/app/soapbox/features/ui/components/reports_counter_icon.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { connect } from 'react-redux';
-import IconWithBadge from 'soapbox/components/icon_with_badge';
-
-const mapStateToProps = state => ({
- count: state.getIn(['admin', 'open_report_count']),
- id: 'gavel',
-});
-
-export default connect(mapStateToProps)(IconWithBadge);
diff --git a/app/soapbox/features/ui/components/tabs_bar.js b/app/soapbox/features/ui/components/tabs_bar.js
index a87bf7429..013eef313 100644
--- a/app/soapbox/features/ui/components/tabs_bar.js
+++ b/app/soapbox/features/ui/components/tabs_bar.js
@@ -5,9 +5,7 @@ import { Link, NavLink, withRouter } from 'react-router-dom';
import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
import { connect } from 'react-redux';
import classNames from 'classnames';
-import NotificationsCounterIcon from './notifications_counter_icon';
-import ReportsCounterIcon from './reports_counter_icon';
-import ChatsCounterIcon from './chats_counter_icon';
+import IconWithCounter from 'soapbox/components/icon_with_counter';
import SearchContainer from 'soapbox/features/compose/containers/search_container';
import Avatar from '../../../components/avatar';
import ActionBar from 'soapbox/features/compose/components/action_bar';
@@ -32,6 +30,9 @@ class TabsBar extends React.PureComponent {
onOpenSidebar: PropTypes.func.isRequired,
logo: PropTypes.string,
account: ImmutablePropTypes.map,
+ dashboardCount: PropTypes.number,
+ notificationCount: PropTypes.number,
+ chatsCount: PropTypes.number,
}
state = {
@@ -52,7 +53,7 @@ class TabsBar extends React.PureComponent {
}
getNavLinks() {
- const { intl: { formatMessage }, logo, account } = this.props;
+ const { intl: { formatMessage }, logo, account, dashboardCount, notificationCount, chatsCount } = this.props;
let links = [];
if (logo) {
links.push(
@@ -69,26 +70,23 @@ class TabsBar extends React.PureComponent {
if (account) {
links.push(
-
-
+
);
}
if (account) {
links.push(
-
-
+
);
}
if (account && isStaff(account)) {
links.push(
-
-
-
-
- );
+
+
+
+ );
}
links.push(
@@ -156,9 +154,14 @@ class TabsBar extends React.PureComponent {
const mapStateToProps = state => {
const me = state.get('me');
+ const reportsCount = state.getIn(['admin', 'open_report_count']);
+ const approvalCount = state.getIn(['admin', 'awaitingApproval']).count();
return {
account: state.getIn(['accounts', me]),
logo: getSoapboxConfig(state).get('logo'),
+ notificationCount: state.getIn(['notifications', 'unread']),
+ chatsCount: state.get('chats').reduce((acc, curr) => acc + Math.min(curr.get('unread', 0), 1), 0),
+ dashboardCount: reportsCount + approvalCount,
};
};
diff --git a/app/soapbox/features/ui/index.js b/app/soapbox/features/ui/index.js
index 969aadc79..313f60607 100644
--- a/app/soapbox/features/ui/index.js
+++ b/app/soapbox/features/ui/index.js
@@ -16,7 +16,7 @@ import { debounce } from 'lodash';
import { uploadCompose, resetCompose } from '../../actions/compose';
import { expandHomeTimeline } from '../../actions/timelines';
import { expandNotifications } from '../../actions/notifications';
-import { fetchReports } from '../../actions/admin';
+import { fetchReports, fetchUsers } from '../../actions/admin';
import { fetchFilters } from '../../actions/filters';
import { fetchChats } from 'soapbox/actions/chats';
import { clearHeight } from '../../actions/height_cache';
@@ -462,8 +462,10 @@ class UI extends React.PureComponent {
this.props.dispatch(expandNotifications());
this.props.dispatch(fetchChats());
// this.props.dispatch(fetchGroups('member'));
- if (isStaff(account))
+ if (isStaff(account)) {
this.props.dispatch(fetchReports({ state: 'open' }));
+ this.props.dispatch(fetchUsers({ page: 1, filters: 'local,need_approval' }));
+ }
setTimeout(() => this.props.dispatch(fetchFilters()), 500);
}
diff --git a/app/styles/components/tabs-bar.scss b/app/styles/components/tabs-bar.scss
index 8553b3df6..326f688dd 100644
--- a/app/styles/components/tabs-bar.scss
+++ b/app/styles/components/tabs-bar.scss
@@ -213,6 +213,12 @@
}
}
+ .icon-with-counter__counter {
+ @media screen and (min-width: 895px) {
+ left: 5px;
+ }
+ }
+
&.optional {
display: none;
@media screen and (max-width: $nav-breakpoint-2) {
diff --git a/app/styles/ui.scss b/app/styles/ui.scss
index 0b4fa30d3..3f6637b49 100644
--- a/app/styles/ui.scss
+++ b/app/styles/ui.scss
@@ -719,9 +719,5 @@
text-align: center;
color: #fff;
background: var(--accent-color);
-
- @media screen and (max-width: 895px) {
- top: 0;
- }
}
}