Merge branch 'quote-sensitive' into 'develop'

Sensitive quotes

Closes #930

See merge request soapbox-pub/soapbox-fe!1504

app/soapbox/components/__tests__/quoted-status.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { render, screen, rootState } from '../../jest/test-helpers';
+import { normalizeStatus, normalizeAccount } from '../../normalizers';
+import QuotedStatus from '../quoted-status';
+
+describe('<QuotedStatus />', () => {
+  it('renders content', () => {
+    const account = normalizeAccount({
+      id: '1',
+      acct: 'alex',
+    });
+
+    const status = normalizeStatus({
+      id: '1',
+      account,
+      content: 'hello world',
+      contentHtml: 'hello world',
+    });
+
+    const state = rootState.setIn(['accounts', '1', account]);
+
+    render(<QuotedStatus status={status} />, null, state);
+    screen.getByText(/hello world/i);
+    expect(screen.getByTestId('quoted-status')).toHaveTextContent(/hello world/i);
+  });
+});

app/soapbox/components/quoted-status.tsx

@@ -1,11 +1,13 @@
 import classNames from 'classnames';
-import React from 'react';
+import React, { useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage, FormattedList } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
 import StatusMedia from 'soapbox/components/status-media';
 import { Stack, Text } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account_container';
+import { useSettings } from 'soapbox/hooks';
+import { defaultMediaVisibility } from 'soapbox/utils/status';
 
 import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities';
 
@@ -27,6 +29,11 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
   const intl = useIntl();
   const history = useHistory();
 
+  const settings = useSettings();
+  const displayMedia = settings.get('displayMedia');
+
+  const [showMedia, setShowMedia] = useState<boolean>(defaultMediaVisibility(status, displayMedia));
+
   const handleExpandClick = (e: React.MouseEvent<HTMLDivElement>) => {
     if (!status) return;
     const account = status.account as AccountEntity;
@@ -44,6 +51,10 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
     }
   };
 
