soapbox/app/soapbox/features/scheduled-statuses/components/scheduled-status.tsx

import clsx from 'clsx';
import React from 'react';

import Account from 'soapbox/components/account';
import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
import StatusContent from 'soapbox/components/status-content';
import StatusReplyMentions from 'soapbox/components/status-reply-mentions';
import { HStack } from 'soapbox/components/ui';
import PollPreview from 'soapbox/features/ui/components/poll-preview';
import { useAppSelector } from 'soapbox/hooks';

import { buildStatus } from '../builder';

import ScheduledStatusActionBar from './scheduled-status-action-bar';

import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities';

interface IScheduledStatus {
  statusId: string
}

const ScheduledStatus: React.FC<IScheduledStatus> = ({ statusId, ...other }) => {
  const status = useAppSelector((state) => {
    const scheduledStatus = state.scheduled_statuses.get(statusId);

    if (!scheduledStatus) return null;
    return buildStatus(state, scheduledStatus);
  }) as StatusEntity | null;

  if (!status) return null;

  const account = status.account as AccountEntity;

  return (
    <div className={clsx('status__wrapper', `status__wrapper-${status.visibility}`, { 'status__wrapper-reply': !!status.in_reply_to_id })} tabIndex={0}>
      <div className={clsx('status', `status-${status.visibility}`, { 'status-reply': !!status.in_reply_to_id })} data-id={status.id}>
        <div className='mb-4'>
          <HStack justifyContent='between' alignItems='start'>
            <Account
              key={account.id}
              account={account}
              timestamp={status.created_at}
              futureTimestamp
              hideActions
            />
          </HStack>
        </div>

        <StatusReplyMentions status={status} />

        <StatusContent
          status={status}
          collapsable
        />

        {status.media_attachments.length > 0 && (
          <AttachmentThumbs
            media={status.media_attachments}
            sensitive={status.sensitive}
          />
        )}

        {status.poll && <PollPreview poll={status.poll} />}

        <ScheduledStatusActionBar status={status} {...other} />
      </div>
    </div>
  );
};

export default ScheduledStatus;