diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx index 35827020f..3e30a3032 100644 --- a/app/soapbox/components/status.tsx +++ b/app/soapbox/components/status.tsx @@ -105,10 +105,6 @@ const Status: React.FC = (props) => { } }; - const handleExpandedToggle = (): void => { - dispatch(toggleStatusHidden(actualStatus)); - }; - const handleHotkeyOpenMedia = (e?: KeyboardEvent): void => { const status = actualStatus; const firstAttachment = status.media_attachments.first(); @@ -301,7 +297,7 @@ const Status: React.FC = (props) => { const accountAction = props.accountAction || reblogElement; const inReview = status.visibility === 'self'; - const isSensitive = status.sensitive; + const isSensitive = status.hidden; return ( @@ -382,8 +378,6 @@ const Status: React.FC = (props) => { diff --git a/app/soapbox/components/status_content.tsx b/app/soapbox/components/status_content.tsx index 7d771ec37..d2adc181e 100644 --- a/app/soapbox/components/status_content.tsx +++ b/app/soapbox/components/status_content.tsx @@ -35,49 +35,16 @@ const ReadMoreButton: React.FC = ({ onClick }) => ( ); -interface ISpoilerButton { - onClick: React.MouseEventHandler, - hidden: boolean, - tabIndex?: number, -} - -/** Button to expand status text behind a content warning */ -const SpoilerButton: React.FC = ({ onClick, hidden, tabIndex }) => ( - -); - interface IStatusContent { status: Status, - expanded?: boolean, - onExpandedToggle?: () => void, onClick?: () => void, collapsable?: boolean, } /** Renders the text content of a status */ -const StatusContent: React.FC = ({ status, expanded = false, onExpandedToggle, onClick, collapsable = false }) => { +const StatusContent: React.FC = ({ status, onClick, collapsable = false }) => { const history = useHistory(); - const [hidden, setHidden] = useState(true); const [collapsed, setCollapsed] = useState(false); const [onlyEmoji, setOnlyEmoji] = useState(false); @@ -186,18 +153,6 @@ const StatusContent: React.FC = ({ status, expanded = false, onE startXY.current = undefined; }; - const handleSpoilerClick: React.EventHandler = (e) => { - e.preventDefault(); - e.stopPropagation(); - - if (onExpandedToggle) { - // The parent manages the state - onExpandedToggle(); - } else { - setHidden(!hidden); - } - }; - const parsedHtml = useMemo((): string => { const { contentHtml: html } = status; @@ -212,13 +167,11 @@ const StatusContent: React.FC = ({ status, expanded = false, onE return null; } - const isHidden = onExpandedToggle ? !expanded : hidden; 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 content = { __html: parsedHtml }; - const spoilerContent = { __html: status.spoilerHtml }; const directionStyle: React.CSSProperties = { direction: 'ltr' }; const className = classNames(baseClassName, 'status-content', { 'cursor-pointer': onClick, @@ -231,37 +184,7 @@ const StatusContent: React.FC = ({ status, expanded = false, onE directionStyle.direction = 'rtl'; } - if (status.spoiler_text.length > 0) { - return ( -
-

- - -

- -
- - {!isHidden && status.poll && typeof status.poll === 'string' && ( - - )} -
- ); - } else if (onClick) { + if (onClick) { const output = [
{ {intl.formatMessage(isUnderReview ? messages.underReviewSubtitle : messages.sensitiveSubtitle)} + + {status.spoiler_text && ( +
+ + “” + +
+ )}
diff --git a/app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx b/app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx index 865bbaff4..b9b90ef27 100644 --- a/app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx +++ b/app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx @@ -44,7 +44,6 @@ const ScheduledStatus: React.FC = ({ statusId, ...other }) => diff --git a/app/soapbox/features/status/components/detailed-status.tsx b/app/soapbox/features/status/components/detailed-status.tsx index 52bc578af..4896d1a91 100644 --- a/app/soapbox/features/status/components/detailed-status.tsx +++ b/app/soapbox/features/status/components/detailed-status.tsx @@ -37,10 +37,6 @@ const DetailedStatus: React.FC = ({ const intl = useIntl(); const node = useRef(null); - const handleExpandedToggle = () => { - onToggleHidden(status); - }; - const handleOpenCompareHistoryModal = () => { onOpenCompareHistoryModal(status); }; @@ -51,7 +47,7 @@ const DetailedStatus: React.FC = ({ if (!account || typeof account !== 'object') return null; const isUnderReview = actualStatus.visibility === 'self'; - const isSensitive = actualStatus.sensitive; + const isSensitive = actualStatus.hidden; let statusTypeIcon = null; @@ -105,11 +101,7 @@ const DetailedStatus: React.FC = ({ /> ) : null} - + { diff --git a/app/soapbox/features/ui/components/pending_status.tsx b/app/soapbox/features/ui/components/pending_status.tsx index 76b8bb47e..64f0d168b 100644 --- a/app/soapbox/features/ui/components/pending_status.tsx +++ b/app/soapbox/features/ui/components/pending_status.tsx @@ -79,7 +79,6 @@ const PendingStatus: React.FC = ({ idempotencyKey, className, mu diff --git a/app/soapbox/normalizers/status.ts b/app/soapbox/normalizers/status.ts index 4788758d3..ea971c52f 100644 --- a/app/soapbox/normalizers/status.ts +++ b/app/soapbox/normalizers/status.ts @@ -149,6 +149,13 @@ const fixFiltered = (status: ImmutableMap) => { status.delete('filtered'); }; +/** If the status contains spoiler text, treat it as sensitive. */ +const fixSensitivity = (status: ImmutableMap) => { + if (status.get('spoiler_text')) { + status.set('sensitive', true); + } +}; + export const normalizeStatus = (status: Record) => { return StatusRecord( ImmutableMap(fromJS(status)).withMutations(status => { @@ -161,6 +168,7 @@ export const normalizeStatus = (status: Record) => { addSelfMention(status); fixQuote(status); fixFiltered(status); + fixSensitivity(status); }), ); };