+  const handleToggleMediaVisibility = () => {
+    setShowMedia(!showMedia);
+  };
+
   const renderReplyMentions = () => {
     if (!status?.in_reply_to_id) {
       return null;
@@ -113,6 +124,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
 
   return (
     <Stack
+      data-testid='quoted-status'
       space={2}
       className={classNames('mt-3 p-4 rounded-lg border border-solid border-gray-100 dark:border-slate-700 cursor-pointer', {
         'hover:bg-gray-50 dark:hover:bg-slate-700': !compose,
@@ -135,7 +147,12 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
         dangerouslySetInnerHTML={{ __html: status.contentHtml }}
       />
 
-      <StatusMedia status={status} />
+      <StatusMedia
+        status={status}
+        muted={compose}
+        showMedia={showMedia}
+        onToggleVisibility={handleToggleMediaVisibility}
+      />
     </Stack>
   );
 };

app/soapbox/components/status.tsx

@@ -8,6 +8,7 @@ import { NavLink, withRouter, RouteComponentProps } from 'react-router-dom';
 import Icon from 'soapbox/components/icon';
 import AccountContainer from 'soapbox/containers/account_container';
 import QuotedStatus from 'soapbox/features/status/containers/quoted_status_container';
+import { defaultMediaVisibility } from 'soapbox/utils/status';
 
 import StatusMedia from './status-media';
 import StatusReplyMentions from './status-reply-mentions';
@@ -50,16 +51,6 @@ export const textForScreenReader = (intl: IntlShape, status: StatusEntity, reblo
   return values.join(', ');
 };
 
-export const defaultMediaVisibility = (status: StatusEntity, displayMedia: string): boolean => {
-  if (!status) return false;
-
-  if (status.reblog && typeof status.reblog === 'object') {
-    status = status.reblog;
-  }
-
-  return (displayMedia !== 'hide_all' && !status.sensitive || displayMedia === 'show_all');
-};
-
 interface IStatus extends RouteComponentProps {
   id?: string,
   contextType?: string,
@@ -431,7 +422,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
           </div>
         );
       } else {
-        quote = <QuotedStatus statusId={status.quote} />;
+        quote = <QuotedStatus statusId={status.quote as string} />;
       }
     }
 

app/soapbox/components/ui/form-group/form-group.tsx

@@ -8,6 +8,8 @@ import Stack from '../stack/stack';
 interface IFormGroup {
   /** Input label message. */
   labelText?: React.ReactNode,
+  /** Input label tooltip message. */
+  labelTitle?: string,
   /** Input hint message. */
   hintText?: React.ReactNode,
   /** Input errors. */
@@ -16,7 +18,7 @@ interface IFormGroup {
 
 /** Input container with label. Renders the child. */
 const FormGroup: React.FC<IFormGroup> = (props) => {
-  const { children, errors = [], labelText, hintText } = props;
+  const { children, errors = [], labelText, labelTitle, hintText } = props;
   const formFieldId: string = useMemo(() => `field-${uuidv4()}`, []);
   const inputChildren = React.Children.toArray(children);
   const hasError = errors?.length > 0;
@@ -41,6 +43,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
               htmlFor={formFieldId}
               data-testid='form-group-label'
               className='-mt-0.5 block text-sm font-medium text-gray-700 dark:text-gray-400'
+              title={labelTitle}
             >
               {labelText}
             </label>
@@ -74,6 +77,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
           htmlFor={formFieldId}
           data-testid='form-group-label'
           className='block text-sm font-medium text-gray-700 dark:text-gray-400'
+          title={labelTitle}
         >
           {labelText}
         </label>

app/soapbox/features/compose/components/sensitive-button.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
+
+import { changeComposeSensitivity } from 'soapbox/actions/compose';
+import { FormGroup, Checkbox } from 'soapbox/components/ui';
+import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+
+const messages = defineMessages({
+  marked: { id: 'compose_form.sensitive.marked', defaultMessage: 'Media is marked as sensitive' },
+  unmarked: { id: 'compose_form.sensitive.unmarked', defaultMessage: 'Media is not marked as sensitive' },
+});
+
+/** Button to mark own media as sensitive. */
+const SensitiveButton: React.FC = () => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const active = useAppSelector(state => state.compose.get('sensitive') === true);
+  const disabled = useAppSelector(state => state.compose.get('spoiler') === true);
+
+  const onClick = () => {
+    dispatch(changeComposeSensitivity());
+  };
+
+  return (
+    <div className='px-2.5 py-1'>
+      <FormGroup
+        labelText={<FormattedMessage id='compose_form.sensitive.hide' defaultMessage='Mark media as sensitive' />}
+        labelTitle={intl.formatMessage(active ? messages.marked : messages.unmarked)}
+      >
+        <Checkbox
+          name='mark-sensitive'
+          checked={active}
+          onChange={onClick}
+          disabled={disabled}
+        />
+      </FormGroup>
+    </div>
+  );
+};
+
+export default SensitiveButton;

app/soapbox/features/compose/components/upload_form.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { useAppSelector } from 'soapbox/hooks';
 
-// import SensitiveButtonContainer from '../containers/sensitive_button_container';
+import SensitiveButton from '../components/sensitive-button';
 import UploadProgress from '../components/upload-progress';
 import UploadContainer from '../containers/upload_container';
 
@@ -25,7 +25,7 @@ const UploadForm = () => {
         ))}
       </div>
 
-      {/* {!mediaIds.isEmpty() && <SensitiveButtonContainer />} */}
+      {!mediaIds.isEmpty() && <SensitiveButton />}
     </div>
   );
 };

app/soapbox/features/compose/containers/quoted_status_container.js

