aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2019-02-25 00:53:39 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:54 +0300
commit8264ffcb1d6e8737c713fd9ae6a4c5b43444ce50 (patch)
tree5ffc2e7319e115b01be47c6db16dc582a44fbcc0
parentd01d3369318b79f4f38820ef8c48344a6b082aff (diff)
Contacts using hooks
-rw-r--r--vnext/src/components/Contacts.js47
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 = {