diff --git a/src/components/quoted-status-indicator.tsx b/src/components/quoted-status-indicator.tsx new file mode 100644 index 0000000000..493db5f19d --- /dev/null +++ b/src/components/quoted-status-indicator.tsx @@ -0,0 +1,27 @@ +import React, { useCallback } from 'react'; + +import { HStack, Icon, Text } from 'soapbox/components/ui'; +import { useAppSelector } from 'soapbox/hooks'; +import { makeGetStatus } from 'soapbox/selectors'; + +interface IQuotedStatusIndicator { + /** The quoted status id. */ + statusId: string; +} + +const QuotedStatusIndicator: React.FC = ({ statusId }) => { + const getStatus = useCallback(makeGetStatus(), []); + + const status = useAppSelector(state => getStatus(state, { id: statusId })); + + if (!status) return null; + + return ( + + + {status.url} + + ); +}; + +export default QuotedStatusIndicator; diff --git a/src/components/quoted-status.tsx b/src/components/quoted-status.tsx index edbca14570..b90e753e62 100644 --- a/src/components/quoted-status.tsx +++ b/src/components/quoted-status.tsx @@ -11,6 +11,7 @@ import { defaultMediaVisibility } from 'soapbox/utils/status'; import EventPreview from './event-preview'; import OutlineBox from './outline-box'; +import QuotedStatusIndicator from './quoted-status-indicator'; import StatusContent from './status-content'; import StatusReplyMentions from './status-reply-mentions'; import SensitiveContentOverlay from './statuses/sensitive-content-overlay'; @@ -132,6 +133,8 @@ const QuotedStatus: React.FC = ({ status, onCancel, compose }) => collapsable /> + {status.quote && } + {status.media_attachments.size > 0 && (