Merge branch 'permalinks' into 'develop'

Replace some <Permalink />s with <Link />s

See merge request soapbox-pub/soapbox!1025

app/soapbox/components/hashtag.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
+import { Link } from 'react-router-dom';
 import { Sparklines, SparklinesCurve } from 'react-sparklines';
 
 import { shortNumberFormat } from '../utils/numbers';
 
-import Permalink from './permalink';
 import { HStack, Stack, Text } from './ui';
 
 import type { Tag } from 'soapbox/types/entities';
@@ -19,9 +19,9 @@ const Hashtag: React.FC<IHashtag> = ({ hashtag }) => {
   return (
     <HStack alignItems='center' justifyContent='between' data-testid='hashtag'>
       <Stack>
-        <Permalink href={hashtag.url} to={`/tags/${hashtag.name}`} className='hover:underline'>
+        <Link to={`/tags/${hashtag.name}`} className='hover:underline'>
           <Text tag='span' size='sm' weight='semibold'>#{hashtag.name}</Text>
-        </Permalink>
+        </Link>
 
         {hashtag.history && (
           <Text theme='muted' size='sm'>

app/soapbox/components/permalink.tsx

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { useHistory } from 'react-router-dom';
-
-interface IPermaLink extends Pick<React.HTMLAttributes<HTMLAnchorElement>, 'dangerouslySetInnerHTML'> {
-  className?: string,
-  href: string,
-  title?: string,
-  to: string,
-}
-
-const Permalink: React.FC<IPermaLink> = (props) => {
-  const history = useHistory();
-
-  const { className, href, title, to, children, ...filteredProps } = props;
-
-  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
-    if (event.button === 0 && !(event.ctrlKey || event.metaKey)) {
-      event.preventDefault();
-      history.push(to);
-    }
-  };
-
-  return (
-    <a
-      target='_blank'
-      href={href}
-      onClick={handleClick}
-      title={title}
-      className={`permalink${className ? ' ' + className : ''}`}
-      {...filteredProps}
-    >
-      {children}
-    </a>
-  );
-};
-
-export default Permalink;

app/soapbox/features/birthdays/account.tsx

@@ -1,10 +1,10 @@
 import React, { useCallback } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
 
 import Avatar from 'soapbox/components/avatar';
 import DisplayName from 'soapbox/components/display-name';
 import Icon from 'soapbox/components/icon';
-import Permalink from 'soapbox/components/permalink';
 import { useAppSelector } from 'soapbox/hooks';
 import { makeGetAccount } from 'soapbox/selectors';
 
@@ -38,13 +38,13 @@ const Account: React.FC<IAccount> = ({ accountId }) => {
   return (
     <div className='account'>
       <div className='account__wrapper'>
-        <Permalink className='account__display-name' title={account.acct} href={`/@${account.acct}`} to={`/@${account.acct}`}>
+        <Link className='account__display-name' title={account.get('acct')} to={`/@${account.get('acct')}`}>
           <div className='account__display-name'>
             <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
             <DisplayName account={account} />
 
           </div>
-        </Permalink>
+        </Link>
         <div
           className='flex items-center gap-0.5'
           title={intl.formatMessage(messages.birthday, {

app/soapbox/features/directory/components/account_card.tsx

@@ -1,11 +1,11 @@
 import classNames from 'clsx';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
+import { Link } from 'react-router-dom';
 
 import { getSettings } from 'soapbox/actions/settings';
 import Avatar from 'soapbox/components/avatar';
 import DisplayName from 'soapbox/components/display-name';
-import Permalink from 'soapbox/components/permalink';
 import RelativeTimestamp from 'soapbox/components/relative-timestamp';
 import { Text } from 'soapbox/components/ui';
 import ActionButton from 'soapbox/features/ui/components/action-button';
@@ -44,10 +44,10 @@ const AccountCard: React.FC<IAccountCard> = ({ id }) => {
       </div>
 
       <div className='directory__card__bar'>
-        <Permalink className='directory__card__bar__name' href={account.url} to={`/@${account.acct}`}>
+        <Link className='directory__card__bar__name' to={`/@${account.acct}`}>
           <Avatar account={account} size={48} />
           <DisplayName account={account} />
-        </Permalink>
+        </Link>
       </div>
 
       <div className='directory__card__extra'>

app/soapbox/features/follow_requests/components/account_authorize.tsx

@@ -1,12 +1,12 @@
 import React, { useCallback } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
+import { Link } from 'react-router-dom';
 
 import { authorizeFollowRequest, rejectFollowRequest } from 'soapbox/actions/accounts';
 import Avatar from 'soapbox/components/avatar';
 import DisplayName from 'soapbox/components/display-name';
 import IconButton from 'soapbox/components/icon_button';
-import Permalink from 'soapbox/components/permalink';
 import { Text } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';
 import { makeGetAccount } from 'soapbox/selectors';
@@ -43,10 +43,10 @@ const AccountAuthorize: React.FC<IAccountAuthorize> = ({ id }) => {
   return (
     <div className='account-authorize__wrapper'>
       <div className='account-authorize'>
-        <Permalink href={`/@${account.acct}`} to={`/@${account.acct}`}>
+        <Link to={`/@${account.acct}`}>
           <div className='account-authorize__avatar'><Avatar account={account} size={48} /></div>
           <DisplayName account={account} />
-        </Permalink>
+        </Link>
 
         <Text className='account__header__content' dangerouslySetInnerHTML={content} />
       </div>

app/soapbox/features/notifications/components/notification.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { HotKeys } from 'react-hotkeys';
 import { defineMessages, useIntl, FormattedMessage, IntlShape, MessageDescriptor, defineMessage } from 'react-intl';
-import { useHistory } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 
 import { mentionCompose } from 'soapbox/actions/compose';
 import { reblog, favourite, unreblog, unfavourite } from 'soapbox/actions/interactions';
@@ -9,7 +9,6 @@ import { openModal } from 'soapbox/actions/modals';
 import { getSettings } from 'soapbox/actions/settings';
 import { hideStatus, revealStatus } from 'soapbox/actions/statuses';
 import Icon from 'soapbox/components/icon';
-import Permalink from 'soapbox/components/permalink';
 import { HStack, Text, Emoji } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account_container';
 import StatusContainer from 'soapbox/containers/status_container';
@@ -30,9 +29,8 @@ const notificationForScreenReader = (intl: IntlShape, message: string, timestamp
 
 const buildLink = (account: Account): JSX.Element => (
   <bdi>
-    <Permalink
+    <Link
       className='text-gray-800 dark:text-gray-200 font-bold hover:underline'
-      href={`/@${account.acct}`}
       title={account.acct}
       to={`/@${account.acct}`}
       dangerouslySetInnerHTML={{ __html: account.display_name_html }}