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%'  
+}