From 52c023a305cad2bd2d868aa3d8116bffd9b52d9e Mon Sep 17 00:00:00 2001 From: Claire Date: Sun, 14 Jan 2024 14:15:23 +0100 Subject: [PATCH] Convert `Permalink` to Typescript --- .../flavours/glitch/components/account.jsx | 2 +- .../flavours/glitch/components/hashtag.jsx | 2 +- .../flavours/glitch/components/permalink.jsx | 38 ----------------- .../flavours/glitch/components/permalink.tsx | 41 +++++++++++++++++++ .../glitch/components/status_content.jsx | 2 +- .../compose/components/navigation_bar.jsx | 2 +- .../components/conversation.jsx | 2 +- .../directory/components/account_card.jsx | 2 +- .../components/account_authorize.jsx | 2 +- .../notifications/components/admin_report.jsx | 2 +- .../notifications/components/admin_signup.jsx | 2 +- .../notifications/components/follow.jsx | 2 +- .../components/follow_request.jsx | 2 +- .../glitch/features/ui/components/header.jsx | 2 +- .../flavours/glitch/features/ui/index.jsx | 6 +-- 15 files changed, 56 insertions(+), 53 deletions(-) delete mode 100644 app/javascript/flavours/glitch/components/permalink.jsx create mode 100644 app/javascript/flavours/glitch/components/permalink.tsx diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx index 109e0daddd..266a3ca995 100644 --- a/app/javascript/flavours/glitch/components/account.jsx +++ b/app/javascript/flavours/glitch/components/account.jsx @@ -17,7 +17,7 @@ import { Avatar } from './avatar'; import { Button } from './button'; import { FollowersCounter } from './counters'; import { DisplayName } from './display_name'; -import Permalink from './permalink'; +import { Permalink } from './permalink'; import { RelativeTimestamp } from './relative_timestamp'; const messages = defineMessages({ diff --git a/app/javascript/flavours/glitch/components/hashtag.jsx b/app/javascript/flavours/glitch/components/hashtag.jsx index 956834b47a..a47dbd8e1c 100644 --- a/app/javascript/flavours/glitch/components/hashtag.jsx +++ b/app/javascript/flavours/glitch/components/hashtag.jsx @@ -13,7 +13,7 @@ import { Sparklines, SparklinesCurve } from 'react-sparklines'; import { ShortNumber } from 'flavours/glitch/components/short_number'; import { Skeleton } from 'flavours/glitch/components/skeleton'; -import Permalink from './permalink'; +import { Permalink } from './permalink'; class SilentErrorBoundary extends Component { diff --git a/app/javascript/flavours/glitch/components/permalink.jsx b/app/javascript/flavours/glitch/components/permalink.jsx deleted file mode 100644 index 4a6da125e7..0000000000 --- a/app/javascript/flavours/glitch/components/permalink.jsx +++ /dev/null @@ -1,38 +0,0 @@ -import PropTypes from 'prop-types'; -import { useCallback } from 'react'; - -import { useAppHistory } from './router'; - -const Permalink = ({ className, href, to, children, onInterceptClick, ...props }) => { - const history = useAppHistory(); - - const handleClick = useCallback((e) => { - if (e.button === 0 && !(e.ctrlKey || e.metaKey)) { - if (onInterceptClick && onInterceptClick()) { - e.preventDefault(); - return; - } - - if (history) { - e.preventDefault(); - history.push(to); - } - } - }, [onInterceptClick, history, to]); - - return ( - - {children} - - ); -}; - -Permalink.propTypes = { - className: PropTypes.string, - href: PropTypes.string.isRequired, - to: PropTypes.string.isRequired, - children: PropTypes.node, - onInterceptClick: PropTypes.func, -}; - -export default Permalink; diff --git a/app/javascript/flavours/glitch/components/permalink.tsx b/app/javascript/flavours/glitch/components/permalink.tsx new file mode 100644 index 0000000000..9068efb06d --- /dev/null +++ b/app/javascript/flavours/glitch/components/permalink.tsx @@ -0,0 +1,41 @@ +import { useCallback } from 'react'; + +import { useAppHistory } from './router'; + +interface Props extends React.AnchorHTMLAttributes { + to: string; +} + +export const Permalink: React.FC = ({ + className, + href, + to, + children, + ...props +}) => { + const history = useAppHistory(); + + const handleClick = useCallback>( + (e) => { + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- history can actually be undefined as the component can be mounted outside a router context + if (e.button === 0 && !(e.ctrlKey || e.metaKey) && history) { + e.preventDefault(); + history.push(to); + } + }, + [history, to], + ); + + return ( + + {children} + + ); +}; diff --git a/app/javascript/flavours/glitch/components/status_content.jsx b/app/javascript/flavours/glitch/components/status_content.jsx index a8e069426e..5e0a40835f 100644 --- a/app/javascript/flavours/glitch/components/status_content.jsx +++ b/app/javascript/flavours/glitch/components/status_content.jsx @@ -19,7 +19,7 @@ import { Icon } from 'flavours/glitch/components/icon'; import { autoPlayGif, languages as preloadedLanguages } from 'flavours/glitch/initial_state'; import { decode as decodeIDNA } from 'flavours/glitch/utils/idna'; -import Permalink from './permalink'; +import { Permalink } from './permalink'; const textMatchesTarget = (text, origin, host) => { return (text === origin || text === host diff --git a/app/javascript/flavours/glitch/features/compose/components/navigation_bar.jsx b/app/javascript/flavours/glitch/features/compose/components/navigation_bar.jsx index 9f88b0e92a..ca8e1222e6 100644 --- a/app/javascript/flavours/glitch/features/compose/components/navigation_bar.jsx +++ b/app/javascript/flavours/glitch/features/compose/components/navigation_bar.jsx @@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import Permalink from 'flavours/glitch/components/permalink'; +import { Permalink } from 'flavours/glitch/components/permalink'; import { profileLink } from 'flavours/glitch/utils/backend_links'; import { Avatar } from '../../../components/avatar'; diff --git a/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx b/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx index 5266a8012a..92f951e635 100644 --- a/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx +++ b/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx @@ -15,7 +15,7 @@ import { HotKeys } from 'react-hotkeys'; import AttachmentList from 'flavours/glitch/components/attachment_list'; import AvatarComposite from 'flavours/glitch/components/avatar_composite'; import { IconButton } from 'flavours/glitch/components/icon_button'; -import Permalink from 'flavours/glitch/components/permalink'; +import { Permalink } from 'flavours/glitch/components/permalink'; import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp'; import StatusContent from 'flavours/glitch/components/status_content'; import DropdownMenuContainer from 'flavours/glitch/containers/dropdown_menu_container'; diff --git a/app/javascript/flavours/glitch/features/directory/components/account_card.jsx b/app/javascript/flavours/glitch/features/directory/components/account_card.jsx index 27b363bd08..60927f81c3 100644 --- a/app/javascript/flavours/glitch/features/directory/components/account_card.jsx +++ b/app/javascript/flavours/glitch/features/directory/components/account_card.jsx @@ -19,7 +19,7 @@ import { Avatar } from 'flavours/glitch/components/avatar'; import { Button } from 'flavours/glitch/components/button'; import { DisplayName } from 'flavours/glitch/components/display_name'; import { IconButton } from 'flavours/glitch/components/icon_button'; -import Permalink from 'flavours/glitch/components/permalink'; +import { Permalink } from 'flavours/glitch/components/permalink'; import { ShortNumber } from 'flavours/glitch/components/short_number'; import { autoPlayGif, me, unfollowModal } from 'flavours/glitch/initial_state'; import { makeGetAccount } from 'flavours/glitch/selectors'; diff --git a/app/javascript/flavours/glitch/features/follow_requests/components/account_authorize.jsx b/app/javascript/flavours/glitch/features/follow_requests/components/account_authorize.jsx index a252ab25bd..225045c4c8 100644 --- a/app/javascript/flavours/glitch/features/follow_requests/components/account_authorize.jsx +++ b/app/javascript/flavours/glitch/features/follow_requests/components/account_authorize.jsx @@ -11,7 +11,7 @@ import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/ import { Avatar } from '../../../components/avatar'; import { DisplayName } from '../../../components/display_name'; import { IconButton } from '../../../components/icon_button'; -import Permalink from '../../../components/permalink'; +import { Permalink } from '../../../components/permalink'; const messages = defineMessages({ authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' }, diff --git a/app/javascript/flavours/glitch/features/notifications/components/admin_report.jsx b/app/javascript/flavours/glitch/features/notifications/components/admin_report.jsx index 70e8a4e343..01273f959b 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/admin_report.jsx +++ b/app/javascript/flavours/glitch/features/notifications/components/admin_report.jsx @@ -12,7 +12,7 @@ import { ReactComponent as FlagIcon } from '@material-symbols/svg-600/outlined/f import { HotKeys } from 'react-hotkeys'; import { Icon } from 'flavours/glitch/components/icon'; -import Permalink from 'flavours/glitch/components/permalink'; +import { Permalink } from 'flavours/glitch/components/permalink'; import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router'; import NotificationOverlayContainer from '../containers/overlay_container'; diff --git a/app/javascript/flavours/glitch/features/notifications/components/admin_signup.jsx b/app/javascript/flavours/glitch/features/notifications/components/admin_signup.jsx index ee547e05b1..a99d90e0f5 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/admin_signup.jsx +++ b/app/javascript/flavours/glitch/features/notifications/components/admin_signup.jsx @@ -12,7 +12,7 @@ import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outli import { HotKeys } from 'react-hotkeys'; import { Icon } from 'flavours/glitch/components/icon'; -import Permalink from 'flavours/glitch/components/permalink'; +import { Permalink } from 'flavours/glitch/components/permalink'; import AccountContainer from 'flavours/glitch/containers/account_container'; import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router'; diff --git a/app/javascript/flavours/glitch/features/notifications/components/follow.jsx b/app/javascript/flavours/glitch/features/notifications/components/follow.jsx index 981d14aaf3..6aff0dfede 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/follow.jsx +++ b/app/javascript/flavours/glitch/features/notifications/components/follow.jsx @@ -12,7 +12,7 @@ import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outli import { HotKeys } from 'react-hotkeys'; import { Icon } from 'flavours/glitch/components/icon'; -import Permalink from 'flavours/glitch/components/permalink'; +import { Permalink } from 'flavours/glitch/components/permalink'; import AccountContainer from 'flavours/glitch/containers/account_container'; import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router'; diff --git a/app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx b/app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx index b3b415a2a4..8462cc16b1 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx +++ b/app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx @@ -17,7 +17,7 @@ import { Avatar } from 'flavours/glitch/components/avatar'; import { DisplayName } from 'flavours/glitch/components/display_name'; import { Icon } from 'flavours/glitch/components/icon'; import { IconButton } from 'flavours/glitch/components/icon_button'; -import Permalink from 'flavours/glitch/components/permalink'; +import { Permalink } from 'flavours/glitch/components/permalink'; import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router'; import NotificationOverlayContainer from '../containers/overlay_container'; diff --git a/app/javascript/flavours/glitch/features/ui/components/header.jsx b/app/javascript/flavours/glitch/features/ui/components/header.jsx index 1efacfc1c4..ed2d6ba7f3 100644 --- a/app/javascript/flavours/glitch/features/ui/components/header.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/header.jsx @@ -14,7 +14,7 @@ import { fetchServer } from 'flavours/glitch/actions/server'; import { Avatar } from 'flavours/glitch/components/avatar'; import { Icon } from 'flavours/glitch/components/icon'; import { WordmarkLogo, SymbolLogo } from 'flavours/glitch/components/logo'; -import Permalink from 'flavours/glitch/components/permalink'; +import { Permalink } from 'flavours/glitch/components/permalink'; import { registrationsOpen, me, sso_redirect } from 'flavours/glitch/initial_state'; const Account = connect(state => ({ diff --git a/app/javascript/flavours/glitch/features/ui/index.jsx b/app/javascript/flavours/glitch/features/ui/index.jsx index 839e06eea2..ba7e521b75 100644 --- a/app/javascript/flavours/glitch/features/ui/index.jsx +++ b/app/javascript/flavours/glitch/features/ui/index.jsx @@ -15,7 +15,7 @@ import { HotKeys } from 'react-hotkeys'; import { changeLayout } from 'flavours/glitch/actions/app'; import { synchronouslySubmitMarkers, submitMarkers, fetchMarkers } from 'flavours/glitch/actions/markers'; import { INTRODUCTION_VERSION } from 'flavours/glitch/actions/onboarding'; -import PermaLink from 'flavours/glitch/components/permalink'; +import { Permalink } from 'flavours/glitch/components/permalink'; import PictureInPicture from 'flavours/glitch/features/picture_in_picture'; import { layoutFromWindow } from 'flavours/glitch/is_mobile'; import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router'; @@ -649,9 +649,9 @@ class UI extends PureComponent { id='moved_to_warning' defaultMessage='This account is marked as moved to {moved_to_link}, and may thus not accept new follows.' values={{ moved_to_link: ( - + @{moved.get('acct')} - + ) }} /> )}