Commit a3f04a8f authored by Miguel Castro Blanco's avatar Miguel Castro Blanco

final upload

parent 0b9811d5
......@@ -107,6 +107,12 @@
"body": "aalskdjalksdj",
"date": "11/4/2019 9:57:08",
"id": 7
},
{
"author": 456326,
"body": "Hola Mundo",
"date": "12/4/2019 9:17:23",
"id": 8
}
]
}
\ No newline at end of file
......@@ -30,10 +30,8 @@ function getPersonMessage(messageAuthor, personList) {
return person[0];
}
const ChatRoom = (props) => {
const {people} = props;
const [messages, setMessages] = useState([]);
const useMessages = (init) => {
const [messages, setMessages] = useState(init);
useEffect(() => {
let timer = setInterval(() => {
fetch("http://localhost:3004/messages")
......@@ -43,8 +41,14 @@ const ChatRoom = (props) => {
}, 1000);
return() => clearInterval(timer);
},[messages]);
},[]);
return messages;
}
const ChatRoom = (props) => {
const {people} = props;
const messages = useMessages([]);
return (
<div className="ChatRoom">
<ChatRoomHeader />
......
import React, { Component } from 'react';
import './ChatRoomHeader.css';
function getDate() {
let d = new Date();
return d.toLocaleString("es-ES");
}
class ChatRoomHeader extends Component {
componentDidMount() {
const dateTimer = setInterval(() => this.setState({time: getDate() }), 1000);
this.setState({
time: dateTimer
});
}
componentWillUnmount() {
clearInterval(this.state.dateTimer);
}
constructor(props) {
super(props);
this.state = {
time: ''
}
}
render() {
return <header className="ChatRoomHeader">{this.state.time}</header>;
}
}
export default ChatRoomHeader;
import React, { Component } from 'react';
import './ChatRoomHeader.css';
import withInterval from './WithInterval';
function getDate() {
let d = new Date();
return d.toLocaleString("es-ES");
}
class ChatRoomHeader extends Component {
componentDidMount() {
const dateTimer = setInterval(() => this.setState({time: getDate() }), 1000);
this.setState({
time: dateTimer
});
}
componentWillUnmount() {
clearInterval(this.state.dateTimer);
}
constructor(props) {
super(props);
this.state = {
time: ''
}
}
const dateUpdater = () => getDate();
class ChatRoomHeader extends Component {
render() {
return <header className="ChatRoomHeader">{this.state.time}</header>;
return <header className="ChatRoomHeader">{this.props.data}</header>;
}
}
export default ChatRoomHeader;
const ChatRoomHeaderWithInterval = withInterval(dateUpdater, 1000)(ChatRoomHeader);
export default ChatRoomHeaderWithInterval;
form {
border: solid 1px #000;
}
form .Avatar {
display: inline-block;
vertical-align: middle;
}
form .Avatar img{
max-width: 32px;
display: block;
margin: auto;
}
form input {
width: 50%;
}
\ No newline at end of file
import React, { Component } from "react";
import "./ChatRoomHeader.css";
import "./ChatRoomInput.css";
function getDate() {
let d = new Date();
......@@ -45,7 +45,7 @@ class ChatRoomInput extends Component {
<label>
<input type="text" value={this.state.message} onChange={this.handleChange} />
</label>
<button>Submit</button>
<button>Send Message</button>
</form>
);
}
......
form {
border-top: 1px solid gray;
margin: 50px 0 10px;
.buttonSubmit::after{
content: ">";
}
}
\ No newline at end of file
import React from "react";
const withInterval = (effectFunction, timer) => WrappedComponent => {
return class extends React.Component {
constructor(props) {
super(props);
this.state = {
timer: null,
data: effectFunction()
};
}
componentDidMount() {
let timerS = setInterval(
() => this.setState({data: effectFunction()}), timer);
this.setState({timer: timerS});
}
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