Merge branch 'dropdown-menu-links' into 'main'

Prefer to/href for DropdownMenuItems

See merge request soapbox-pub/soapbox!3007

src/components/dropdown-menu/dropdown-menu-item.tsx

@@ -33,6 +33,7 @@ const DropdownMenuItem = ({ index, item, onClick }: IDropdownMenuItem) => {
     event.stopPropagation();
 
     if (!item) return;
+
     if (onClick) onClick();
 
     if (item.to) {

src/components/status-action-bar.tsx

@@ -211,10 +211,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     }));
   };
 
-  const handleExternalClick = () => {
-    window.open(status.uri, '_blank');
-  };
-
   const handleReblogClick: React.EventHandler<React.MouseEvent> = e => {
     if (me) {
       const modalReblog = () => dispatch(toggleReblog(status));
@@ -336,10 +332,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     }));
   };
 
-  const handleOpen: React.EventHandler<React.MouseEvent> = (e) => {
-    history.push(`/@${status.account.acct}/posts/${status.id}`);
-  };
-
   const handleEmbed = () => {
     dispatch(openModal('EMBED', {
       url: status.url,
@@ -417,8 +409,8 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     if (expandable) {
       menu.push({
         text: intl.formatMessage(messages.open),
-        action: handleOpen,
         icon: require('@tabler/icons/outline/arrows-vertical.svg'),
+        to: `/@${status.account.acct}/posts/${status.id}`,
       });
     }
 
@@ -475,8 +467,9 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       const { hostname: domain } = new URL(status.uri);
       menu.push({
         text: intl.formatMessage(messages.external, { domain }),
-        action: handleExternalClick,
         icon: require('@tabler/icons/outline/external-link.svg'),
+        href: status.uri,
+        target: '_blank',
       });
     }
 

src/features/account/components/header.tsx

@@ -263,10 +263,6 @@ const Header: React.FC<IHeader> = ({ account }) => {
     }
   };
 
-  const handleRssFeedClick = () => {
-    window.open(software === MASTODON ? `${account.url}.rss` : `${account.url}/feed.rss`, '_blank');
-  };
-
   const handleShare = () => {
     navigator.share({
       text: `@${account.acct}`,
@@ -290,8 +286,9 @@ const Header: React.FC<IHeader> = ({ account }) => {
     if (features.rssFeeds && account.local) {
       menu.push({
         text: intl.formatMessage(messages.subscribeFeed),
-        action: handleRssFeedClick,
         icon: require('@tabler/icons/outline/rss.svg'),
+        href: software === MASTODON ? `${account.url}.rss` : `${account.url}/feed.rss`,
+        target: '_blank',
       });
     }
 

src/features/event/components/event-header.tsx

@@ -113,10 +113,6 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
     copy(uri);
   };
 
-  const handleExternalClick = () => {
-    window.open(status.uri, '_blank');
-  };
-
   const handleBookmarkClick = () => {
     dispatch(toggleBookmark(status));
   };
@@ -218,8 +214,9 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
     if (features.federating && !account.local) {
       menu.push({
         text: intl.formatMessage(messages.external, { domain }),
-        action: handleExternalClick,
         icon: require('@tabler/icons/outline/external-link.svg'),
+        href: status.uri,
+        target: '_blank',
       });
     }
 
@@ -393,8 +390,8 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
                 if (typeof menuItem?.text === 'undefined') {
                   return <MenuDivider key={idx} />;
                 } else {
-                  const Comp = (menuItem.action ? MenuItem : MenuLink) as any;
+                  const Comp = (menuItem.href ? MenuLink : MenuItem) as any;
-                  const itemProps = menuItem.action ? { onSelect: menuItem.action } : { to: menuItem.to, as: Link, target: menuItem.target || '_self' };
+                  const itemProps = menuItem.href ? { href: menuItem.href, target: menuItem.target || '_self' } : { onSelect: menuItem.action };
 
                   return (
                     <Comp key={idx} {...itemProps} className='group'>