Merge branch 'simplify-greentext' into 'develop'

Simplify greentext code

See merge request soapbox-pub/soapbox-fe!569

app/soapbox/components/status.js

@@ -94,7 +94,6 @@ class Status extends ImmutablePureComponent {
     group: ImmutablePropTypes.map,
     displayMedia: PropTypes.string,
     allowedEmoji: ImmutablePropTypes.list,
-    greentext: PropTypes.bool,
   };
 
   // Avoid checking props that are functions (and whose equality will always
@@ -495,7 +494,6 @@ class Status extends ImmutablePureComponent {
               onClick={this.handleClick}
               expanded={!status.get('hidden')}
               onExpandedToggle={this.handleExpandedToggle}
-              greentext={this.props.greentext}
               collapsable
             />
 

app/soapbox/components/status_content.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { isRtl } from '../rtl';
@@ -6,11 +7,17 @@ import { FormattedMessage } from 'react-intl';
 import Permalink from './permalink';
 import classnames from 'classnames';
 import Icon from 'soapbox/components/icon';
-import { processHtml } from 'soapbox/utils/tiny_post_html_processor';
+import { getSoapboxConfig } from 'soapbox/actions/soapbox';
+import { addGreentext } from 'soapbox/utils/greentext';
 
 const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top)
 
-export default class StatusContent extends React.PureComponent {
+const mapStateToProps = state => ({
+  greentext: getSoapboxConfig(state).get('greentext'),
+});
+
+export default @connect(mapStateToProps)
+class StatusContent extends React.PureComponent {
 
   static contextTypes = {
     router: PropTypes.object,
@@ -150,35 +157,16 @@ export default class StatusContent extends React.PureComponent {
     this.node = c;
   }
 
-  getHtmlContent = () => {
-    const { status } = this.props;
-
-    const properContent = status.get('contentHtml');
-
-    return this.greentext(properContent);
+  parseHtml = html => {
+    const { greentext } = this.props;
+    if (greentext) return addGreentext(html);
+    return html;
   }
 
-  greentext = html => {
-    if (!this.props.greentext) return html;
-
-    // Copied from Pleroma FE
-    // https://git.pleroma.social/pleroma/pleroma-fe/-/blob/19475ba356c3fd6c54ca0306d3ae392358c212d1/src/components/status_content/status_content.js#L132
-    return processHtml(html, (string) => {
-      try {
-        if (string.includes('>') &&
-            string
-              .replace(/<[^>]+?>/gi, '') // remove all tags
-              .replace(/@\w+/gi, '') // remove mentions (even failed ones)
-              .trim()
-              .startsWith('&gt;')) {
-          return `<span class='greentext'>${string}</span>`;
-        } else {
-          return string;
-        }
-      } catch(e) {
-        return string;
-      }
-    });
+  getHtmlContent = () => {
+    const { status } = this.props;
+    const html = status.get('contentHtml');
+    return this.parseHtml(html);
   }
 
   render() {

app/soapbox/containers/status_container.js

@@ -59,7 +59,6 @@ const makeMapStateToProps = () => {
       status: getStatus(state, props),
       displayMedia: getSettings(state).get('displayMedia'),
       allowedEmoji: soapbox.get('allowedEmoji'),
-      greentext: soapbox.get('greentext'),
     };
   };
 

app/soapbox/features/status/components/detailed_status.js

@@ -36,7 +36,6 @@ export default class DetailedStatus extends ImmutablePureComponent {
     compact: PropTypes.bool,
     showMedia: PropTypes.bool,
     onToggleMediaVisibility: PropTypes.func,
-    greentext: PropTypes.bool,
   };
 
   state = {
@@ -192,7 +191,6 @@ export default class DetailedStatus extends ImmutablePureComponent {
           <StatusContent
             status={status}
             expanded={!status.get('hidden')}
-            greentext={this.props.greentext}
             onExpandedToggle={this.handleExpandedToggle}
           />
 

app/soapbox/features/status/containers/detailed_status_container.js

@@ -31,7 +31,6 @@ import { openModal } from '../../../actions/modal';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { showAlertForError } from '../../../actions/alerts';
 import { getSettings } from 'soapbox/actions/settings';
-import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import { deactivateUserModal, deleteUserModal, deleteStatusModal, toggleStatusSensitivityModal } from 'soapbox/actions/moderation';
 
 const messages = defineMessages({
@@ -51,7 +50,6 @@ const makeMapStateToProps = () => {
   const mapStateToProps = (state, props) => ({
     status: getStatus(state, props),
     domain: state.getIn(['meta', 'domain']),
-    greentext: getSoapboxConfig(state).get('greentext'),
   });
 
   return mapStateToProps;

app/soapbox/features/status/index.js

@@ -116,7 +116,6 @@ const makeMapStateToProps = () => {
       me: state.get('me'),
       displayMedia: getSettings(state).get('displayMedia'),
       allowedEmoji: soapbox.get('allowedEmoji'),
-      greentext: soapbox.get('greentext'),
     };
   };
 
@@ -546,7 +545,6 @@ class Status extends ImmutablePureComponent {
                 onToggleHidden={this.handleToggleHidden}
                 domain={domain}
                 showMedia={this.state.showMedia}
-                greentext={this.props.greentext}
                 onToggleMediaVisibility={this.handleToggleMediaVisibility}
               />
 

app/soapbox/utils/greentext.js

@@ -0,0 +1,22 @@
+import { processHtml } from './tiny_post_html_processor';
+
+export const addGreentext = html => {
+  // Copied from Pleroma FE
+  // https://git.pleroma.social/pleroma/pleroma-fe/-/blob/19475ba356c3fd6c54ca0306d3ae392358c212d1/src/components/status_content/status_content.js#L132
+  return processHtml(html, (string) => {
+    try {
+      if (string.includes('>') &&
+          string
+            .replace(/<[^>]+?>/gi, '') // remove all tags
+            .replace(/@\w+/gi, '') // remove mentions (even failed ones)
+            .trim()
+            .startsWith('&gt;')) {
+        return `<span class='greentext'>${string}</span>`;
+      } else {
+        return string;
+      }
+    } catch(e) {
+      return string;
+    }
+  });
+};