1 files changed, 49 insertions, 0 deletions
diff --git a/vnext/src/ui/Contacts.js b/vnext/src/ui/Contacts.js
new file mode 100644
index 00000000..3852b26f
--- /dev/null
+++ b/vnext/src/ui/Contacts.js
@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react';
+
+import { getChats } from '../api';
+
+
+import Contact from './Contact.js';
+import { ChatSpinner } from './Spinner';
+
+export default function Contacts(props) {
+    const [pms, setPms] = useState([]);
+    useEffect(() => {
+        getChats()
+            .then(response => {
+                setPms(response.data.pms);
+            });
+    }, []);
+    return (
+        <div className="msg-cont">
+            <div style={chatListStyle}>
+                {
+                    pms.length ? pms.map((chat) =>
+                        <Contact key={chat.uname} user={chat} style={chatTitleStyle} />
+                    ) : <><ChatSpinner /><ChatSpinner /><ChatSpinner /><ChatSpinner /><ChatSpinner /></>
+                }
+            </div>
+        </div>
+    );
+}
+
+const wrapperStyle = {
+    display: 'flex',
+    backgroundColor: '#fff'
+};
+
+const chatListStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    padding: '12px'
+};
+
+const chatTitleStyle = {
+    width: '100%',
+    padding: '12px',
+    textAlign: 'left',
+    background: '#fff',
+    color: '#222',
+    borderBottom: '1px solid #eee'
+};