aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/components/Chat.js
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2018-06-21 14:59:56 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:53 +0300
commitbc2e876c592d5b3c117108baf5a5a58905510eae (patch)
tree29cf37494d6bd3f79cd7819ca58f97875142b923 /vnext/src/components/Chat.js
parent586d67c8e43970cc8c6e936f9eda48df5128efa8 (diff)
Add PM components
Diffstat (limited to 'vnext/src/components/Chat.js')
-rw-r--r--vnext/src/components/Chat.js72
1 files changed, 72 insertions, 0 deletions
diff --git a/vnext/src/components/Chat.js b/vnext/src/components/Chat.js
new file mode 100644
index 00000000..79425c12
--- /dev/null
+++ b/vnext/src/components/Chat.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import moment from 'moment';
+
+import PM from './PM';
+import MessageInput from './MessageInput';
+
+export default class Chat extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ chats: []
+ };
+ this.loadChat = this.loadChat.bind(this);
+ }
+ componentWillMount() {
+ this.loadChat(this.props.match.params.user);
+ }
+
+ loadChat(uname) {
+ const { hash } = this.props.visitor;
+ this.setState({
+ chats: []
+ });
+ if (hash && uname) {
+ fetch(`https://api.juick.com/pm?uname=${uname}&hash=${hash}`)
+ .then(response => response.json())
+ .then(jsonResponse => {
+ this.setState({
+ chats: jsonResponse
+ });
+ });
+ }
+ }
+
+ render() {
+ const { chats } = this.state;
+ const uname = this.props.match.params.user;
+ return (
+ <div id="content">
+ <article>
+
+ { uname ? (
+ <div className="chatroom">
+ <ul style={chatStyle} ref="chats">
+ {
+ chats.map((chat) =>
+ <PM key={moment.utc(chat.timestamp).valueOf()} chat={chat} />
+ )
+ }
+ </ul>
+ <MessageInput data={{}} onSend={()=>{}}/>
+ </div>
+ ) : (
+ <div className="chatroom no-selection"><p>No chat selected</p></div>
+ )
+ }
+ </article>
+ </div>
+ )
+ }
+}
+
+const chatStyle = {
+ boxSizing: 'border-box',
+ padding: '0 20px',
+ overflowY: 'scroll',
+ height: '450px',
+ display: 'flex',
+ flexDirection: 'column-reverse',
+ width: '100%'
+}