PLT-857: Support for Incoming Webhooks - Try #2

web/react/components/post_body.jsx

@@ -7,7 +7,7 @@ const Utils = require('../utils/utils.jsx');
 const Constants = require('../utils/constants.jsx');
 const TextFormatting = require('../utils/text_formatting.jsx');
 const twemoji = require('twemoji');
-const PostAttachmentList = require('./post_attachment_list.jsx');
+const PostBodyAdditionalContent = require('./post_body_additional_content.jsx');
 
 export default class PostBody extends React.Component {
     constructor(props) {
@@ -317,15 +317,6 @@ export default class PostBody extends React.Component {
             );
         }
 
-        let postAttachments = '';
-        if (post.attachments && post.attachments.length) {
-            postAttachments = (
-                <PostAttachmentList
-                    attachments={post.attachments}
-                />
-            );
-        }
-
         return (
             <div className='post-body'>
                 {comment}
@@ -341,7 +332,9 @@ export default class PostBody extends React.Component {
                         dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.state.message)}}
                     />
                 </div>
-                {postAttachments}
+                <PostBodyAdditionalContent
+                    post={post}
+                />
                 {fileAttachmentHolder}
                 {embed}
             </div>

web/react/components/post_body_additional_content.jsx

@@ -0,0 +1,56 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+const PostAttachmentList = require('./post_attachment_list.jsx');
+
+export default class PostBodyAdditionalContent extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.getSlackAttachment = this.getSlackAttachment.bind(this);
+        this.getComponent = this.getComponent.bind(this);
+    }
+
+    componentWillMount() {
+        this.setState({type: this.props.post.type, shouldRender: Boolean(this.props.post.type)});
+    }
+
+    getSlackAttachment() {
+        const attachments = this.props.post.props && this.props.post.props.attachments || [];
+        return (
+            <PostAttachmentList
+                key={'post_body_additional_content' + this.props.post.id}
+                attachments={attachments}
+            />
+        );
+    }
+
+    getComponent() {
+        switch (this.state.type) {
+        case 'slack_attachment':
+            return this.getSlackAttachment();
+        }
+    }
+
+    render() {
+        let content = [];
+
+        if (this.state.shouldRender) {
+            const component = this.getComponent();
+
+            if (component) {
+                content = component;
+            }
+        }
+
+        return (
+            <div>
+                {content}
+            </div>
+        );
+    }
+}
+
+PostBodyAdditionalContent.propTypes = {
+    post: React.PropTypes.object.isRequired
+};