diff --git a/app/javascript/flavours/glitch/components/spoilers.js b/app/javascript/flavours/glitch/components/spoilers.js new file mode 100644 index 000000000..8527403c1 --- /dev/null +++ b/app/javascript/flavours/glitch/components/spoilers.js @@ -0,0 +1,50 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { FormattedMessage } from 'react-intl'; + +export default +class Spoilers extends React.PureComponent { + static propTypes = { + spoilerText: PropTypes.string, + children: PropTypes.node, + }; + + state = { + hidden: true, + } + + handleSpoilerClick = () => { + this.setState({ hidden: !this.state.hidden }); + } + + render () { + const { spoilerText, children } = this.props; + const { hidden } = this.state; + + const toggleText = hidden ? + : + ; + + return ([ +

+ {spoilerText} + {' '} + +

, +
+ {children} +
+ ]); + } +} + diff --git a/app/javascript/flavours/glitch/containers/status_container.js b/app/javascript/flavours/glitch/containers/status_container.js index ba12ad38d..41fcc2010 100644 --- a/app/javascript/flavours/glitch/containers/status_container.js +++ b/app/javascript/flavours/glitch/containers/status_container.js @@ -28,6 +28,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { boostModal, favouriteModal, deleteModal } from 'flavours/glitch/util/initial_state'; import { showAlertForError } from '../actions/alerts'; import AccountContainer from 'flavours/glitch/containers/account_container'; +import Spoilers from '../components/spoilers'; const messages = defineMessages({ deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' }, @@ -41,46 +42,6 @@ const messages = defineMessages({ unfilterConfirm: { id: 'confirmations.unfilter.confirm', defaultMessage: 'Show' }, }); -class SpoilerMachin extends React.PureComponent { - state = { - hidden: true, - } - - handleSpoilerClick = () => { - this.setState({ hidden: !this.state.hidden }); - } - - render () { - const { spoilerText, children } = this.props; - const { hidden } = this.state; - - const toggleText = hidden ? - : - ; - - return ([ -

- {spoilerText} - {' '} - -

, -
- {children} -
- ]); - } -} - const makeMapStateToProps = () => { const getStatus = makeGetStatus(); @@ -243,14 +204,14 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({ message: [ ,
- + - - + +
    {matchingFilters.map(filter =>
  • {filter.get('phrase')}
  • )}
-
+
], confirm: intl.formatMessage(messages.unfilterConfirm),