diff options
author | 2019-02-25 00:53:39 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:54 +0300 | |
commit | 8264ffcb1d6e8737c713fd9ae6a4c5b43444ce50 (patch) | |
tree | 5ffc2e7319e115b01be47c6db16dc582a44fbcc0 /vnext/src | |
parent | d01d3369318b79f4f38820ef8c48344a6b082aff (diff) |
Contacts using hooks
Diffstat (limited to 'vnext/src')
-rw-r--r-- | vnext/src/components/Contacts.js | 47 |
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 = { |