ComposerReply → ReplyIndicator

2 files changed, 88 insertions, 12 deletions

diff --git a/app/javascript/flavours/glitch/features/compose/components/compose_form.js b/app/javascript/flavours/glitch/features/compose/components/compose_form.js
index 1f37a1da5..10b51d920 100644
--- a/app/javascript/flavours/glitch/features/compose/components/compose_form.js
+++ b/app/javascript/flavours/glitch/features/compose/components/compose_form.js
@@ -7,12 +7,12 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 //  Components.
 import ComposerOptions from '../../composer/options';
 import ComposerPublisher from '../../composer/publisher';
-import ComposerReply from '../../composer/reply';
 import ComposerSpoiler from '../../composer/spoiler';
 import ComposerTextarea from '../../composer/textarea';
 import ComposerUploadForm from '../../composer/upload_form';
 import ComposerPollForm from '../../composer/poll_form';
 import WarningContainer from '../containers/warning_container';
+import ReplyIndicatorContainer from '../containers/reply_indicator_container';
 
 //  Utils.
 import { countableText } from 'flavours/glitch/util/counter';
@@ -49,7 +49,6 @@ class ComposeForm extends ImmutablePureComponent {
     preselectDate: PropTypes.instanceOf(Date),
     privacy: PropTypes.string,
     progress: PropTypes.number,
-    inReplyTo: ImmutablePropTypes.map,
     resetFileKey: PropTypes.number,
     sideArm: PropTypes.string,
     sensitive: PropTypes.bool,
@@ -65,7 +64,6 @@ class ComposeForm extends ImmutablePureComponent {
     preselectOnReply: PropTypes.bool,
 
     //  Dispatch props.
-    onCancelReply: PropTypes.func,
     onChangeAdvancedOption: PropTypes.func,
     onChangeDescription: PropTypes.func,
     onChangeSensitivity: PropTypes.func,
@@ -283,7 +281,6 @@ class ComposeForm extends ImmutablePureComponent {
       layout,
       media,
       poll,
-      onCancelReply,
       onChangeAdvancedOption,
       onChangeDescription,
       onChangeSensitivity,
@@ -301,7 +298,6 @@ class ComposeForm extends ImmutablePureComponent {
       onUpload,
       privacy,
       progress,
-      inReplyTo,
       resetFileKey,
       sensitive,
       showSearch,
@@ -319,13 +315,7 @@ class ComposeForm extends ImmutablePureComponent {
       <div className='composer'>
         <WarningContainer />
 
-        {inReplyTo && (
-          <ComposerReply
-            status={inReplyTo}
-            intl={intl}
-            onCancel={onCancelReply}
-          />
-        )}
+        <ReplyIndicatorContainer />
 
         <ComposerSpoiler
           hidden={!spoiler}
diff --git a/app/javascript/flavours/glitch/features/compose/components/reply_indicator.js b/app/javascript/flavours/glitch/features/compose/components/reply_indicator.js
new file mode 100644
index 000000000..f96ea4c5e
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/compose/components/reply_indicator.js
@@ -0,0 +1,86 @@
+//  Package imports.
+import PropTypes from 'prop-types';
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { defineMessages, injectIntl } from 'react-intl';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+
+//  Components.
+import AccountContainer from 'flavours/glitch/containers/account_container';
+import IconButton from 'flavours/glitch/components/icon_button';
+import AttachmentList from 'flavours/glitch/components/attachment_list';
+
+//  Utils.
+import { isRtl } from 'flavours/glitch/util/rtl';
+
+//  Messages.
+const messages = defineMessages({
+  cancel: {
+    defaultMessage: 'Cancel',
+    id: 'reply_indicator.cancel',
+  },
+});
+
+
+export default @injectIntl
+class ReplyIndicator extends ImmutablePureComponent {
+
+  static propTypes = {
+    status: ImmutablePropTypes.map.isRequired,
+    intl: PropTypes.object.isRequired,
+    onCancel: PropTypes.func,
+  };
+
+  handleClick = () => {
+    const { onCancel } = this.props;
+    if (onCancel) {
+      onCancel();
+    }
+  }
+
+  //  Rendering.
+  render () {
+    const { status, intl } = this.props;
+
+    if (!status) {
+      return null;
+    }
+
+    const account     = status.get('account');
+    const content     = status.get('content');
+    const attachments = status.get('media_attachments');
+
+    //  The result.
+    return (
+      <article className='composer--reply'>
+        <header>
+          <IconButton
+            className='cancel'
+            icon='times'
+            onClick={this.handleClick}
+            title={intl.formatMessage(messages.cancel)}
+            inverted
+          />
+          {account && (
+            <AccountContainer
+              id={account}
+              small
+            />
+          )}
+        </header>
+        <div
+          className='content'
+          dangerouslySetInnerHTML={{ __html: content || '' }}
+          style={{ direction: isRtl(content) ? 'rtl' : 'ltr' }}
+        />
+        {attachments.size > 0 && (
+          <AttachmentList
+            compact
+            media={attachments}
+          />
+        )}
+      </article>
+    );
+  }
+
+}