From eec89aaeb5617ea4d4c7c31c7b9b1d4111360f60 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Tue, 29 Dec 2020 20:26:26 -0600 Subject: [PATCH] Refactor TabsBar, refactor IconWithBadge, use Dashboard nav --- app/soapbox/components/icon_with_badge.js | 21 --------- .../ui/components/chats_counter_icon.js | 9 ---- .../ui/components/follow_requests_nav_link.js | 46 ------------------- .../components/notifications_counter_icon.js | 9 ---- .../ui/components/reports_counter_icon.js | 9 ---- .../features/ui/components/tabs_bar.js | 29 ++++++------ app/soapbox/features/ui/index.js | 6 ++- app/styles/components/tabs-bar.scss | 6 +++ app/styles/ui.scss | 4 -- 9 files changed, 26 insertions(+), 113 deletions(-) delete mode 100644 app/soapbox/components/icon_with_badge.js delete mode 100644 app/soapbox/features/ui/components/chats_counter_icon.js delete mode 100644 app/soapbox/features/ui/components/follow_requests_nav_link.js delete mode 100644 app/soapbox/features/ui/components/notifications_counter_icon.js delete mode 100644 app/soapbox/features/ui/components/reports_counter_icon.js 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; - } } }