diff --git a/app/javascript/flavours/glitch/features/compose/components/sensitive_button.jsx b/app/javascript/flavours/glitch/features/compose/components/sensitive_button.jsx new file mode 100644 index 00000000000000..37debf9dd76728 --- /dev/null +++ b/app/javascript/flavours/glitch/features/compose/components/sensitive_button.jsx @@ -0,0 +1,57 @@ +import { useCallback } from 'react'; + +import { useIntl, defineMessages, FormattedMessage } from 'react-intl'; + +import classNames from 'classnames'; + +import { changeComposeSensitivity } from 'flavours/glitch/actions/compose'; +import { useAppSelector, useAppDispatch } from 'flavours/glitch/store'; + +const messages = defineMessages({ + marked: { + id: 'compose_form.sensitive.marked', + defaultMessage: '{count, plural, one {Media is marked as sensitive} other {Media is marked as sensitive}}', + }, + unmarked: { + id: 'compose_form.sensitive.unmarked', + defaultMessage: '{count, plural, one {Media is not marked as sensitive} other {Media is not marked as sensitive}}', + }, +}); + +export const SensitiveButton = () => { + const intl = useIntl(); + + const spoilersAlwaysOn = useAppSelector((state) => state.getIn(['local_settings', 'always_show_spoilers_field'])); + const spoilerText = useAppSelector((state) => state.getIn(['compose', 'spoiler_text'])); + const sensitive = useAppSelector((state) => state.getIn(['compose', 'sensitive'])); + const disabled = useAppSelector((state) => state.getIn(['compose', 'spoiler'])); + const mediaCount = useAppSelector((state) => state.getIn(['compose', 'media_attachments']).size); + + const active = sensitive || (spoilersAlwaysOn && spoilerText && spoilerText.length > 0); + + const dispatch = useAppDispatch(); + + const handleClick = useCallback(() => { + dispatch(changeComposeSensitivity()); + }, [dispatch]); + + return ( +