1 files changed, 5 insertions, 44 deletions
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 ?
-        <FormattedMessage
-          id='status.show_more'
-          defaultMessage='Show more'
-          key='0'
-        /> :
-        <FormattedMessage
-          id='status.show_less'
-          defaultMessage='Show less'
-          key='0'
-        />;
-
-    return ([
-      <p className='spoiler__text'>
-        {spoilerText}
-        {' '}
-        <button tabIndex='0' className='status__content__spoiler-link' onClick={this.handleSpoilerClick}>
-          {toggleText}
-        </button>
-      </p>,
-      <div className={`status__content__spoiler ${!hidden ? 'status__content__spoiler--visible' : ''}`}>
-        {children}
-      </div>
-    ]);
-  }
-}
-
 const makeMapStateToProps = () => {
   const getStatus = makeGetStatus();
 
@@ -243,14 +204,14 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
         message: [
           <FormattedMessage id='confirmations.unfilter' defaultMessage='Information about this filtered toot' />,
           <div className='filtered-status-info'>
-            <SpoilerMachin spoilerText='Author'>
+            <Spoilers spoilerText='Author'>
               <AccountContainer id={status.getIn(['account', 'id'])} />
-            </SpoilerMachin>
-            <SpoilerMachin spoilerText='Matching filters'>
+            </Spoilers>
+            <Spoilers spoilerText='Matching filters'>
               <ul>
                 {matchingFilters.map(filter => <li>{filter.get('phrase')}</li>)}
               </ul>
-            </SpoilerMachin>
+            </Spoilers>
           </div>
         ],
         confirm: intl.formatMessage(messages.unfilterConfirm),