refactor: create PureStatusContent component, used in PureStatus component

src/components/pure-status-content.tsx

@@ -0,0 +1,137 @@
+import chevronRightIcon from '@tabler/icons/outline/chevron-right.svg';
+import clsx from 'clsx';
+import { useState, useRef, useLayoutEffect, useMemo, memo } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import Icon from 'soapbox/components/icon.tsx';
+import { Entities, EntityTypes } from 'soapbox/entity-store/entities.ts';
+import { isOnlyEmoji as _isOnlyEmoji } from 'soapbox/utils/only-emoji.ts';
+import { getTextDirection } from 'soapbox/utils/rtl.ts';
+
+import Markup from './markup.tsx';
+import Poll from './polls/poll.tsx';
+
+import type { Sizes } from 'soapbox/components/ui/text.tsx';
+
+const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top)
+
+interface IReadMoreButton {
+  onClick: React.MouseEventHandler;
+}
+
+/** Button to expand a truncated status (due to too much content) */
+const ReadMoreButton: React.FC<IReadMoreButton> = ({ onClick }) => (
+  <button className='flex items-center border-0 bg-transparent p-0 pt-2 text-gray-900 hover:underline active:underline dark:text-gray-300' onClick={onClick}>
+    <FormattedMessage id='status.read_more' defaultMessage='Read more' />
+    <Icon className='inline-block size-5' src={chevronRightIcon} />
+  </button>
+);
+
+interface IPureStatusContent {
+  status: EntityTypes[Entities.STATUSES];
+  onClick?: () => void;
+  collapsable?: boolean;
+  translatable?: boolean;
+  textSize?: Sizes;
+}
+
+/** Renders the text content of a status */
+const PureStatusContent: React.FC<IPureStatusContent> = ({
+  status,
+  onClick,
+  collapsable = false,
+  translatable,
+  textSize = 'md',
+}) => {
+  const [collapsed, setCollapsed] = useState(false);
+
+  const node = useRef<HTMLDivElement>(null);
+  const isOnlyEmoji = useMemo(() => _isOnlyEmoji(status.content, status.emojis, 10), [status.content]);
+
+  const maybeSetCollapsed = (): void => {
+    if (!node.current) return;
+
+    if (collapsable && onClick && !collapsed) {
+      if (node.current.clientHeight > MAX_HEIGHT) {
+        setCollapsed(true);
+      }
+    }
+  };
+
+  useLayoutEffect(() => {
+    maybeSetCollapsed();
+  });
+
+  const parsedHtml = useMemo((): string => {
+    return translatable && status.translation ? status.translation.content : status.content;
+  }, [status.content, status.translation]);
+
+  if (status.content.length === 0) {
+    return null;
+  }
+
+  const withSpoiler = status.spoiler_text.length > 0;
+
+  const baseClassName = 'text-gray-900 dark:text-gray-100 break-words text-ellipsis overflow-hidden relative focus:outline-none';
+
+  const direction = getTextDirection(status.search_index);
+  const className = clsx(baseClassName, {
+    'cursor-pointer': onClick,
+    'whitespace-normal': withSpoiler,
+    'max-h-[300px]': collapsed,
+    'leading-normal !text-4xl': isOnlyEmoji,
+  });
+
+  if (onClick) {
+    const output = [
+      <Markup
+        ref={node}
+        tabIndex={0}
+        key='content'
+        className={className}
+        direction={direction}
+        lang={status.language || undefined}
+        size={textSize}
+        emojis={status.emojis}
+        mentions={status.mentions}
+        html={{ __html: parsedHtml }}
+      />,
+    ];
+
+    if (collapsed) {
+      output.push(<ReadMoreButton onClick={onClick} key='read-more' />);
+    }
+
+    const hasPoll = (!!status.poll) && typeof status.poll.id === 'string';
+    if (hasPoll) {
+      output.push(<Poll id={status.poll!.id} key='poll' status={status.url} />);
+    }
+
+    return <div className={clsx({ 'bg-gray-100 dark:bg-primary-800 rounded-md p-4': hasPoll })}>{output}</div>;
+  } else {
+    const output = [
+      <Markup
+        ref={node}
+        tabIndex={0}
+        key='content'
+        className={clsx(baseClassName, {
+          'leading-normal !text-4xl': isOnlyEmoji,
+        })}
+        direction={direction}
+        lang={status.language || undefined}
+        size={textSize}
+        emojis={status.emojis}
+        mentions={status.mentions}
+        html={{ __html: parsedHtml }}
+      />,
+    ];
+
+    if (status.poll && typeof status.poll === 'string') {
+      output.push(<Poll id={status.poll} key='poll' status={status.url} />);
+    }
+
+    return <>{output}</>;
+  }
+};
+
+export default memo(PureStatusContent);

src/components/pure-status.tsx

@@ -9,6 +9,7 @@ import { Link, useHistory } from 'react-router-dom';
 import { openModal } from 'soapbox/actions/modals.ts';
 import { unfilterStatus } from 'soapbox/actions/statuses.ts';
 import PureEventPreview from 'soapbox/components/pure-event-preview.tsx';
+import PureStatusContent from 'soapbox/components/pure-status-content.tsx';
 import PureStatusReplyMentions from 'soapbox/components/pure-status-reply-mentions.tsx';
 import PureSensitiveContentOverlay from 'soapbox/components/statuses/pure-sensitive-content-overlay.tsx';
 import TranslateButton from 'soapbox/components/translate-button.tsx';
@@ -33,7 +34,6 @@ import { emojifyText } from 'soapbox/utils/emojify.tsx';
 import { defaultMediaVisibility, textForScreenReader, getActualStatus } from 'soapbox/utils/status.ts';
 
 import StatusActionBar from './status-action-bar.tsx';
-import StatusContent from './status-content.tsx';
 import StatusMedia from './status-media.tsx';
 import StatusInfo from './statuses/status-info.tsx';
 import Tombstone from './tombstone.tsx';
@@ -468,8 +468,8 @@ const PureStatus: React.FC<IPureStatus> = (props) => {
 
               {actualStatus.event ? <PureEventPreview className='shadow-xl' status={status} /> : (
                 <Stack space={4}>
-                  <StatusContent
-                    status={statusImmutable} // fix later
+                  <PureStatusContent
+                    status={status}
                     onClick={handleClick}
                     collapsable
                     translatable