Switch to workspace

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

packages/pl-fe/src/features/draft-statuses/components/draft-status-action-bar.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+
+import { setComposeToStatus } from 'soapbox/actions/compose';
+import { cancelDraftStatus } from 'soapbox/actions/draft-statuses';
+import { openModal } from 'soapbox/actions/modals';
+import { getSettings } from 'soapbox/actions/settings';
+import { Button, HStack } from 'soapbox/components/ui';
+import { useAppDispatch } from 'soapbox/hooks';
+
+import type { Status as StatusEntity } from 'soapbox/normalizers';
+import type { DraftStatus } from 'soapbox/reducers/draft-statuses';
+
+const messages = defineMessages({
+  deleteConfirm: { id: 'confirmations.draft_status_delete.confirm', defaultMessage: 'Discard' },
+  deleteHeading: { id: 'confirmations.draft_status_delete.heading', defaultMessage: 'Cancel draft post' },
+  deleteMessage: { id: 'confirmations.draft_status_delete.message', defaultMessage: 'Are you sure you want to discard this draft post?' },
+});
+
+interface IDraftStatusActionBar {
+  source: DraftStatus;
+  status: StatusEntity;
+}
+
+const DraftStatusActionBar: React.FC<IDraftStatusActionBar> = ({ source, status }) => {
+  const intl = useIntl();
+
+  const dispatch = useAppDispatch();
+
+  const handleCancelClick = () => {
+    dispatch((_, getState) => {
+
+      const deleteModal = getSettings(getState()).get('deleteModal');
+      if (!deleteModal) {
+        dispatch(cancelDraftStatus(source.draft_id));
+      } else {
+        dispatch(openModal('CONFIRM', {
+          heading: intl.formatMessage(messages.deleteHeading),
+          message: intl.formatMessage(messages.deleteMessage),
+          confirm: intl.formatMessage(messages.deleteConfirm),
+          onConfirm: () => dispatch(cancelDraftStatus(source.draft_id)),
+        }));
+      }
+    });
+  };
+
+  const handleEditClick = () => {
+    dispatch(setComposeToStatus(status, status.poll, source.text, source.spoiler_text, source.content_type, false, source.draft_id, source.editorState));
+    dispatch(openModal('COMPOSE'));
+  };
+
+  return (
+    <HStack space={2} justifyContent='end'>
+      <Button theme='primary' size='sm' onClick={handleEditClick}>
+        <FormattedMessage id='draft_status.edit' defaultMessage='Edit' />
+      </Button>
+      <Button theme='danger' size='sm' onClick={handleCancelClick}>
+        <FormattedMessage id='draft_status.cancel' defaultMessage='Delete' />
+      </Button>
+    </HStack>
+  );
+};
+
+export { DraftStatusActionBar as default };

packages/pl-fe/src/features/draft-statuses/components/draft-status.tsx

@@ -0,0 +1,88 @@
+import clsx from 'clsx';
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+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, Stack } from 'soapbox/components/ui';
+import QuotedStatus from 'soapbox/features/status/containers/quoted-status-container';
+import PollPreview from 'soapbox/features/ui/components/poll-preview';
+import { useAppSelector } from 'soapbox/hooks';
+
+import { buildStatus } from '../builder';
+
+import DraftStatusActionBar from './draft-status-action-bar';
+
+import type { Status as StatusEntity } from 'soapbox/normalizers';
+import type { DraftStatus as DraftStatusType } from 'soapbox/reducers/draft-statuses';
+
+interface IDraftStatus {
+  draftStatus: DraftStatusType;
+}
+
+const DraftStatus: React.FC<IDraftStatus> = ({ draftStatus, ...other }) => {
+  const status = useAppSelector((state) => {
+    if (!draftStatus) return null;
+    return buildStatus(state, draftStatus);
+  }) as StatusEntity | null;
+
+  if (!status) return null;
+
+  const account = status.account;
+
+  let quote;
+
+  if (status.quote_id) {
+    if ((status.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_id} />;
+    }
+  }
+
+  return (
+    <div className={clsx('status__wrapper py-4', `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
+              action={<DraftStatusActionBar source={draftStatus} status={status} {...other} />}
+            />
+          </HStack>
+        </div>
+
+        <StatusReplyMentions status={status} />
+
+        <Stack space={4}>
+          <StatusContent
+            status={status}
+            collapsable
+          />
+
+          {status.media_attachments.length > 0 && (
+            <AttachmentThumbs
+              media={status.media_attachments}
+              sensitive={status.sensitive}
+            />
+          )}
+
+          {quote}
+
+          {status.poll && <PollPreview poll={status.poll} />}
+        </Stack>
+      </div>
+    </div>
+  );
+};
+
+export { DraftStatus as default };