Add PM components

1 files changed, 69 insertions, 0 deletions

diff --git a/vnext/src/components/Contacts.js b/vnext/src/components/Contacts.js
new file mode 100644
index 00000000..300e60eb
--- /dev/null
+++ b/vnext/src/components/Contacts.js
@@ -0,0 +1,69 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+
+import Contact from './Contact.js';
+
+export default class Contacts extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            pms: []
+        };
+    }
+    componentWillMount() {
+        this.refreshChats();
+    }
+
+    refreshChats() {
+        fetch(`https://api.juick.com/groups_pms?hash=${this.props.visitor.hash}`)
+            .then(response => response.json())
+            .then(jsonResponse => {
+                this.setState({
+                    isLoading: false,
+                    pms: jsonResponse.pms
+                });
+            });
+    }
+    render() {
+        const { pms } = this.state;
+        const user = this.props.visitor;
+        return (
+            <div style={wrapperStyle} className="msg-cont">
+                <ul style={chatListStyle} ref="chats">
+                    {
+                        pms && pms.map((chat) =>
+                            <li key={chat.uname} style={chatTitleStyle}>                                
+                                <Contact key={chat.uname} user={chat} />
+                            </li>
+                        )
+                    }
+                </ul>
+            </div>
+        );
+    }
+}
+
+const wrapperStyle = {
+    display: 'flex',
+    backgroundColor: '#fff'
+}
+
+const chatListStyle = {
+    boxSizing: 'border-box',
+    padding: '0 20px',
+    overflowY: 'scroll',
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'column',
+    width: '100%'
+}
+
+const chatTitleStyle = {
+    width: '100%',
+    padding: '3px 6px',
+    textAlign: 'left',
+    background: '#fff',
+    color: '#222',
+    borderBottom: '1px solid #eee'
+}
\ No newline at end of file