diff options
author | 2018-06-20 10:15:31 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:52 +0300 | |
commit | fd18ac5cd96f76a39de57bb6a877d3f0faf7c528 (patch) | |
tree | 21744e1a82b15213793b3b81489afa02d5a776f5 | |
parent | 95f9a337435091188b02d4545b7507f47fef34cc (diff) |
refactoring
-rw-r--r-- | vnext/src/components/Message.js | 9 | ||||
-rw-r--r-- | vnext/src/components/MessageInput.js | 26 | ||||
-rw-r--r-- | vnext/src/components/Thread.js | 36 | ||||
-rw-r--r-- | vnext/src/components/Types.js | 7 | ||||
-rw-r--r-- | vnext/src/index.js | 2 |
5 files changed, 53 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 +}); diff --git a/vnext/src/index.js b/vnext/src/index.js index 0a8eb369..5bf7c021 100644 --- a/vnext/src/index.js +++ b/vnext/src/index.js @@ -28,7 +28,9 @@ class App extends React.Component { this.wScrollCurrent = 0; this.wScrollBefore = 0; this.wScrollDiff = 0; + } + componentDidMount() { window.addEventListener('scroll', this.throttle(500, () => { this.dHeight = document.body.offsetHeight; this.wHeight = window.innerHeight; |