From 9c79ae386a32c01c257013ff9c10f05a1a34bb6c Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Tue, 12 Apr 2022 19:52:20 -0500 Subject: [PATCH 1/3] SidebarMenu: convert to tsx --- .../{sidebar_menu.js => sidebar_menu.tsx} | 78 +++++++++---------- .../reducers/{sidebar.js => sidebar.ts} | 12 ++- 2 files changed, 50 insertions(+), 40 deletions(-) rename app/soapbox/components/{sidebar_menu.js => sidebar_menu.tsx} (82%) rename app/soapbox/reducers/{sidebar.js => sidebar.ts} (50%) diff --git a/app/soapbox/components/sidebar_menu.js b/app/soapbox/components/sidebar_menu.tsx similarity index 82% rename from app/soapbox/components/sidebar_menu.js rename to app/soapbox/components/sidebar_menu.tsx index bba7d06ce..61a38a0ba 100644 --- a/app/soapbox/components/sidebar_menu.js +++ b/app/soapbox/components/sidebar_menu.tsx @@ -1,23 +1,24 @@ import classNames from 'classnames'; -import PropTypes from 'prop-types'; import React from 'react'; import { defineMessages, useIntl } from 'react-intl'; -import { useDispatch, useSelector } from 'react-redux'; +import { useDispatch } from 'react-redux'; import { Link, NavLink } from 'react-router-dom'; import { logOut, switchAccount } from 'soapbox/actions/auth'; import { fetchOwnAccounts } from 'soapbox/actions/auth'; -import { getSoapboxConfig } from 'soapbox/actions/soapbox'; import Account from 'soapbox/components/account'; import { Stack } from 'soapbox/components/ui'; import ProfileStats from 'soapbox/features/ui/components/profile_stats'; -import { getFeatures } from 'soapbox/utils/features'; +import { useAppSelector, useSoapboxConfig, useFeatures } from 'soapbox/hooks'; import { closeSidebar } from '../actions/sidebar'; import { makeGetAccount, makeGetOtherAccounts } from '../selectors'; import { HStack, Icon, IconButton, Text } from './ui'; +import type { List as ImmutableList } from 'immutable'; +import type { Account as AccountEntity } from 'soapbox/types/entities'; + const messages = defineMessages({ followers: { id: 'account.followers', defaultMessage: 'Followers' }, follows: { id: 'account.follows', defaultMessage: 'Follows' }, @@ -33,7 +34,14 @@ const messages = defineMessages({ logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' }, }); -const SidebarLink = ({ to, icon, text, onClick }) => ( +interface ISidebarLink { + to: string, + icon: string, + text: string, + onClick: React.EventHandler, +} + +const SidebarLink: React.FC = ({ to, icon, text, onClick }) => (
@@ -45,25 +53,19 @@ const SidebarLink = ({ to, icon, text, onClick }) => ( ); -SidebarLink.propTypes = { - to: PropTypes.string.isRequired, - icon: PropTypes.string.isRequired, - text: PropTypes.string.isRequired, - onClick: PropTypes.func.isRequired, -}; +const getOtherAccounts = makeGetOtherAccounts(); -const SidebarMenu = () => { +const SidebarMenu: React.FC = (): JSX.Element | null => { const intl = useIntl(); const dispatch = useDispatch(); - const logo = useSelector((state) => getSoapboxConfig(state).get('logo')); - const features = useSelector((state) => getFeatures(state.get('instance'))); + const { logo } = useSoapboxConfig(); + const features = useFeatures(); const getAccount = makeGetAccount(); - const getOtherAccounts = makeGetOtherAccounts(); - const me = useSelector((state) => state.get('me')); - const account = useSelector((state) => getAccount(state, me)); - const otherAccounts = useSelector((state) => getOtherAccounts(state)); - const sidebarOpen = useSelector((state) => state.get('sidebar').sidebarOpen); + const me = useAppSelector((state) => state.me); + const account = useAppSelector((state) => me ? getAccount(state, me) : null); + const otherAccounts: ImmutableList = useAppSelector((state) => getOtherAccounts(state)); + const sidebarOpen = useAppSelector((state) => state.sidebar.sidebarOpen); const closeButtonRef = React.useRef(null); @@ -76,25 +78,27 @@ const SidebarMenu = () => { onClose(); }; - const handleSwitchAccount = (event, account) => { - event.preventDefault(); - switchAccount(account); - dispatch(switchAccount(account.get('id'))); + const handleSwitchAccount = (account: AccountEntity): React.EventHandler => { + return (e) => { + e.preventDefault(); + switchAccount(account); + dispatch(switchAccount(account.id)); + }; }; - const onClickLogOut = (event) => { - event.preventDefault(); + const onClickLogOut: React.EventHandler = (e) => { + e.preventDefault(); dispatch(logOut(intl)); }; - const handleSwitcherClick = (e) => { + const handleSwitcherClick: React.EventHandler = (e) => { e.preventDefault(); setSwitcher((prevState) => (!prevState)); }; - const renderAccount = (account) => ( - handleSwitchAccount(event, account)} key={account.get('id')}> + const renderAccount = (account: AccountEntity) => ( + ); @@ -103,17 +107,13 @@ const SidebarMenu = () => { dispatch(fetchOwnAccounts()); }, []); - if (!account) { - return null; - } - - const acct = account.get('acct'); - const classes = classNames('sidebar-menu__root', { - 'sidebar-menu__root--visible': sidebarOpen, - }); + if (!account) return null; return ( -
+
{ - + @@ -184,7 +184,7 @@ const SidebarMenu = () => {
Date: Tue, 12 Apr 2022 20:10:47 -0500 Subject: [PATCH 2/3] Add timeline links to navigation --- app/soapbox/components/sidebar-navigation.tsx | 40 +++++++++---------- app/soapbox/components/sidebar_menu.tsx | 30 ++++++++++++-- app/soapbox/utils/features.ts | 8 ++++ 3 files changed, 54 insertions(+), 24 deletions(-) diff --git a/app/soapbox/components/sidebar-navigation.tsx b/app/soapbox/components/sidebar-navigation.tsx index 0898279f9..b15b2d72a 100644 --- a/app/soapbox/components/sidebar-navigation.tsx +++ b/app/soapbox/components/sidebar-navigation.tsx @@ -27,7 +27,7 @@ const SidebarNavigation = () => { } + text={} /> {account && ( @@ -42,7 +42,7 @@ const SidebarNavigation = () => { to='/notifications' icon={require('icons/alert.svg')} count={notificationCount} - text={} + text={} /> { /> )} - {/* {features.federating ? ( - - - {instance.title} - - ) : ( - - - - + {(features.localTimeline || features.publicTimeline) && ( +
)} - {features.federating && ( - - - - - )} */} + {features.localTimeline && ( + } + /> + )} + + {(features.publicTimeline && features.federating) && ( + } + /> + )}
{account && ( diff --git a/app/soapbox/components/sidebar_menu.tsx b/app/soapbox/components/sidebar_menu.tsx index 61a38a0ba..c31ec29db 100644 --- a/app/soapbox/components/sidebar_menu.tsx +++ b/app/soapbox/components/sidebar_menu.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import React from 'react'; -import { defineMessages, useIntl } from 'react-intl'; +import { defineMessages, useIntl, FormattedMessage } from 'react-intl'; import { useDispatch } from 'react-redux'; import { Link, NavLink } from 'react-router-dom'; @@ -37,7 +37,7 @@ const messages = defineMessages({ interface ISidebarLink { to: string, icon: string, - text: string, + text: string | JSX.Element, onClick: React.EventHandler, } @@ -62,6 +62,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => { const { logo } = useSoapboxConfig(); const features = useFeatures(); const getAccount = makeGetAccount(); + const instance = useAppSelector((state) => state.instance); const me = useAppSelector((state) => state.me); const account = useAppSelector((state) => me ? getAccount(state, me) : null); const otherAccounts: ImmutableList = useAppSelector((state) => getOtherAccounts(state)); @@ -130,7 +131,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => { {logo ? ( - Logo + Logo ): ( { + {/* TODO: make this available to everyone */} {account.staff && (