@@ -1,26 +0,0 @@
-import { connect } from 'react-redux';
-
-import { cancelQuoteCompose } from 'soapbox/actions/compose';
-import QuotedStatus from 'soapbox/features/status/components/quoted_status';
-import { makeGetStatus } from 'soapbox/selectors';
-
-const makeMapStateToProps = () => {
-  const getStatus = makeGetStatus();
-
-  const mapStateToProps = state => ({
-    status: getStatus(state, { id: state.getIn(['compose', 'quote']) }),
-    compose: true,
-  });
-
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = dispatch => ({
-
-  onCancel() {
-    dispatch(cancelQuoteCompose());
-  },
-
-});
-
-export default connect(makeMapStateToProps, mapDispatchToProps)(QuotedStatus);

app/soapbox/features/compose/containers/quoted_status_container.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { cancelQuoteCompose } from 'soapbox/actions/compose';
+import QuotedStatus from 'soapbox/components/quoted-status';
+import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { makeGetStatus } from 'soapbox/selectors';
+
+const getStatus = makeGetStatus();
+
+/** QuotedStatus shown in post composer. */
+const QuotedStatusContainer: React.FC = () => {
+  const dispatch = useAppDispatch();
+  const status = useAppSelector(state => getStatus(state, { id: state.compose.get('quote') }));
+
+  const onCancel = () => {
+    dispatch(cancelQuoteCompose());
+  };
+
+  if (!status) {
+    return null;
+  }
+
+  return (
+    <QuotedStatus
+      status={status}
+      onCancel={onCancel}
+      compose
+    />
+  );
+};
+
+export default QuotedStatusContainer;

app/soapbox/features/compose/containers/sensitive_button_container.js

@@ -1,60 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-
-import { changeComposeSensitivity } from 'soapbox/actions/compose';
-
-const messages = defineMessages({
-  marked: { id: 'compose_form.sensitive.marked', defaultMessage: 'Media is marked as sensitive' },
-  unmarked: { id: 'compose_form.sensitive.unmarked', defaultMessage: 'Media is not marked as sensitive' },
-});
-
-const mapStateToProps = state => ({
-  active: state.getIn(['compose', 'sensitive']),
-  disabled: state.getIn(['compose', 'spoiler']),
-});
-
-const mapDispatchToProps = dispatch => ({
-
-  onClick() {
-    dispatch(changeComposeSensitivity());
-  },
-
-});
-
-class SensitiveButton extends React.PureComponent {
-
-  static propTypes = {
-    active: PropTypes.bool,
-    disabled: PropTypes.bool,
-    onClick: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  render() {
-    const { active, disabled, onClick, intl } = this.props;
-
-    return (
-      <div className='compose-form__sensitive-button'>
-        <label className={classNames('icon-button', { active })} title={intl.formatMessage(active ? messages.marked : messages.unmarked)}>
-          <input
-            name='mark-sensitive'
-            type='checkbox'
-            checked={active}
-            onChange={onClick}
-            disabled={disabled}
-          />
-
-          <span className={classNames('checkbox', { active })} />
-
-          <FormattedMessage id='compose_form.sensitive.hide' defaultMessage='Mark media as sensitive' />
-        </label>
-      </div>
-    );
-  }
-
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(SensitiveButton));

app/soapbox/features/status/components/detailed-status.tsx

@@ -115,7 +115,7 @@ class DetailedStatus extends ImmutablePureComponent<IDetailedStatus, IDetailedSt
           </div>
         );
       } else {
-        quote = <QuotedStatus statusId={status.quote} />;
+        quote = <QuotedStatus statusId={status.quote as string} />;
       }
     }
 

app/soapbox/features/status/containers/quoted_status_container.js

@@ -1,17 +0,0 @@
-import { connect } from 'react-redux';
-
-import { makeGetStatus } from 'soapbox/selectors';
-
-import QuotedStatus from '../components/quoted_status';
-
-const makeMapStateToProps = () => {
-  const getStatus = makeGetStatus();
-
-  const mapStateToProps = (state, { statusId }) => ({
-    status: getStatus(state, { id: statusId }),
-  });
-
-  return mapStateToProps;
-};
-
-export default connect(makeMapStateToProps)(QuotedStatus);

