Refactor reply indicator and show compact list of attachments

1 files changed, 15 insertions, 6 deletions

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,
 };