4 files changed, 51 insertions, 27 deletions

diff --git a/vnext/src/components/Message.js b/vnext/src/components/Message.js
index e03935ce..8e060aa8 100644
--- a/vnext/src/components/Message.js
+++ b/vnext/src/components/Message.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import moment from 'moment';
 
-import { UserType } from './Types';
+import { UserType, MessageType } from './Types';
 import Icon from './Icon';
 import Avatar from './Avatar';
 
@@ -104,12 +104,7 @@ function Tags(props) {
 }
 
 Message.propTypes = {
-    data: PropTypes.shape({
-        mid: PropTypes.number.isRequired,
-        user: UserType,
-        timestamp: PropTypes.string.isRequired,
-        body: PropTypes.string
-    }),
+    data: MessageType,
     children: PropTypes.node
 };
 
diff --git a/vnext/src/components/MessageInput.js b/vnext/src/components/MessageInput.js
new file mode 100644
index 00000000..2a7eab1d
--- /dev/null
+++ b/vnext/src/components/MessageInput.js
@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { MessageType } from './Types';
+
+export default class MessageInput extends React.Component {
+    constructor(props) {
+        super(props)
+    }
+    render() {
+        const msg = this.props.data;
+        return (
+            <form className="msg-comment-target">
+                <input type="hidden" name="mid" value={msg.mid} />
+                <div className="msg-comment">
+                    <div className="ta-wrapper">
+                        <textarea name="body" rows="1" className="reply" placeholder="Write a comment..."></textarea>
+                    </div>
+                </div>
+            </form>
+        )
+    }
+}
+
+MessageInput.propTypes = {
+    data: MessageType
+};
\ No newline at end of file
diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
index 4cf36747..6830a821 100644
--- a/vnext/src/components/Thread.js
+++ b/vnext/src/components/Thread.js
@@ -4,6 +4,7 @@ import * as qs from 'query-string';
 import moment from 'moment';
 
 import Message from './Message';
+import MessageInput from './MessageInput';
 import Spinner from './Spinner';
 import Avatar from './Avatar';
 
@@ -60,25 +61,8 @@ export default class Thread extends React.Component {
             {
               this.loaded() ? (
                 <Message data={msg} visitor={this.props.visitor}>
-                  <form className="msg-comment-target">
-                    <input type="hidden" name="mid" value={msg.mid} />
-                    <div className="msg-comment">
-                      <div className="ta-wrapper">
-                        <textarea name="body" rows="1" className="reply" placeholder="Write a comment..."></textarea>
-                      </div>
-                    </div>
-                  </form>
-                  {
-                    msg.recommendations && (
-                      <div className="msg-recomms">{`Recommended by (${msg.recommendations.length}): `}
-                        {
-                          msg.recommendations.map(it => (
-                            <Link to={`/${it}/`}>{it}</Link>
-                          )).reduce((prev, curr) => [prev, ', ', curr])
-                        }
-                      </div>
-                    )
-                  }
+                  <MessageInput data={msg} />
+                  <Recommendations src={msg.recommendations} />
                 </Message>
               ) : (
                   <Spinner />
@@ -159,6 +143,18 @@ export default class Thread extends React.Component {
         }
       </React.Fragment>
     )
-
   }
 }
+
+function Recommendations(props) {
+  const recomms = props.src;
+  return recomms && (
+    <div className="msg-recomms">{`Recommended by (${recomms.length}): `}
+      {
+        recomms.map(it => (
+          <Link key={it} to={`/${it}/`}>{it}</Link>
+        )).reduce((prev, curr) => [prev, ', ', curr])
+      }
+    </div>
+  ) || null;
+}
diff --git a/vnext/src/components/Types.js b/vnext/src/components/Types.js
index 2bd07458..6fba9fd3 100644
--- a/vnext/src/components/Types.js
+++ b/vnext/src/components/Types.js
@@ -4,3 +4,10 @@ export const UserType = PropTypes.shape({
     uid: PropTypes.number.isRequired,
     uname: PropTypes.string.isRequired
 });
+
+export const MessageType = PropTypes.shape({
+    mid: PropTypes.number.isRequired,
+    user: UserType,
+    timestamp: PropTypes.string.isRequired,
+    body: PropTypes.string
+});