aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'vnext/src/components')
-rw-r--r--vnext/src/components/Message.js9
-rw-r--r--vnext/src/components/MessageInput.js26
-rw-r--r--vnext/src/components/Thread.js36
-rw-r--r--vnext/src/components/Types.js7
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
+});