Commit 5d2f691e authored by Xabi's avatar Xabi

Hooks and HigherOrderComponents

parent e0a632d4
import React, { Component } from "react";
import "./App.css";
import ChatRoom from "./ChatRoom";
import ChatRoom from "./ChatRoom.hooks";
import ProfileSelector from "./ProfileSelector";
class App extends Component {
......
import React, { useState } from "react";
import "./ChatInput.css";
const SERVER = "http://localhost:3004";
function getISODate() {
let d = new Date();
return d.toISOString();
}
const ChatInput = props => {
const {authorId, authorName} = props;
const [message, setMessage] = useState("");
const handleSubmit = event => {
fetch(`${SERVER}/messages`, {
method: "post",
headers: {
"Content-Type": "application/json" // <--- don't forget this!
},
body: JSON.stringify({
author: authorId,
body: message,
date: getISODate()
})
})
.then(res => res.json())
.then(res => console.log("Resp:", res))
.catch(e => console.error(e));
event.preventDefault();
};
return (
<div className="ChatInput">
<div className="msgAvatar">
<img src={`./avatars/${authorId}.png`} alt={authorId} />
{authorName}
</div>
<form onSubmit={handleSubmit}>
<div className="InputMessage">
<input type="text" value={message} onChange={setMessage} />
<input type="submit" value="" />
</div>
</form>
</div>
);
};
export default ChatInput;
import React, { useState, useEffect } from "react";
import "./ChatRoom.css";
import Message from "./Message";
import ChatRoomHeader from "./ChatRoomHeader.withInterval";
import ChatInput from "./ChatInput.class";
const SERVER = "http://localhost:3004";
const useMessages = init => {
const [messages, setMessages] = useState(init);
useEffect(() => {
let messagesTimer = setInterval(() => {
fetch(`${SERVER}/messages`)
.then(res => res.json())
.then(res => {
setMessages(res);
})
.catch(err => {
console.error("Error:", err);
setMessages([]);
});
}, 1000);
return () => clearInterval(messagesTimer);
}, []);
return messages;
};
const ChatRoom = props => {
const { people } = props;
const messages = useMessages([]);
const getAuthorName = authorId =>
people.filter(person => person.id === authorId)[0].name;
const messageList = messages.map(message => (
<Message
key={message.id}
body={message["body"]}
name={getAuthorName(message.author)}
author={message.author}
/>
));
return (
<div className="ChatRoom">
<ChatRoomHeader />
<div>{messageList}</div>
<ChatInput authorId={456329} authorName={getAuthorName(456329)} />
</div>
);
};
export default ChatRoom;
import React, { Component } from "react";
import "./ChatRoom.css";
import Message from "./Message";
import ChatRoomHeader from "./ChatRoomHeader";
import ChatRoomHeader from "./ChatRoomHeader.withInterval";
import ChatInput from "./ChatInput.class";
const SERVER = "http://localhost:3004";
......@@ -25,9 +25,8 @@ class ChatRoom extends Component {
.catch(err => {
console.error("Error:", err);
this.setState({ messages: [] });
})},
1000
);
});
}, 1000);
this.setState({ messagesTimer: messagesTimer });
}
......
import React, { Component } from "react";
import "./ChatRoomHeader.css";
import withInterval from "./hoc/withInterval";
function getDate() {
let d = new Date();
return d.toLocaleString("es-ES");
}
class ChatRoomHeader extends Component {
render() {
return <header className="ChatRoomHeader">{this.props.fecha}</header>;
}
}
export default withInterval(getDate, 1000)(ChatRoomHeader);
import React from "react";
const withInterval = effectFunction => WrappedComponent => {
return class extends React.Component {
constructor(props) {
super(props);
this.state = {
timer: null,
data: effectFunction
};
}
componentDidMount() {
let timer = setInterval(() => this.setState({data: effectFunction()}), 1000);
this.setState({ timer: timer });
}
componentWillUnmount() {
clearInterval(this.state.timer);
}
render() {
return <WrappedComponent {...this.props} data={this.state.data}/>;
}
};
};
export default withInterval;
\ No newline at end of file
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