diff --git a/app/javascript/flavours/glitch/features/ui/components/column_link.jsx b/app/javascript/flavours/glitch/features/ui/components/column_link.jsx index f42ff5a6e6..4445435309 100644 --- a/app/javascript/flavours/glitch/features/ui/components/column_link.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/column_link.jsx @@ -1,27 +1,30 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; -import { NavLink } from 'react-router-dom'; +import { useRouteMatch, NavLink } from 'react-router-dom'; import { Icon } from 'flavours/glitch/components/icon'; -const ColumnLink = ({ icon, iconComponent, text, to, onClick, href, method, badge, transparent, ...other }) => { +const ColumnLink = ({ icon, activeIcon, iconComponent, activeIconComponent, text, to, onClick, href, method, badge, transparent, ...other }) => { + const match = useRouteMatch(to); const className = classNames('column-link', { 'column-link--transparent': transparent }); const badgeElement = typeof badge !== 'undefined' ? {badge} : null; const iconElement = (typeof icon === 'string' || iconComponent) ? : icon; + const activeIconElement = activeIcon ?? (activeIconComponent ? : iconElement); + const active = match?.isExact; if (href) { return ( - {iconElement} + {active ? activeIconElement : iconElement} {text} {badgeElement} ); } else if (to) { return ( - - {iconElement} + + {active ? activeIconElement : iconElement} {text} {badgeElement} @@ -46,6 +49,8 @@ const ColumnLink = ({ icon, iconComponent, text, to, onClick, href, method, badg ColumnLink.propTypes = { icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired, iconComponent: PropTypes.func, + activeIcon: PropTypes.node, + activeIconComponent: PropTypes.func, text: PropTypes.string.isRequired, to: PropTypes.string, onClick: PropTypes.func, diff --git a/app/javascript/flavours/glitch/features/ui/components/follow_requests_column_link.jsx b/app/javascript/flavours/glitch/features/ui/components/follow_requests_column_link.jsx deleted file mode 100644 index 24fd5b6442..0000000000 --- a/app/javascript/flavours/glitch/features/ui/components/follow_requests_column_link.jsx +++ /dev/null @@ -1,55 +0,0 @@ -import PropTypes from 'prop-types'; -import { Component } from 'react'; - -import { injectIntl, defineMessages } from 'react-intl'; - -import { List as ImmutableList } from 'immutable'; -import { connect } from 'react-redux'; - -import PersonAddIcon from '@/material-icons/400-24px/person_add.svg?react'; -import { fetchFollowRequests } from 'flavours/glitch/actions/accounts'; -import { IconWithBadge } from 'flavours/glitch/components/icon_with_badge'; -import ColumnLink from 'flavours/glitch/features/ui/components/column_link'; - -const messages = defineMessages({ - text: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' }, -}); - -const mapStateToProps = state => ({ - count: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size, -}); - -class FollowRequestsColumnLink extends Component { - - static propTypes = { - dispatch: PropTypes.func.isRequired, - count: PropTypes.number.isRequired, - intl: PropTypes.object.isRequired, - }; - - componentDidMount () { - const { dispatch } = this.props; - - dispatch(fetchFollowRequests()); - } - - render () { - const { count, intl } = this.props; - - if (count === 0) { - return null; - } - - return ( - } - text={intl.formatMessage(messages.text)} - /> - ); - } - -} - -export default injectIntl(connect(mapStateToProps)(FollowRequestsColumnLink)); diff --git a/app/javascript/flavours/glitch/features/ui/components/list_panel.jsx b/app/javascript/flavours/glitch/features/ui/components/list_panel.jsx index 1baedfb8b0..2eba2bdbe2 100644 --- a/app/javascript/flavours/glitch/features/ui/components/list_panel.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/list_panel.jsx @@ -1,10 +1,9 @@ -import PropTypes from 'prop-types'; +import { useEffect } from 'react'; import { createSelector } from '@reduxjs/toolkit'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import ImmutablePureComponent from 'react-immutable-pure-component'; -import { connect } from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; +import ListAltActiveIcon from '@/material-icons/400-24px/list_alt-fill.svg?react'; import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react'; import { fetchLists } from 'flavours/glitch/actions/lists'; @@ -18,40 +17,25 @@ const getOrderedLists = createSelector([state => state.get('lists')], lists => { return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title'))).take(4); }); -const mapStateToProps = state => ({ - lists: getOrderedLists(state), -}); +export const ListPanel = () => { + const dispatch = useDispatch(); + const lists = useSelector(state => getOrderedLists(state)); -class ListPanel extends ImmutablePureComponent { - - static propTypes = { - dispatch: PropTypes.func.isRequired, - lists: ImmutablePropTypes.list, - }; - - componentDidMount () { - const { dispatch } = this.props; + useEffect(() => { dispatch(fetchLists()); + }, [dispatch]); + + if (!lists || lists.isEmpty()) { + return null; } - render () { - const { lists } = this.props; + return ( +
+
- if (!lists || lists.isEmpty()) { - return null; - } - - return ( -
-
- - {lists.map(list => ( - - ))} -
- ); - } - -} - -export default connect(mapStateToProps)(ListPanel); + {lists.map(list => ( + + ))} +
+ ); +}; diff --git a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.jsx b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.jsx index a6c91a3d44..8ee848e419 100644 --- a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.jsx @@ -1,19 +1,33 @@ import PropTypes from 'prop-types'; -import { Component } from 'react'; +import { Component, useEffect } from 'react'; -import { defineMessages, injectIntl } from 'react-intl'; +import { defineMessages, injectIntl, useIntl } from 'react-intl'; -import BookmarksIcon from '@/material-icons/400-24px/bookmarks-fill.svg?react'; +import { useSelector, useDispatch } from 'react-redux'; + + +import BookmarksActiveIcon from '@/material-icons/400-24px/bookmarks-fill.svg?react'; +import BookmarksIcon from '@/material-icons/400-24px/bookmarks.svg?react'; import ExploreIcon from '@/material-icons/400-24px/explore.svg?react'; -import HomeIcon from '@/material-icons/400-24px/home-fill.svg?react'; +import HomeActiveIcon from '@/material-icons/400-24px/home-fill.svg?react'; +import HomeIcon from '@/material-icons/400-24px/home.svg?react'; +import ListAltActiveIcon from '@/material-icons/400-24px/list_alt-fill.svg?react'; import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react'; +import MailActiveIcon from '@/material-icons/400-24px/mail-fill.svg?react'; import MailIcon from '@/material-icons/400-24px/mail.svg?react'; import ManufacturingIcon from '@/material-icons/400-24px/manufacturing.svg?react'; import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react'; +import NotificationsActiveIcon from '@/material-icons/400-24px/notifications-fill.svg?react'; +import NotificationsIcon from '@/material-icons/400-24px/notifications.svg?react'; +import PersonAddActiveIcon from '@/material-icons/400-24px/person_add-fill.svg?react'; +import PersonAddIcon from '@/material-icons/400-24px/person_add.svg?react'; import PublicIcon from '@/material-icons/400-24px/public.svg?react'; import SearchIcon from '@/material-icons/400-24px/search.svg?react'; -import SettingsIcon from '@/material-icons/400-24px/settings-fill.svg?react'; -import StarIcon from '@/material-icons/400-24px/star-fill.svg?react'; +import SettingsIcon from '@/material-icons/400-24px/settings.svg?react'; +import StarActiveIcon from '@/material-icons/400-24px/star-fill.svg?react'; +import StarIcon from '@/material-icons/400-24px/star.svg?react'; +import { fetchFollowRequests } from 'flavours/glitch/actions/accounts'; +import { IconWithBadge } from 'flavours/glitch/components/icon_with_badge'; import { NavigationPortal } from 'flavours/glitch/components/navigation_portal'; import { timelinePreview, trendsEnabled } from 'flavours/glitch/initial_state'; import { transientSingleColumn } from 'flavours/glitch/is_mobile'; @@ -21,9 +35,7 @@ import { preferencesLink } from 'flavours/glitch/utils/backend_links'; import ColumnLink from './column_link'; import DisabledAccountBanner from './disabled_account_banner'; -import FollowRequestsColumnLink from './follow_requests_column_link'; -import ListPanel from './list_panel'; -import NotificationsCounterIcon from './notifications_counter_icon'; +import { ListPanel } from './list_panel'; import SignInBanner from './sign_in_banner'; const messages = defineMessages({ @@ -42,8 +54,48 @@ const messages = defineMessages({ advancedInterface: { id: 'navigation_bar.advanced_interface', defaultMessage: 'Open in advanced web interface' }, openedInClassicInterface: { id: 'navigation_bar.opened_in_classic_interface', defaultMessage: 'Posts, accounts, and other specific pages are opened by default in the classic web interface.' }, app_settings: { id: 'navigation_bar.app_settings', defaultMessage: 'App settings' }, + followRequests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' }, }); +const NotificationsLink = () => { + const count = useSelector(state => state.getIn(['local_settings', 'notifications', 'tab_badge']) ? state.getIn(['notifications', 'unread']) : 0); + const intl = useIntl(); + + return ( + } + activeIcon={} + text={intl.formatMessage(messages.notifications)} + /> + ); +}; + +const FollowRequestsLink = () => { + const count = useSelector(state => state.getIn(['user_lists', 'follow_requests', 'items'])?.size ?? 0); + const intl = useIntl(); + const dispatch = useDispatch(); + + useEffect(() => { + dispatch(fetchFollowRequests()); + }, [dispatch]); + + if (count === 0) { + return null; + } + + return ( + } + activeIcon={} + text={intl.formatMessage(messages.followRequests)} + /> + ); +}; + class NavigationPanel extends Component { static contextTypes = { @@ -84,9 +136,9 @@ class NavigationPanel extends Component { {signedIn && ( <> - - } text={intl.formatMessage(messages.notifications)} /> - + + + )} @@ -109,10 +161,10 @@ class NavigationPanel extends Component { {signedIn && ( <> - - - - + + + + diff --git a/app/javascript/flavours/glitch/features/ui/components/notifications_counter_icon.js b/app/javascript/flavours/glitch/features/ui/components/notifications_counter_icon.js deleted file mode 100644 index 0816e9660f..0000000000 --- a/app/javascript/flavours/glitch/features/ui/components/notifications_counter_icon.js +++ /dev/null @@ -1,13 +0,0 @@ -import { connect } from 'react-redux'; - -import NotificationsIcon from '@/material-icons/400-24px/notifications-fill.svg?react'; -import { IconWithBadge } from 'flavours/glitch/components/icon_with_badge'; - - -const mapStateToProps = state => ({ - count: state.getIn(['local_settings', 'notifications', 'tab_badge']) ? state.getIn(['notifications', 'unread']) : 0, - id: 'bell', - icon: NotificationsIcon, -}); - -export default connect(mapStateToProps)(IconWithBadge);