From 1ea45f7cdb5332d9bd7e95e463ec360f5dc3fe55 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sun, 12 Sep 2021 18:51:39 -0500 Subject: [PATCH] Gut the TabsBar --- app/soapbox/components/thumb_navigation.js | 77 +++++++++++++++---- .../features/ui/components/tabs_bar.js | 75 ++---------------- app/styles/components/search.scss | 2 +- app/styles/components/tabs-bar.scss | 2 +- 4 files changed, 72 insertions(+), 84 deletions(-) diff --git a/app/soapbox/components/thumb_navigation.js b/app/soapbox/components/thumb_navigation.js index e8b1f3bb9..91e65d973 100644 --- a/app/soapbox/components/thumb_navigation.js +++ b/app/soapbox/components/thumb_navigation.js @@ -1,13 +1,47 @@ import React from 'react'; +import { connect } from 'react-redux'; +import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; import { NavLink, withRouter } from 'react-router-dom'; import { FormattedMessage } from 'react-intl'; import Icon from 'soapbox/components/icon'; +import IconWithCounter from 'soapbox/components/icon_with_counter'; +import { getSoapboxConfig } from 'soapbox/actions/soapbox'; +import { isStaff } from 'soapbox/utils/accounts'; +import { getFeatures } from 'soapbox/utils/features'; -export default -@withRouter +const mapStateToProps = state => { + const me = state.get('me'); + const reportsCount = state.getIn(['admin', 'openReports']).count(); + const approvalCount = state.getIn(['admin', 'awaitingApproval']).count(); + const instance = state.get('instance'); + + 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, + features: getFeatures(instance), + }; +}; + +export default @withRouter +@connect(mapStateToProps) class ThumbNavigation extends React.PureComponent { + static propTypes = { + logo: PropTypes.string, + account: ImmutablePropTypes.map, + dashboardCount: PropTypes.number, + notificationCount: PropTypes.number, + chatsCount: PropTypes.number, + features: PropTypes.object.isRequired, + } + render() { + const { account, dashboardCount, features } = this.props; + return (
@@ -17,6 +51,24 @@ class ThumbNavigation extends React.PureComponent { + {account && ( + + + + + + + )} + + {(features.chats && account) && ( + + + + + + + )} + @@ -24,19 +76,14 @@ class ThumbNavigation extends React.PureComponent { - - - - - - - - - - - - - + {(account && isStaff(account)) && ( + + + + + + + )}
); } diff --git a/app/soapbox/features/ui/components/tabs_bar.js b/app/soapbox/features/ui/components/tabs_bar.js index 9bb512057..48ab54a9b 100644 --- a/app/soapbox/features/ui/components/tabs_bar.js +++ b/app/soapbox/features/ui/components/tabs_bar.js @@ -1,20 +1,17 @@ import React from 'react'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; -import { Link, NavLink, withRouter } from 'react-router-dom'; +import { Link, withRouter } from 'react-router-dom'; import { FormattedMessage, injectIntl, defineMessages } from 'react-intl'; import { connect } from 'react-redux'; import classNames from 'classnames'; -import IconWithCounter from 'soapbox/components/icon_with_counter'; import SearchContainer from 'soapbox/features/compose/containers/search_container'; import Avatar from '../../../components/avatar'; import ProfileDropdown from './profile_dropdown'; import { openModal } from '../../../actions/modal'; import { openSidebar } from '../../../actions/sidebar'; -import Icon from '../../../components/icon'; import ThemeToggle from '../../ui/components/theme_toggle_container'; import { getSoapboxConfig } from 'soapbox/actions/soapbox'; -import { isStaff } from 'soapbox/utils/accounts'; import { getFeatures } from 'soapbox/utils/features'; const messages = defineMessages({ @@ -30,10 +27,6 @@ class TabsBar extends React.PureComponent { onOpenSidebar: PropTypes.func.isRequired, logo: PropTypes.string, account: ImmutablePropTypes.map, - dashboardCount: PropTypes.number, - notificationCount: PropTypes.number, - chatsCount: PropTypes.number, - features: PropTypes.object.isRequired, } state = { @@ -53,58 +46,8 @@ class TabsBar extends React.PureComponent { return pathname === '/' || pathname.startsWith('/timeline/'); } - getNavLinks() { - const { intl: { formatMessage }, logo, account, dashboardCount, notificationCount, chatsCount, features } = this.props; - const links = []; - if (logo) { - links.push( - - Logo - - ); - } - links.push( - - - - ); - if (account) { - links.push( - - - - ); - } - if (features.chats && account) { - links.push( - - - - ); - } - if (account && isStaff(account)) { - links.push( - - - - ); - } - links.push( - - - - , - ); - return links.map((link) => - React.cloneElement(link, { - 'aria-label': formatMessage({ - id: link.props['data-preview-title-id'], - }), - })); - } - render() { - const { account, onOpenCompose, onOpenSidebar, intl } = this.props; + const { account, logo, onOpenCompose, onOpenSidebar, intl } = this.props; const { collapsed } = this.state; const classes = classNames('tabs-bar', { @@ -115,7 +58,12 @@ class TabsBar extends React.PureComponent {