Merge remote-tracking branch 'soapbox/develop' into ts

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

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

@@ -1,8 +1,6 @@
 import classNames from 'classnames';
-import React from 'react';
-import { useEffect } from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
-import { defineMessages } from 'react-intl';
+import React, { useEffect } from 'react';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { expandSearch, setFilter } from 'soapbox/actions/search';
 import { fetchTrendingStatuses } from 'soapbox/actions/trending_statuses';

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>
   );
 };