Status: convert to React.FC

app/soapbox/components/status.tsx

@@ -1,9 +1,8 @@
 import classNames from 'classnames';
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { HotKeys } from 'react-hotkeys';
-import ImmutablePureComponent from 'react-immutable-pure-component';
+import { useIntl, FormattedMessage, IntlShape, defineMessages } from 'react-intl';
-import { injectIntl, FormattedMessage, IntlShape, defineMessages } from 'react-intl';
+import { NavLink, useHistory } from 'react-router-dom';
-import { NavLink, withRouter, RouteComponentProps } from 'react-router-dom';
 
 import Icon from 'soapbox/components/icon';
 import AccountContainer from 'soapbox/containers/account_container';
@@ -16,7 +15,6 @@ import StatusActionBar from './status_action_bar';
 import StatusContent from './status_content';
 import { HStack, Text } from './ui';
 
-import type { History } from 'history';
 import type { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 import type {
   Account as AccountEntity,
@@ -51,10 +49,9 @@ export const textForScreenReader = (intl: IntlShape, status: StatusEntity, reblo
   return values.join(', ');
 };
 
-interface IStatus extends RouteComponentProps {
+interface IStatus {
   id?: string,
   contextType?: string,
-  intl: IntlShape,
   status: StatusEntity,
   account: AccountEntity,
   otherAccounts: ImmutableList<AccountEntity>,
@@ -88,133 +85,72 @@ interface IStatus extends RouteComponentProps {
   displayMedia: string,
   allowedEmoji: ImmutableList<string>,
   focusable: boolean,
-  history: History,
   featured?: boolean,
   withDismiss?: boolean,
   hideActionBar?: boolean,
   hoverable?: boolean,
 }
 
-interface IStatusState {
+const Status: React.FC<IStatus> = (props) => {
-  showMedia: boolean,
+  const {
-  statusId?: string,
+    status,
-  emojiSelectorFocused: boolean,
+    focusable = true,
-}
+    hoverable = true,
+    onToggleHidden,
+    displayMedia,
+    onOpenMedia,
+    onOpenVideo,
+    onClick,
+    onReply,
+    onFavourite,
+    onReblog,
+    onMention,
+    onMoveUp,
+    onMoveDown,
+    muted,
+    hidden,
+    featured,
+    unread,
+    group,
+    hideActionBar,
+  } = props;
 
-class Status extends ImmutablePureComponent<IStatus, IStatusState> {
+  const intl = useIntl();
+  const history = useHistory();
 
-  static defaultProps = {
+  const didShowCard = useRef(false);
-    focusable: true,
+  const node = useRef<HTMLDivElement>(null);
-    hoverable: true,
+
+  const [showMedia, setShowMedia] = useState<boolean>(defaultMediaVisibility(status, displayMedia));
+  const [emojiSelectorFocused, setEmojiSelectorFocused] = useState(false);
+
+  // Track height changes we know about to compensate scrolling.
+  useEffect(() => {
+    didShowCard.current = Boolean(!muted && !hidden && status?.card);
+  }, []);
+
+  useEffect(() => {
+    setShowMedia(defaultMediaVisibility(status, displayMedia));
+  }, [status.id]);
+
+  const handleToggleMediaVisibility = (): void => {
+    setShowMedia(!showMedia);
   };
 
-  didShowCard = false;
+  const handleClick = (): void => {
-  node?: HTMLDivElement = undefined;
+    if (onClick) {
-  height?: number = undefined;
+      onClick();
-
-  // Avoid checking props that are functions (and whose equality will always
-  // evaluate to false. See react-immutable-pure-component for usage.
-  updateOnProps: any[] = [
-    'status',
-    'account',
-    'muted',
-    'hidden',
-  ];
-
-  state: IStatusState = {
-    showMedia: defaultMediaVisibility(this.props.status, this.props.displayMedia),
-    statusId: undefined,
-    emojiSelectorFocused: false,
-  };
-
-  // Track height changes we know about to compensate scrolling
-  componentDidMount(): void {
-    this.didShowCard = Boolean(!this.props.muted && !this.props.hidden && this.props.status && this.props.status.card);
-  }
-
-  getSnapshotBeforeUpdate(): ScrollPosition | null {
-    if (this.props.getScrollPosition) {
-      return this.props.getScrollPosition() || null;
     } else {
-      return null;
+      history.push(`/@${_properStatus().getIn(['account', 'acct'])}/posts/${_properStatus().id}`);
     }
-  }
-
-  static getDerivedStateFromProps(nextProps: IStatus, prevState: IStatusState) {
-    if (nextProps.status && nextProps.status.id !== prevState.statusId) {
-      return {
-        showMedia: defaultMediaVisibility(nextProps.status, nextProps.displayMedia),
-        statusId: nextProps.status.id,
-      };
-    } else {
-      return null;
-    }
-  }
-
-  // Compensate height changes
-  componentDidUpdate(_prevProps: IStatus, _prevState: IStatusState, snapshot?: ScrollPosition): void {
-    const doShowCard: boolean = Boolean(!this.props.muted && !this.props.hidden && this.props.status && this.props.status.card);
-
-    if (doShowCard && !this.didShowCard) {
-      this.didShowCard = true;
-
-      if (snapshot && this.props.updateScrollBottom) {
-        if (this.node && this.node.offsetTop < snapshot.top) {
-          this.props.updateScrollBottom(snapshot.height - snapshot.top);
-        }
-      }
-    }
-  }
-
-  componentWillUnmount(): void {
-    // FIXME: Run this code only when a status is being deleted.
-    //
-    // const { getScrollPosition, updateScrollBottom } = this.props;
-    //
-    // if (this.node && getScrollPosition && updateScrollBottom) {
-    //   const position = getScrollPosition();
-    //   if (position && this.node.offsetTop < position.top) {
-    //     requestAnimationFrame(() => {
-    //       updateScrollBottom(position.height - position.top);
-    //     });
-    //   }
-    // }
-  }
-
-  handleToggleMediaVisibility = (): void => {
-    this.setState({ showMedia: !this.state.showMedia });
-  }
-
-  handleClick = (): void => {
-    if (this.props.onClick) {
-      this.props.onClick();
-      return;
-    }
-
-    if (!this.props.history) {
-      return;
-    }
-
-    this.props.history.push(`/@${this._properStatus().getIn(['account', 'acct'])}/posts/${this._properStatus().id}`);
-  }
-
-  handleExpandClick: React.EventHandler<React.MouseEvent> = (e) => {
-    if (e.button === 0) {
-      if (!this.props.history) {
-        return;
-      }
-
-      this.props.history.push(`/@${this._properStatus().getIn(['account', 'acct'])}/posts/${this._properStatus().id}`);
-    }
-  }
-
-  handleExpandedToggle = (): void => {
-    this.props.onToggleHidden(this._properStatus());
   };
 
-  handleHotkeyOpenMedia = (e?: KeyboardEvent): void => {
+  const handleExpandedToggle = (): void => {
-    const { onOpenMedia, onOpenVideo } = this.props;
+    onToggleHidden(_properStatus());
-    const status = this._properStatus();
+  };
+
+  const handleHotkeyOpenMedia = (e?: KeyboardEvent): void => {
+    const status = _properStatus();
     const firstAttachment = status.media_attachments.first();
 
     e?.preventDefault();
@@ -226,313 +162,281 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
         onOpenMedia(status.media_attachments, 0);
       }
     }
-  }
+  };
 
-  handleHotkeyReply = (e?: KeyboardEvent): void => {
+  const handleHotkeyReply = (e?: KeyboardEvent): void => {
     e?.preventDefault();
-    this.props.onReply(this._properStatus());
+    onReply(_properStatus());
-  }
+  };
 
-  handleHotkeyFavourite = (): void => {
+  const handleHotkeyFavourite = (): void => {
-    this.props.onFavourite(this._properStatus());
+    onFavourite(_properStatus());
-  }
+  };
 
-  handleHotkeyBoost = (e?: KeyboardEvent): void => {
+  const handleHotkeyBoost = (e?: KeyboardEvent): void => {
-    this.props.onReblog(this._properStatus(), e);
+    onReblog(_properStatus(), e);
-  }
+  };
 
-  handleHotkeyMention = (e?: KeyboardEvent): void => {
+  const handleHotkeyMention = (e?: KeyboardEvent): void => {
     e?.preventDefault();
-    this.props.onMention(this._properStatus().account);
+    onMention(_properStatus().account);
-  }
+  };
 
-  handleHotkeyOpen = (): void => {
+  const handleHotkeyOpen = (): void => {
-    this.props.history.push(`/@${this._properStatus().getIn(['account', 'acct'])}/posts/${this._properStatus().id}`);
+    history.push(`/@${_properStatus().getIn(['account', 'acct'])}/posts/${_properStatus().id}`);
-  }
+  };
 
-  handleHotkeyOpenProfile = (): void => {
+  const handleHotkeyOpenProfile = (): void => {
-    this.props.history.push(`/@${this._properStatus().getIn(['account', 'acct'])}`);
+    history.push(`/@${_properStatus().getIn(['account', 'acct'])}`);
-  }
+  };
 
-  handleHotkeyMoveUp = (e?: KeyboardEvent): void => {
+  const handleHotkeyMoveUp = (e?: KeyboardEvent): void => {
-    this.props.onMoveUp(this.props.status.id, this.props.featured);
+    onMoveUp(status.id, featured);
-  }
+  };
 
-  handleHotkeyMoveDown = (e?: KeyboardEvent): void => {
+  const handleHotkeyMoveDown = (e?: KeyboardEvent): void => {
-    this.props.onMoveDown(this.props.status.id, this.props.featured);
+    onMoveDown(status.id, featured);
-  }
+  };
 
-  handleHotkeyToggleHidden = (): void => {
+  const handleHotkeyToggleHidden = (): void => {
-    this.props.onToggleHidden(this._properStatus());
+    onToggleHidden(_properStatus());
-  }
+  };
 
-  handleHotkeyToggleSensitive = (): void => {
+  const handleHotkeyToggleSensitive = (): void => {
-    this.handleToggleMediaVisibility();
+    handleToggleMediaVisibility();
-  }
+  };
 
-  handleHotkeyReact = (): void => {
+  const handleHotkeyReact = (): void => {
-    this._expandEmojiSelector();
+    _expandEmojiSelector();
-  }
+  };
 
-  handleEmojiSelectorExpand: React.EventHandler<React.KeyboardEvent> = e => {
+  const handleEmojiSelectorUnfocus = (): void => {
-    if (e.key === 'Enter') {
+    setEmojiSelectorFocused(false);
-      this._expandEmojiSelector();
+  };
-    }
-    e.preventDefault();
-  }
 
-  handleEmojiSelectorUnfocus = (): void => {
+  const _expandEmojiSelector = (): void => {
-    this.setState({ emojiSelectorFocused: false });
+    setEmojiSelectorFocused(true);
-  }
+    const firstEmoji: HTMLDivElement | null | undefined = node.current?.querySelector('.emoji-react-selector .emoji-react-selector__emoji');
-
-  _expandEmojiSelector = (): void => {
-    this.setState({ emojiSelectorFocused: true });
-    const firstEmoji: HTMLDivElement | null | undefined = this.node?.querySelector('.emoji-react-selector .emoji-react-selector__emoji');
     firstEmoji?.focus();
   };
 
-  _properStatus(): StatusEntity {
+  const _properStatus = (): StatusEntity => {
-    const { status } = this.props;
-
     if (status.reblog && typeof status.reblog === 'object') {
       return status.reblog;
     } else {
       return status;
     }
+  };
+
+  if (!status) return null;
+  const actualStatus = _properStatus();
+  let prepend, rebloggedByText, reblogElement, reblogElementMobile;
+
+  if (hidden) {
+    return (
+      <div ref={node}>
+        {actualStatus.getIn(['account', 'display_name']) || actualStatus.getIn(['account', 'username'])}
+        {actualStatus.content}
+      </div>
+    );
   }
 
-  handleRef = (c: HTMLDivElement): void => {
+  if (status.filtered || actualStatus.filtered) {
-    this.node = c;
+    const minHandlers = muted ? undefined : {
-  }
+      moveUp: handleHotkeyMoveUp,
-
+      moveDown: handleHotkeyMoveDown,
-  render() {
-    const poll = null;
-    let prepend, rebloggedByText, reblogElement, reblogElementMobile;
-
-    const { intl, hidden, featured, unread, group } = this.props;
-
-    // FIXME: why does this need to reassign status and account??
-    let { status, account, ...other } = this.props; // eslint-disable-line prefer-const
-
-    if (!status) return null;
-
-    if (hidden) {
-      return (
-        <div ref={this.handleRef}>
-          {status.getIn(['account', 'display_name']) || status.getIn(['account', 'username'])}
-          {status.content}
-        </div>
-      );
-    }
-
-    if (status.filtered || status.getIn(['reblog', 'filtered'])) {
-      const minHandlers = this.props.muted ? undefined : {
-        moveUp: this.handleHotkeyMoveUp,
-        moveDown: this.handleHotkeyMoveDown,
-      };
-
-      return (
-        <HotKeys handlers={minHandlers}>
-          <div className={classNames('status__wrapper', 'status__wrapper--filtered', { focusable: this.props.focusable })} tabIndex={this.props.focusable ? 0 : undefined} ref={this.handleRef}>
-            <FormattedMessage id='status.filtered' defaultMessage='Filtered' />
-          </div>
-        </HotKeys>
-      );
-    }
-
-    if (featured) {
-      prepend = (
-        <div className='pt-4 px-4'>
-          <HStack alignItems='center' space={1}>
-            <Icon src={require('@tabler/icons/pinned.svg')} className='text-gray-600 dark:text-gray-400' />
-
-            <Text size='sm' theme='muted' weight='medium'>
-              <FormattedMessage id='status.pinned' defaultMessage='Pinned post' />
-            </Text>
-          </HStack>
-        </div>
-      );
-    }
-
-    if (status.reblog && typeof status.reblog === 'object') {
-      const displayNameHtml = { __html: String(status.getIn(['account', 'display_name_html'])) };
-
-      reblogElement = (
-        <NavLink
-          to={`/@${status.getIn(['account', 'acct'])}`}
-          onClick={(event) => event.stopPropagation()}
-          className='hidden sm:flex items-center text-gray-700 dark:text-gray-600 text-xs font-medium space-x-1 hover:underline'
-        >
-          <Icon src={require('@tabler/icons/repeat.svg')} className='text-green-600' />
-
-          <HStack alignItems='center'>
-            <FormattedMessage
-              id='status.reblogged_by'
-              defaultMessage='{name} reposted'
-              values={{
-                name: <bdi className='max-w-[100px] truncate pr-1'>
-                  <strong className='text-gray-800 dark:text-gray-200' dangerouslySetInnerHTML={displayNameHtml} />
-                </bdi>,
-              }}
-            />
-          </HStack>
-        </NavLink>
-      );
-
-      reblogElementMobile = (
-        <div className='pb-5 -mt-2 sm:hidden truncate'>
-          <NavLink
-            to={`/@${status.getIn(['account', 'acct'])}`}
-            onClick={(event) => event.stopPropagation()}
-            className='flex items-center text-gray-700 dark:text-gray-600 text-xs font-medium space-x-1 hover:underline'
-          >
-            <Icon src={require('@tabler/icons/repeat.svg')} className='text-green-600' />
-
-            <span>
-              <FormattedMessage
-                id='status.reblogged_by'
-                defaultMessage='{name} reposted'
-                values={{
-                  name: <bdi>
-                    <strong className='text-gray-800 dark:text-gray-200' dangerouslySetInnerHTML={displayNameHtml} />
-                  </bdi>,
-                }}
-              />
-            </span>
-          </NavLink>
-        </div>
-      );
-
-      rebloggedByText = intl.formatMessage(
-        messages.reblogged_by,
-        { name: String(status.getIn(['account', 'acct'])) },
-      );
-
-      // @ts-ignore what the FUCK
-      account = status.account;
-      status = status.reblog;
-    }
-
-    let quote;
-
-    if (status.quote) {
-      if (status.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={status.quote as string} />;
-      }
-    }
-
-    const handlers = this.props.muted ? undefined : {
-      reply: this.handleHotkeyReply,
-      favourite: this.handleHotkeyFavourite,
-      boost: this.handleHotkeyBoost,
-      mention: this.handleHotkeyMention,
-      open: this.handleHotkeyOpen,
-      openProfile: this.handleHotkeyOpenProfile,
-      moveUp: this.handleHotkeyMoveUp,
-      moveDown: this.handleHotkeyMoveDown,
-      toggleHidden: this.handleHotkeyToggleHidden,
-      toggleSensitive: this.handleHotkeyToggleSensitive,
-      openMedia: this.handleHotkeyOpenMedia,
-      react: this.handleHotkeyReact,
     };
 
-    const statusUrl = `/@${status.getIn(['account', 'acct'])}/posts/${status.id}`;
-    // const favicon = status.getIn(['account', 'pleroma', 'favicon']);
-    // const domain = getDomain(status.account);
-
     return (
-      <HotKeys handlers={handlers} data-testid='status'>
+      <HotKeys handlers={minHandlers}>
-        <div
+        <div className={classNames('status__wrapper', 'status__wrapper--filtered', { focusable })} tabIndex={focusable ? 0 : undefined} ref={node}>
-          className={classNames('status cursor-pointer', { focusable: this.props.focusable })}
+          <FormattedMessage id='status.filtered' defaultMessage='Filtered' />
-          tabIndex={this.props.focusable && !this.props.muted ? 0 : undefined}
-          data-featured={featured ? 'true' : null}
-          aria-label={textForScreenReader(intl, status, rebloggedByText)}
-          ref={this.handleRef}
-          onClick={() => this.props.history.push(statusUrl)}
-          role='link'
-        >
-          {prepend}
-
-          <div
-            className={classNames({
-              'status__wrapper': true,
-              [`status-${status.visibility}`]: true,
-              'status-reply': !!status.in_reply_to_id,
-              muted: this.props.muted,
-              read: unread === false,
-            })}
-            data-id={status.id}
-          >
-            {reblogElementMobile}
-
-            <div className='mb-4'>
-              <AccountContainer
-                key={String(status.getIn(['account', 'id']))}
-                id={String(status.getIn(['account', 'id']))}
-                timestamp={status.created_at}
-                timestampUrl={statusUrl}
-                action={reblogElement}
-                hideActions={!reblogElement}
-                showEdit={!!status.edited_at}
-                showProfileHoverCard={this.props.hoverable}
-                withLinkToProfile={this.props.hoverable}
-              />
-            </div>
-
-            <div className='status__content-wrapper'>
-              {!group && status.group && (
-                <div className='status__meta'>
-                  Posted in <NavLink to={`/groups/${status.getIn(['group', 'id'])}`}>{String(status.getIn(['group', 'title']))}</NavLink>
-                </div>
-              )}
-
-              <StatusReplyMentions
-                status={this._properStatus()}
-                hoverable={this.props.hoverable}
-              />
-
-              <StatusContent
-                status={status}
-                onClick={this.handleClick}
-                expanded={!status.hidden}
-                onExpandedToggle={this.handleExpandedToggle}
-                collapsable
-              />
-
-              <StatusMedia
-                status={status}
-                muted={this.props.muted}
-                onClick={this.handleClick}
-                showMedia={this.state.showMedia}
-                onToggleVisibility={this.handleToggleMediaVisibility}
-              />
-
-              {poll}
-              {quote}
-
-              {!this.props.hideActionBar && (
-                <StatusActionBar
-                  status={status}
-                  // @ts-ignore what?
-                  account={account}
-                  emojiSelectorFocused={this.state.emojiSelectorFocused}
-                  handleEmojiSelectorUnfocus={this.handleEmojiSelectorUnfocus}
-                  {...other}
-                />
-              )}
-            </div>
-          </div>
         </div>
       </HotKeys>
     );
   }
 
-}
+  if (featured) {
+    prepend = (
+      <div className='pt-4 px-4'>
+        <HStack alignItems='center' space={1}>
+          <Icon src={require('@tabler/icons/pinned.svg')} className='text-gray-600 dark:text-gray-400' />
 
-export default withRouter(injectIntl(Status));
+          <Text size='sm' theme='muted' weight='medium'>
+            <FormattedMessage id='status.pinned' defaultMessage='Pinned post' />
+          </Text>
+        </HStack>
+      </div>
+    );
+  }
+
+  if (status.reblog && typeof status.reblog === 'object') {
+    const displayNameHtml = { __html: String(status.getIn(['account', 'display_name_html'])) };
+
+    reblogElement = (
+      <NavLink
+        to={`/@${status.getIn(['account', 'acct'])}`}
+        onClick={(event) => event.stopPropagation()}
+        className='hidden sm:flex items-center text-gray-700 dark:text-gray-600 text-xs font-medium space-x-1 hover:underline'
+      >
+        <Icon src={require('@tabler/icons/repeat.svg')} className='text-green-600' />
+
+        <HStack alignItems='center'>
+          <FormattedMessage
+            id='status.reblogged_by'
+            defaultMessage='{name} reposted'
+            values={{
+              name: <bdi className='max-w-[100px] truncate pr-1'>
+                <strong className='text-gray-800 dark:text-gray-200' dangerouslySetInnerHTML={displayNameHtml} />
+              </bdi>,
+            }}
+          />
+        </HStack>
+      </NavLink>
+    );
+
+    reblogElementMobile = (
+      <div className='pb-5 -mt-2 sm:hidden truncate'>
+        <NavLink
+          to={`/@${status.getIn(['account', 'acct'])}`}
+          onClick={(event) => event.stopPropagation()}
+          className='flex items-center text-gray-700 dark:text-gray-600 text-xs font-medium space-x-1 hover:underline'
+        >
+          <Icon src={require('@tabler/icons/repeat.svg')} className='text-green-600' />
+
+          <span>
+            <FormattedMessage
+              id='status.reblogged_by'
+              defaultMessage='{name} reposted'
+              values={{
+                name: <bdi>
+                  <strong className='text-gray-800 dark:text-gray-200' dangerouslySetInnerHTML={displayNameHtml} />
+                </bdi>,
+              }}
+            />
+          </span>
+        </NavLink>
+      </div>
+    );
+
+    rebloggedByText = intl.formatMessage(
+      messages.reblogged_by,
+      { name: String(status.getIn(['account', 'acct'])) },
+    );
+  }
+
+  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 handlers = muted ? undefined : {
+    reply: handleHotkeyReply,
+    favourite: handleHotkeyFavourite,
+    boost: handleHotkeyBoost,
+    mention: handleHotkeyMention,
+    open: handleHotkeyOpen,
+    openProfile: handleHotkeyOpenProfile,
+    moveUp: handleHotkeyMoveUp,
+    moveDown: handleHotkeyMoveDown,
+    toggleHidden: handleHotkeyToggleHidden,
+    toggleSensitive: handleHotkeyToggleSensitive,
+    openMedia: handleHotkeyOpenMedia,
+    react: handleHotkeyReact,
+  };
+
+  const statusUrl = `/@${actualStatus.getIn(['account', 'acct'])}/posts/${actualStatus.id}`;
+
+  return (
+    <HotKeys handlers={handlers} data-testid='status'>
+      <div
+        className={classNames('status cursor-pointer', { focusable })}
+        tabIndex={focusable && !muted ? 0 : undefined}
+        data-featured={featured ? 'true' : null}
+        aria-label={textForScreenReader(intl, actualStatus, rebloggedByText)}
+        ref={node}
+        onClick={() => history.push(statusUrl)}
+        role='link'
+      >
+        {prepend}
+
+        <div
+          className={classNames('status__wrapper', `status-${actualStatus.visibility}`, {
+            'status-reply': !!status.in_reply_to_id,
+            muted,
+            read: unread === false,
+          })}
+          data-id={status.id}
+        >
+          {reblogElementMobile}
+
+          <div className='mb-4'>
+            <AccountContainer
+              key={String(actualStatus.getIn(['account', 'id']))}
+              id={String(actualStatus.getIn(['account', 'id']))}
+              timestamp={actualStatus.created_at}
+              timestampUrl={statusUrl}
+              action={reblogElement}
+              hideActions={!reblogElement}
+              showEdit={!!actualStatus.edited_at}
+              showProfileHoverCard={hoverable}
+              withLinkToProfile={hoverable}
+            />
+          </div>
+
+          <div className='status__content-wrapper'>
+            {!group && actualStatus.group && (
+              <div className='status__meta'>
+                Posted in <NavLink to={`/groups/${actualStatus.getIn(['group', 'id'])}`}>{String(actualStatus.getIn(['group', 'title']))}</NavLink>
+              </div>
+            )}
+
+            <StatusReplyMentions
+              status={actualStatus}
+              hoverable={hoverable}
+            />
+
+            <StatusContent
+              status={actualStatus}
+              onClick={handleClick}
+              expanded={!status.hidden}
+              onExpandedToggle={handleExpandedToggle}
+              collapsable
+            />
+
+            <StatusMedia
+              status={actualStatus}
+              muted={muted}
+              onClick={handleClick}
+              showMedia={showMedia}
+              onToggleVisibility={handleToggleMediaVisibility}
+            />
+
+            {quote}
+
+            {!hideActionBar && (
+              // @ts-ignore
+              <StatusActionBar
+                emojiSelectorFocused={emojiSelectorFocused}
+                handleEmojiSelectorUnfocus={handleEmojiSelectorUnfocus}
+                {...props}
+                status={actualStatus}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    </HotKeys>
+  );
+};
+
+export default Status;