Commit e0a632d4 authored by Xabi's avatar Xabi

Send message to the server

parent 1064cd4e
import React from "react";
import "./ChatInput.css";
const SERVER = "http://localhost:3004";
function getISODate() {
let d = new Date();
return d.toISOString();
}
class ChatInput extends React.Component{
constructor(props){
super(props);
this.state={
message: ""
}
}
setMessage = (e) => {
this.setState({message: e.target.value});
}
handleSubmit = event => {
fetch(`${SERVER}/messages`, {
method: "post",
headers: {
"Content-Type": "application/json" // <--- don't forget this!
},
body: JSON.stringify({
author: this.props.authorId,
body: this.state.message,
date: getISODate()
})
})
.then(res => res.json())
.then(res => console.log("Resp:", res))
.catch(e => console.error(e));
event.preventDefault();
};
render(){
const {authorId, authorName} = this.props;
const {message} = this.state;
return (
<div className="ChatInput">
<div className="msgAvatar">
<img src={`./avatars/${authorId}.png`} alt={authorId} />
{authorName}
</div>
<form onSubmit={this.handleSubmit}>
<div className="InputMessage">
<input type="text" value={message} onChange={this.setMessage} />
<input type="submit" value="" />
</div>
</form>
</div>
);
}
};
export default ChatInput;
.ChatInput {
margin: 5px;
border: 1px solid black;
}
.msgAvatar {
background: white;
text-align: right;
padding: 0 2px;
border-bottom: 1px solid grey;
display: flex;
align-items: center;
justify-content: flex-end;
}
.msgAvatar > img {
width: 24px;
margin: 2px;
}
.InputMessage {
display: flex;
justify-content: space-between;
background: white;
/* border: 1px solid black; */
}
.InputMessage input[type=text] {
border: none;
width: 100%;
padding: 0 6px;
/* background: yellow; */
}
.InputMessage input[type=submit] {
border: none;
width: 40px;
height: 32px;
}
......@@ -2,27 +2,37 @@ import React, { Component } from "react";
import "./ChatRoom.css";
import Message from "./Message";
import ChatRoomHeader from "./ChatRoomHeader";
import ChatInput from "./ChatInput.class";
const SERVER = 'http://localhost:3004';
const SERVER = "http://localhost:3004";
class ChatRoom extends Component {
constructor(props) {
super(props);
this.state = {
messages: []
messages: [],
messagesTimer: null
};
}
componentDidMount(){
fetch(`${SERVER}/messages`)
.then(res => res.json())
.then(res => {
this.setState({ messages: res });
})
.catch(err => {
console.error("Error:", err);
this.setState({ messages: [] });
});
componentDidMount() {
let messagesTimer = setInterval(() => {
fetch(`${SERVER}/messages`)
.then(res => res.json())
.then(res => {
this.setState({ messages: res });
})
.catch(err => {
console.error("Error:", err);
this.setState({ messages: [] });
})},
1000
);
this.setState({ messagesTimer: messagesTimer });
}
componentWillUnmount() {
clearInterval(this.state.messagesTimer);
}
render() {
......@@ -42,6 +52,7 @@ class ChatRoom extends Component {
<div className="ChatRoom">
<ChatRoomHeader />
<div>{messageList}</div>
<ChatInput authorId={456329} authorName={getAuthorName(456329)} />
</div>
);
}
......
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