Commit 025047a9 authored by Daniel Rilo's avatar Daniel Rilo

Hooks

parent dbdf0a21
import React, { useState, useEffect } from 'react';
import './App.css';
import ChatRoom from './ChatRoom';
import AvatarHeader from './AvatarHeader';
import Config from './Config';
const useCallPeople = SERVER => {
console.log("useCallPeople:");
const [people, setPeople] = useState([]);
fetch(`${SERVER}/people`)
.then(res => res.json())
.then(res => setPeople(res))
.catch(err => {
console.error('Error with people: ', err)
setPeople([])
});
return people;
}
const useCallMessages = SERVER => {
console.log("useCallMessages");
const [messages, setMessages] = useState([]);
useEffect(() => {
let messagesTimer = setInterval(() => {
fetch(`${SERVER}/messages`)
.then(res => res.json())
.then(res => setMessages(res))
.catch(err => {
console.error('Error with messages: ', err)
setMessages([]);
});
}, 1000);
return () => clearInterval(messagesTimer);
});
return messages;
}
const App = props => {
const SERVER = Config.SERVER;
// useEffect(() => {
// console.log("useEffect Messages");
// let messagesTimer = setInterval(() => {
// fetch(`${SERVER}/messages`)
// .then(res => res.json())
// .then(res => {
// setMessages(res)
// })
// .catch(err => console.error('Error with messages: ', err));
// }, 1000);
// return () => clearInterval(messagesTimer);
// }, []);
return (
<div>
<AvatarHeader peoples={useCallMessages(SERVER) } />
<ChatRoom body={{ people: useCallPeople(SERVER), messages: useCallMessages(SERVER) }} />
</div>
);
}
export default App;
......@@ -4,6 +4,7 @@ import SendMessage from './SendMessage';
class ChatRoom extends Component {
render() {
console.log(this.props)
return (
<div className="chat">
{/* <ChatRoomHeader body={this.state.messages[0]['body']}/> */}
......
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App'
// import App from './components/App.class'
import App from './components/App.hook'
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment