import { useEffect, useState } from 'react'; import { Helmet } from 'react-helmet'; import { getChats } from '../api'; import Contact from './Contact.js'; import { ChatSpinner } from './Spinner'; /** * */ export default function Contacts() { const [pms, setPms] = useState([]); useEffect(() => { getChats() .then(response => { setPms(response.data.pms); }).catch(console.log); }, []); return ( <div className="msg-cont"> <Helmet> <title>Messages</title> </Helmet> <div style={chatListStyle}> { pms.length ? pms.map((chat) => <Contact key={chat.uname} user={chat} style={chatTitleStyle} /> ) : <><ChatSpinner /><ChatSpinner /><ChatSpinner /><ChatSpinner /><ChatSpinner /></> } </div> </div> ); } const chatListStyle = { display: 'flex', flexDirection: 'column', width: '100%', padding: '12px' }; const chatTitleStyle = { width: '100%', padding: '12px', textAlign: 'left', background: 'var(--main-background-color)', color: 'var(--text-color)', borderBottom: '1px solid var(--border-color)' };