app/soapbox/features/status/containers/quoted_status_container.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import QuotedStatus from 'soapbox/components/quoted-status';
+import { useAppSelector } from 'soapbox/hooks';
+import { makeGetStatus } from 'soapbox/selectors';
+
+const getStatus = makeGetStatus();
+
+interface IQuotedStatusContainer {
+  /** Status ID to the quoted status. */
+  statusId: string,
+}
+
+const QuotedStatusContainer: React.FC<IQuotedStatusContainer> = ({ statusId }) => {
+  const status = useAppSelector(state => getStatus(state, { id: statusId }));
+
+  if (!status) {
+    return null;
+  }
+
+  return (
+    <QuotedStatus
+      status={status}
+    />
+  );
+};
+
+export default QuotedStatusContainer;

app/soapbox/features/status/index.tsx

@@ -50,13 +50,14 @@ import {
 } from 'soapbox/actions/statuses';
 import MissingIndicator from 'soapbox/components/missing_indicator';
 import ScrollableList from 'soapbox/components/scrollable_list';
-import { textForScreenReader, defaultMediaVisibility } from 'soapbox/components/status';
+import { textForScreenReader } from 'soapbox/components/status';
 import SubNavigation from 'soapbox/components/sub_navigation';
 import Tombstone from 'soapbox/components/tombstone';
 import { Column, Stack } from 'soapbox/components/ui';
 import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder_status';
 import PendingStatus from 'soapbox/features/ui/components/pending_status';
 import { makeGetStatus } from 'soapbox/selectors';
+import { defaultMediaVisibility } from 'soapbox/utils/status';
 
 import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../ui/util/fullscreen';
 

app/soapbox/features/ui/components/pending_status.tsx

@@ -83,7 +83,7 @@ const PendingStatus: React.FC<IPendingStatus> = ({ idempotencyKey, className, mu
 
             {status.poll && <PollPreview poll={status.poll} />}
 
-            {status.quote && <QuotedStatus statusId={status.quote} />}
+            {status.quote && <QuotedStatus statusId={status.quote as string} />}
           </div>
 
           {/* TODO */}

app/soapbox/utils/__tests__/status-test.js

@@ -2,7 +2,10 @@ import { fromJS } from 'immutable';
 
 import { normalizeStatus } from 'soapbox/normalizers/status';
 
-import { hasIntegerMediaIds } from '../status';
+import {
+  hasIntegerMediaIds,
+  defaultMediaVisibility,
+} from '../status';
 
 describe('hasIntegerMediaIds()', () => {
   it('returns true for a Pleroma deleted status', () => {
@@ -10,3 +13,24 @@ describe('hasIntegerMediaIds()', () => {
     expect(hasIntegerMediaIds(status)).toBe(true);
   });
 });
+
+describe('defaultMediaVisibility()', () => {
+  it('returns false with no status', () => {
+    expect(defaultMediaVisibility(undefined, 'default')).toBe(false);
+  });
+
+  it('hides sensitive media by default', () => {
+    const status = normalizeStatus({ sensitive: true });
+    expect(defaultMediaVisibility(status, 'default')).toBe(false);
+  });
+
+  it('hides media when displayMedia is hide_all', () => {
+    const status = normalizeStatus({});
+    expect(defaultMediaVisibility(status, 'hide_all')).toBe(false);
+  });
+
+  it('shows sensitive media when displayMedia is show_all', () => {
+    const status = normalizeStatus({ sensitive: true });
+    expect(defaultMediaVisibility(status, 'show_all')).toBe(true);
+  });
+});

app/soapbox/utils/status.ts

@@ -2,6 +2,17 @@ import { isIntegerId } from 'soapbox/utils/numbers';
 
 import type { Status as StatusEntity } from 'soapbox/types/entities';
 
+/** Get the initial visibility of media attachments from user settings. */
+export const defaultMediaVisibility = (status: StatusEntity | undefined, displayMedia: string): boolean => {
+  if (!status) return false;
+
+  if (status.reblog && typeof status.reblog === 'object') {
+    status = status.reblog;
+  }
+
+  return (displayMedia !== 'hide_all' && !status.sensitive || displayMedia === 'show_all');
+};
+
 /** Grab the first external link from a status. */
 export const getFirstExternalLink = (status: StatusEntity): HTMLAnchorElement | null => {
   try {