Refactor reply indicator and show compact list of attachments

2 files changed, 20 insertions, 13 deletions

diff --git a/app/javascript/flavours/glitch/features/composer/index.js b/app/javascript/flavours/glitch/features/composer/index.js
index b68afacac..d7f4641f6 100644
--- a/app/javascript/flavours/glitch/features/composer/index.js
+++ b/app/javascript/flavours/glitch/features/composer/index.js
@@ -78,6 +78,7 @@ function mapStateToProps (state) {
     preselectDate: state.getIn(['compose', 'preselectDate']),
     privacy: state.getIn(['compose', 'privacy']),
     progress: state.getIn(['compose', 'progress']),
+    inReplyTo: inReplyTo ? state.getIn(['statuses', inReplyTo]) : null,
     replyAccount: inReplyTo ? state.getIn(['statuses', inReplyTo, 'account']) : null,
     replyContent: inReplyTo ? state.getIn(['statuses', inReplyTo, 'contentHtml']) : null,
     resetFileKey: state.getIn(['compose', 'resetFileKey']),
@@ -302,8 +303,7 @@ class Composer extends React.Component {
       onUpload,
       privacy,
       progress,
-      replyAccount,
-      replyContent,
+      inReplyTo,
       resetFileKey,
       sensitive,
       showSearch,
@@ -328,10 +328,9 @@ class Composer extends React.Component {
         {privacy === 'direct' ? <ComposerDirectWarning /> : null}
         {privacy === 'private' && amUnlocked ? <ComposerWarning /> : null}
         {privacy !== 'public' && APPROX_HASHTAG_RE.test(text) ? <ComposerHashtagWarning /> : null}
-        {replyAccount && (
+        {inReplyTo && (
           <ComposerReply
-            account={replyAccount}
-            content={replyContent}
+            status={inReplyTo}
             intl={intl}
             onCancel={onCancelReply}
           />
@@ -417,8 +416,7 @@ Composer.propTypes = {
   preselectDate: PropTypes.instanceOf(Date),
   privacy: PropTypes.string,
   progress: PropTypes.number,
-  replyAccount: PropTypes.string,
-  replyContent: PropTypes.string,
+  inReplyTo: ImmutablePropTypes.map,
   resetFileKey: PropTypes.number,
   sideArm: PropTypes.string,
   sensitive: PropTypes.bool,
diff --git a/app/javascript/flavours/glitch/features/composer/reply/index.js b/app/javascript/flavours/glitch/features/composer/reply/index.js
index 0500a75d0..ca8c2031b 100644
--- a/app/javascript/flavours/glitch/features/composer/reply/index.js
+++ b/app/javascript/flavours/glitch/features/composer/reply/index.js
@@ -6,6 +6,7 @@ import { defineMessages } from 'react-intl';
 //  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 { assignHandlers } from 'flavours/glitch/util/react_helpers';
@@ -44,11 +45,14 @@ export default class ComposerReply extends React.PureComponent {
   render () {
     const { handleClick } = this.handlers;
     const {
-      account,
-      content,
+      status,
       intl,
     } = this.props;
 
+    const account     = status.get('account');
+    const content     = status.get('content');
+    const attachments = status.get('media_attachments');
+
     //  The result.
     return (
       <article className='composer--reply'>
@@ -60,18 +64,24 @@ export default class ComposerReply extends React.PureComponent {
             title={intl.formatMessage(messages.cancel)}
             inverted
           />
-          {account ? (
+          {account && (
             <AccountContainer
               id={account}
               small
             />
-          ) : null}
+          )}
         </header>
         <div
           className='content'
           dangerouslySetInnerHTML={{ __html: content || '' }}
           style={{ direction: isRtl(content) ? 'rtl' : 'ltr' }}
         />
+        {attachments.size > 0 && (
+          <AttachmentList
+            compact
+            media={attachments}
+          />
+        )}
       </article>
     );
   }
@@ -79,8 +89,7 @@ export default class ComposerReply extends React.PureComponent {
 }
 
 ComposerReply.propTypes = {
-  account: PropTypes.string,
-  content: PropTypes.string,
+  status: PropTypes.map.isRequired,
   intl: PropTypes.object.isRequired,
   onCancel: PropTypes.func,
 };