Add back SensitiveButton, convert to TSX

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

@@ -0,0 +1,44 @@
+import classNames from 'classnames';
+import React from 'react';
+import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
+
+import { changeComposeSensitivity } from 'soapbox/actions/compose';
+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='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 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/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));