Merge branch 'modals-fix' into 'develop'

Fix links in modals

Closes #1240

See merge request soapbox-pub/soapbox!1974

CHANGELOG.md

@@ -25,6 +25,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Posts: fix monospace font in Markdown code blocks.
 - Modals: fix action buttons overflow
 - Editing: don't insert edited posts to the top of the feed.
+- Modals: close modal when navigating to a different page.
+- Modals: fix "View context" button in media modal.
 
 ## [3.0.0] - 2022-12-25
 

app/soapbox/components/account.tsx

@@ -15,14 +15,17 @@ import type { Account as AccountEntity } from 'soapbox/types/entities';
 
 interface IInstanceFavicon {
   account: AccountEntity,
+  disabled?: boolean,
 }
 
-const InstanceFavicon: React.FC<IInstanceFavicon> = ({ account }) => {
+const InstanceFavicon: React.FC<IInstanceFavicon> = ({ account, disabled }) => {
   const history = useHistory();
 
   const handleClick: React.MouseEventHandler = (e) => {
     e.stopPropagation();
 
+    if (disabled) return;
+
     const timelineUrl = `/timeline/${account.domain}`;
     if (!(e.ctrlKey || e.metaKey)) {
       history.push(timelineUrl);
@@ -32,7 +35,11 @@ const InstanceFavicon: React.FC<IInstanceFavicon> = ({ account }) => {
   };
 
   return (
-    <button className='w-4 h-4 flex-none focus:ring-primary-500 focus:ring-2 focus:ring-offset-2' onClick={handleClick}>
+    <button
+      className='w-4 h-4 flex-none focus:ring-primary-500 focus:ring-2 focus:ring-offset-2'
+      onClick={handleClick}
+      disabled={disabled}
+    >
       <img src={account.favicon} alt='' title={account.domain} className='w-full max-h-full' />
     </button>
   );
@@ -219,7 +226,7 @@ const Account = ({
                 <Text theme='muted' size='sm' direction='ltr' truncate>@{username}</Text>
 
                 {account.favicon && (
-                  <InstanceFavicon account={account} />
+                  <InstanceFavicon account={account} disabled={!withLinkToProfile} />
                 )}
 
                 {(timestamp) ? (

app/soapbox/components/modal-root.tsx

@@ -152,8 +152,10 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
 
   const handleModalOpen = () => {
     modalHistoryKey.current = Date.now();
-    unlistenHistory.current = history.listen((_, action) => {
-      if (action === 'POP') {
+    unlistenHistory.current = history.listen(({ state }, action) => {
+      if (!(state as any)?.soapboxModalKey) {
+        onClose();
+      } else if (action === 'POP') {
         handleOnClose();
 
         if (onCancel) onCancel();
@@ -165,11 +167,9 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
     if (unlistenHistory.current) {
       unlistenHistory.current();
     }
-    if (!['FAVOURITES', 'MENTIONS', 'REACTIONS', 'REBLOGS', 'MEDIA'].includes(type)) {
-      const { state } = history.location;
-      if (state && (state as any).soapboxModalKey === modalHistoryKey.current) {
-        history.goBack();
-      }
+    const { state } = history.location;
+    if (state && (state as any).soapboxModalKey === modalHistoryKey.current) {
+      history.goBack();
     }
   };
 
@@ -221,7 +221,7 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
 
       ensureHistoryBuffer();
     }
-  });
+  }, [children]);
 
   if (!visible) {
     return (

app/soapbox/features/account-gallery/components/media-item.tsx

@@ -56,7 +56,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, displayWidth, onOpenMedia
   const width  = `${Math.floor((displayWidth - 4) / 3) - 4}px`;
   const height = width;
   const status = attachment.get('status');
-  const title = status.get('spoiler_text') || attachment.get('description');
+  const title  = status.get('spoiler_text') || attachment.get('description');
 
   let thumbnail: React.ReactNode = '';
   let icon;

app/soapbox/features/reply-mentions/account.tsx

@@ -52,7 +52,7 @@ const Account: React.FC<IAccount> = ({ composeId, accountId, author }) => {
   return (
     <HStack space={1} alignItems='center' justifyContent='between' className='p-2.5'>
       <div className='w-full'>
-        <AccountComponent account={account} withRelationship={false} />
+        <AccountComponent account={account} withRelationship={false} withLinkToProfile={false} />
       </div>
       {!author && button}
     </HStack>

app/soapbox/features/ui/components/modals/media-modal.tsx

@@ -9,6 +9,7 @@ import Icon from 'soapbox/components/icon';
 import IconButton from 'soapbox/components/icon-button';
 import Audio from 'soapbox/features/audio';
 import Video from 'soapbox/features/video';
+import { useAppDispatch } from 'soapbox/hooks';
 
 import ImageLoader from '../image-loader';
 
@@ -39,6 +40,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
 
   const intl = useIntl();
   const history = useHistory();
+  const dispatch = useAppDispatch();
 
   const [index, setIndex] = useState<number | null>(null);
   const [navigationHidden, setNavigationHidden] = useState(false);
@@ -94,8 +96,14 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
   const handleStatusClick: React.MouseEventHandler = e => {
     if (status && e.button === 0 && !(e.ctrlKey || e.metaKey)) {
       e.preventDefault();
-      history.push(`/@${status.getIn(['account', 'acct'])}/posts/${status?.id}`);
-      onClose();
+
+      dispatch((_, getState) => {
+        const account = typeof status.account === 'string' ? getState().accounts.get(status.account) : status.account;
+        if (!account) return;
+
+        history.push(`/@${account.acct}/posts/${status?.id}`);
+        onClose();
+      });
     }
   };
 
@@ -113,7 +121,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
 
   let pagination: React.ReactNode[] = [];
 
-  const leftNav  = media.size > 1 && (
+  const leftNav = media.size > 1 && (
     <button
       tabIndex={0}
       className='media-modal__nav media-modal__nav--left'

app/soapbox/service-worker/web-push-notifications.ts

@@ -159,7 +159,7 @@ const handlePush = (event: PushEvent) => {
         options.data.hiddenImage = notification.status?.media_attachments[0]?.preview_url;
 
         if (notification.status?.spoiler_text) {
-          options.body    = notification.status.spoiler_text;
+          options.body = notification.status.spoiler_text;
         }
 
         options.image   = undefined;