Convert `Permalink` to Typescript

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({

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 {
 

app/javascript/flavours/glitch/components/permalink.jsx

@@ -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 (
-    <a target='_blank' href={href} onClick={handleClick} className={`permalink${className ? ' ' + className : ''}`} {...props}>
-      {children}
-    </a>
-  );
-};
-
-Permalink.propTypes = {
-  className: PropTypes.string,
-  href: PropTypes.string.isRequired,
-  to: PropTypes.string.isRequired,
-  children: PropTypes.node,
-  onInterceptClick: PropTypes.func,
-};
-
-export default Permalink;

app/javascript/flavours/glitch/components/permalink.tsx

@@ -0,0 +1,41 @@
+import { useCallback } from 'react';
+
+import { useAppHistory } from './router';
+
+interface Props extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  to: string;
+}
+
+export const Permalink: React.FC<Props> = ({
+  className,
+  href,
+  to,
+  children,
+  ...props
+}) => {
+  const history = useAppHistory();
+
+  const handleClick = useCallback<React.MouseEventHandler<HTMLAnchorElement>>(
+    (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 (
+    <a
+      target='_blank'
+      rel='noreferrer'
+      href={href}
+      onClick={handleClick}
+      className={`permalink${className ? ' ' + className : ''}`}
+      {...props}
+    >
+      {children}
+    </a>
+  );
+};

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

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';

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';

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';

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' },

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';

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';
 

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';
 

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';

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 => ({

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: (
-                <PermaLink href={moved.get('url')} to={`/@${moved.get('acct')}`}>
+                <Permalink href={moved.get('url')} to={`/@${moved.get('acct')}`}>
                   @{moved.get('acct')}
-                </PermaLink>
+                </Permalink>
               ) }}
             />
           </div>)}