Contacts using hooks

1 files changed, 16 insertions, 31 deletions

diff --git a/vnext/src/components/Contacts.js b/vnext/src/components/Contacts.js
index bdbc5a01..f726f173 100644
--- a/vnext/src/components/Contacts.js
+++ b/vnext/src/components/Contacts.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { getChats } from '../api';
 
@@ -6,40 +6,25 @@ import { getChats } from '../api';
 import Contact from './Contact.js';
 import { ChatSpinner } from './Spinner';
 
-export default class Contacts extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            pms: []
-        };
-    }
-    componentDidMount() {
-        this.refreshChats();
-    }
-
-    refreshChats() {
+export default function Contacts(props) {
+    const [pms, setPms] = useState([]);
+    useEffect(() => {
         getChats()
             .then(response => {
-                this.setState({
-                    isLoading: false,
-                    pms: response.data.pms
-                });
+                setPms(response.data.pms);
             });
-    }
-    render() {
-        const { pms } = this.state;
-        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>
+    }, []);
+    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 = {