refactor: remove Ads and try to optimize status render (#343)

BDX-town · Nov 11, 2024 · f7cb1c7 · f7cb1c7
1 parent f15e610
commit f7cb1c7
Show file tree

Hide file tree

Showing 15 changed files with 220 additions and 501 deletions.
diff --git a/app/soapbox/components/status-hover-card.tsx b/app/soapbox/components/status-hover-card.tsx
@@ -64,19 +64,6 @@ export const StatusHoverCard: React.FC<IStatusHoverCard> = ({ visible = true })
 
   if (!statusId) return null;
 
-  const renderStatus = (statusId: string) => {
-    return (
-      // @ts-ignore
-      <StatusContainer
-        key={statusId}
-        id={statusId}
-        hoverable={false}
-        hideActionBar
-        muted
-      />
-    );
-  };
-
   return (
     <div
       className={classNames({
@@ -92,7 +79,13 @@ export const StatusHoverCard: React.FC<IStatusHoverCard> = ({ visible = true })
     >
       <Card className='relative'>
         <CardBody>
-          {renderStatus(statusId)}
+          <StatusContainer
+            key={statusId}
+            id={statusId}
+            hoverable={false}
+            hideActionBar
+            muted
+          />
         </CardBody>
       </Card>
     </div>

diff --git a/app/soapbox/components/status-media.tsx b/app/soapbox/components/status-media.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
 import { openModal } from 'soapbox/actions/modals';
 import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
@@ -24,6 +24,18 @@ interface IStatusMedia {
   onToggleVisibility?: () => void,
 }
 
+const renderLoadingMediaGallery = (): JSX.Element => {
+  return <div className='media_gallery' style={{ height: '285px' }} />;
+};
+
+const renderLoadingVideoPlayer = (): JSX.Element => {
+  return <div className='media-spoiler-video' style={{ height: '285px' }} />;
+};
+
+const renderLoadingAudioPlayer = (): JSX.Element => {
+  return <div className='media-spoiler-audio' style={{ height: '285px' }} />;
+};
+
 /** Render media attachments for a status. */
 const StatusMedia: React.FC<IStatusMedia> = ({
   status,
@@ -35,36 +47,25 @@ const StatusMedia: React.FC<IStatusMedia> = ({
   const dispatch = useAppDispatch();
   const [mediaWrapperWidth, setMediaWrapperWidth] = useState<number | undefined>(undefined);
 
-  const size = status.media_attachments.size;
-  const firstAttachment = status.media_attachments.first();
+  const size = useMemo(() => status.media_attachments.size, [status.media_attachments]);
+  const firstAttachment = useMemo(() => status.media_attachments.first(), [status.media_attachments]);
 
   let media = null;
 
-  const setRef = (c: HTMLDivElement): void => {
+  const setRef = useCallback((c: HTMLDivElement): void => {
     if (c) {
       setMediaWrapperWidth(c.offsetWidth);
     }
-  };
-
-  const renderLoadingMediaGallery = (): JSX.Element => {
-    return <div className='media_gallery' style={{ height: '285px' }} />;
-  };
-
-  const renderLoadingVideoPlayer = (): JSX.Element => {
-    return <div className='media-spoiler-video' style={{ height: '285px' }} />;
-  };
+  }, []);
 
-  const renderLoadingAudioPlayer = (): JSX.Element => {
-    return <div className='media-spoiler-audio' style={{ height: '285px' }} />;
-  };
 
-  const openMedia = (media: ImmutableList<Attachment>, index: number) => {
+  const openMedia = useCallback((media: ImmutableList<Attachment>, index: number) => {
     dispatch(openModal('MEDIA', { media, index }));
-  };
+  }, [dispatch]);
 
-  const openVideo = (media: Attachment, time: number): void => {
+  const openVideo = useCallback((media: Attachment, time: number): void => {
     dispatch(openModal('VIDEO', { media, time }));
-  };
+  }, [dispatch]);
 
   if (size > 0 && firstAttachment) {
     if (muted) {

diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx
@@ -1,5 +1,6 @@
+/* eslint-disable jsx-a11y/interactive-supports-focus */
 import classNames from 'classnames';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { HotKeys } from 'react-hotkeys';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { NavLink, useHistory } from 'react-router-dom';
@@ -50,6 +51,7 @@ export interface IStatus {
   withDismiss?: boolean,
 }
 
+
 const Status: React.FC<IStatus> = (props) => {
   const {
     status,
@@ -77,22 +79,22 @@ const Status: React.FC<IStatus> = (props) => {
 
   const [showMedia, setShowMedia] = useState<boolean>(defaultMediaVisibility(status, displayMedia));
 
-  const actualStatus = getActualStatus(status);
+  const actualStatus = useMemo(() => getActualStatus(status), [status]) ;
 
   const logo = useLogo();
 
   // Track height changes we know about to compensate scrolling.
   useEffect(() => {
     didShowCard.current = Boolean(!muted && !hidden && status?.card);
-  }, []);
+  }, [muted, hidden, status]);
 
   useEffect(() => {
     setShowMedia(defaultMediaVisibility(status, displayMedia));
-  }, [status.id]);
+  }, [displayMedia, status, status.id]);
 
-  const handleToggleMediaVisibility = (): void => {
+  const handleToggleMediaVisibility = useCallback((): void => {
     setShowMedia(!showMedia);
-  };
+  }, [showMedia]);
 
   const handleClick = (): void => {
     if (onClick) {
@@ -106,7 +108,7 @@ const Status: React.FC<IStatus> = (props) => {
     dispatch(toggleStatusHidden(actualStatus));
   };
 
-  const handleHotkeyOpenMedia = (e?: KeyboardEvent): void => {
+  const handleHotkeyOpenMedia = useCallback((e?: KeyboardEvent): void => {
     const status = actualStatus;
     const firstAttachment = status.media_attachments.first();
 
@@ -119,63 +121,63 @@ const Status: React.FC<IStatus> = (props) => {
         dispatch(openModal('MEDIA', { media: status.media_attachments, index: 0 }));
       }
     }
-  };
+  }, [actualStatus, dispatch]);
 
-  const handleHotkeyReply = (e?: KeyboardEvent): void => {
+  const handleHotkeyReply = useCallback((e?: KeyboardEvent): void => {
     e?.preventDefault();
     dispatch(replyComposeWithConfirmation(actualStatus, intl));
-  };
+  }, [actualStatus, dispatch, intl]);
 
-  const handleHotkeyFavourite = (): void => {
+  const handleHotkeyFavourite = useCallback((): void => {
     toggleFavourite(actualStatus);
-  };
+  }, [actualStatus]);
 
-  const handleHotkeyBoost = (e?: KeyboardEvent): void => {
+  const handleHotkeyBoost = useCallback((e?: KeyboardEvent): void => {
     const modalReblog = () => dispatch(toggleReblog(actualStatus));
     const boostModal = settings.get('boostModal');
     if ((e && e.shiftKey) || !boostModal) {
       modalReblog();
     } else {
       dispatch(openModal('BOOST', { status: actualStatus, onReblog: modalReblog }));
     }
-  };
+  }, [actualStatus, dispatch, settings]);
 
-  const handleHotkeyMention = (e?: KeyboardEvent): void => {
+  const handleHotkeyMention = useCallback((e?: KeyboardEvent): void => {
     e?.preventDefault();
     dispatch(mentionCompose(actualStatus.account as AccountEntity));
-  };
+  }, [actualStatus.account, dispatch]);
 
-  const handleHotkeyOpen = (): void => {
+  const handleHotkeyOpen = useCallback((): void => {
     history.push(`/@${actualStatus.getIn(['account', 'acct'])}/posts/${actualStatus.id}`);
-  };
+  }, [actualStatus, history]);
 
-  const handleHotkeyOpenProfile = (): void => {
+  const handleHotkeyOpenProfile = useCallback((): void => {
     history.push(`/@${actualStatus.getIn(['account', 'acct'])}`);
-  };
+  }, [actualStatus, history]);
 
-  const handleHotkeyMoveUp = (e?: KeyboardEvent): void => {
+  const handleHotkeyMoveUp = useCallback((e?: KeyboardEvent): void => {
     if (onMoveUp) {
       onMoveUp(status.id, featured);
     }
-  };
+  }, [featured, onMoveUp, status.id]);
 
-  const handleHotkeyMoveDown = (e?: KeyboardEvent): void => {
+  const handleHotkeyMoveDown = useCallback((e?: KeyboardEvent): void => {
     if (onMoveDown) {
       onMoveDown(status.id, featured);
     }
-  };
+  }, [featured, onMoveDown, status.id]);
 
-  const handleHotkeyToggleHidden = (): void => {
+  const handleHotkeyToggleHidden = useCallback((): void => {
     dispatch(toggleStatusHidden(actualStatus));
-  };
+  }, [actualStatus, dispatch]);
 
-  const handleHotkeyToggleSensitive = (): void => {
+  const handleHotkeyToggleSensitive = useCallback((): void => {
     handleToggleMediaVisibility();
-  };
+  }, [handleToggleMediaVisibility]);
 
-  const handleHotkeyReact = (): void => {
+  const handleHotkeyReact = useCallback((): void => {
     _expandEmojiSelector();
-  };
+  }, []);
 
   const _expandEmojiSelector = (): void => {
     const firstEmoji: HTMLDivElement | null | undefined = node.current?.querySelector('.emoji-react-selector .emoji-react-selector__emoji');
@@ -191,34 +193,24 @@ const Status: React.FC<IStatus> = (props) => {
       case 'private': return require('@tabler/icons/lock.svg');
       case 'direct': return require('@tabler/icons/mail.svg');
     }
-  }, [actualStatus?.visibility]);
-
-  if (!status) return null;
-
-  if (hidden) {
-    return (
-      <div ref={node}>
-        {actualStatus.getIn(['account', 'display_name']) || actualStatus.getIn(['account', 'username'])}
-        {actualStatus.content}
-      </div>
-    );
-  }
+  }, [actualStatus?.visibility, logo]);
 
-  let quote;
 
-  if (actualStatus.quote) {
-    if (actualStatus.pleroma.get('quote_visible', true) === false) {
-      quote = (
-        <div className='quoted-status-tombstone'>
-          <p><FormattedMessage id='statuses.quote_tombstone' defaultMessage='Post is unavailable.' /></p>
-        </div>
-      );
-    } else {
-      quote = <QuotedStatus statusId={actualStatus.quote as string} />;
+  const quote = useMemo(() => {
+    if (actualStatus.quote) {
+      if (actualStatus.pleroma.get('quote_visible', true) === false) {
+        return (
+          <div className='quoted-status-tombstone'>
+            <p><FormattedMessage id='statuses.quote_tombstone' defaultMessage='Post is unavailable.' /></p>
+          </div>
+        );
+      } else {
+        return <QuotedStatus statusId={actualStatus.quote as string} />;
+      }
     }
-  }
+  }, [actualStatus.pleroma, actualStatus.quote]);
 
-  const handlers = muted ? undefined : {
+  const handlers = useMemo(() => muted ? undefined : {
     reply: handleHotkeyReply,
     favourite: handleHotkeyFavourite,
     boost: handleHotkeyBoost,
@@ -231,12 +223,24 @@ const Status: React.FC<IStatus> = (props) => {
     toggleSensitive: handleHotkeyToggleSensitive,
     openMedia: handleHotkeyOpenMedia,
     react: handleHotkeyReact,
-  };
+  }, [handleHotkeyBoost, handleHotkeyFavourite, handleHotkeyMention, handleHotkeyMoveDown, handleHotkeyMoveUp, handleHotkeyOpen, handleHotkeyOpenMedia, handleHotkeyOpenProfile, handleHotkeyReact, handleHotkeyReply, handleHotkeyToggleHidden, handleHotkeyToggleSensitive, muted]);
 
 
 
   const statusUrl = `/@${actualStatus.getIn(['account', 'acct'])}/posts/${actualStatus.id}`;
 
+  if (!status) return null;
+
+  if (hidden) {
+    return (
+      <div ref={node}>
+        {actualStatus.getIn(['account', 'display_name']) || actualStatus.getIn(['account', 'username'])}
+        {actualStatus.content}
+      </div>
+    );
+  }
+
+
   return (
     <HotKeys handlers={handlers} data-testid='status'>
       <div