Refactor TabsBar, refactor IconWithBadge, use Dashboard nav

app/soapbox/components/icon_with_badge.js

@@ -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 (
-    <i className='icon-with-badge'>
-      {count > 0 && <i className='icon-with-badge__badge'>{shortNumberFormat(count)}</i>}
-    </i>
-  );
-};
-
-IconWithBadge.propTypes = {
-  id: PropTypes.string.isRequired,
-  count: PropTypes.number.isRequired,
-  className: PropTypes.string,
-};
-
-export default IconWithBadge;

app/soapbox/features/ui/components/chats_counter_icon.js

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

app/soapbox/features/ui/components/follow_requests_nav_link.js

@@ -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 <NavLink className='column-link column-link--transparent' to='/follow_requests'><IconWithBadge className='column-link__icon' id='user-plus' count={count} /><FormattedMessage id='navigation_bar.follow_requests' defaultMessage='Follow requests' /></NavLink>;
-  }
-
-}

app/soapbox/features/ui/components/notifications_counter_icon.js

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

app/soapbox/features/ui/components/reports_counter_icon.js

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

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(
         <NavLink key='notifications' className='tabs-bar__link' to='/notifications' data-preview-title-id='column.notifications'>
-          <Icon id='bell' />
-          <NotificationsCounterIcon />
+          <IconWithCounter icon='bell' count={notificationCount} />
           <span><FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></span>
         </NavLink>);
     }
     if (account) {
       links.push(
         <NavLink key='chats' className='tabs-bar__link tabs-bar__link--chats' to='/chats' data-preview-title-id='column.chats'>
-          <Icon id='comment' />
-          <ChatsCounterIcon />
+          <IconWithCounter icon='comment' count={chatsCount} />
           <span><FormattedMessage id='tabs_bar.chats' defaultMessage='Chats' /></span>
         </NavLink>);
     }
     if (account && isStaff(account)) {
       links.push(
-        <a key='reports' className='tabs-bar__link' href='/pleroma/admin/#/reports/index' target='_blank' data-preview-title-id='tabs_bar.reports'>
-          <Icon id='gavel' />
-          <ReportsCounterIcon />
-          <span><FormattedMessage id='tabs_bar.reports' defaultMessage='Reports' /></span>
-        </a>);
+        <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>);
     }
     links.push(
       <NavLink key='search' className='tabs-bar__link tabs-bar__link--search' to='/search' data-preview-title-id='tabs_bar.search'>
@@ -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,
   };
 };
 

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);
     }

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

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