Commit dbdf0a21 authored by Daniel Rilo's avatar Daniel Rilo

Send Messages

parent 6bc505b8
......@@ -89,6 +89,18 @@
"body": "Hi from Postman",
"date": "2019-04-09T10:30:07.579Z",
"id": 4
},
{
"author": 456317,
"body": "asdsad",
"date": "2019-04-10T10:28:26+02:00",
"id": 5
},
{
"author": 456317,
"body": "New text",
"date": "2019-04-10T10:43:43+02:00",
"id": 6
}
]
}
\ No newline at end of file
......@@ -4,6 +4,7 @@ import './App.css';
import ChatRoom from './ChatRoom';
import AvatarHeader from './AvatarHeader';
// import '../main.scss';
import Config from './Config';
class App extends Component {
// constructor(props) {
......@@ -102,24 +103,33 @@ class App extends Component {
super(props);
this.state = {
people: [],
messages: []
messages: [],
interval: 0
}
}
componentDidMount() {
const SERVER = ' http://localhost:3004';
const SERVER = Config.SERVER;
const interval = setInterval(() => {
this.callMessages(SERVER);
}, 1000);
this.setState({ dateInterval: interval });
this.callMessages(SERVER);
fetch(`${SERVER}/people`)
.then(res => res.json())
.then(res => this.setState({ people: res}))
.catch(err => console.err('Error with people: ', err));
}
fetch(`${SERVER}/messages`)
.then(res => res.json())
.then(res => this.setState({ messages: res}))
.catch(err => console.err('Error with messages: ', err));
componentWillUnmount() {
clearInterval(this.state.dateInterval);
}
callMessages = (SERVER) => fetch(`${SERVER}/messages`).then(res => res.json()).then(res => this.setState({ messages: res})).catch(err => console.err('Error with messages: ', err));
render() {
return (
<div>
......
import React, { Component } from 'react';
import ChatRoomHeader from './ChatRoomHeader';
import SendMessage from './SendMessage';
class ChatRoom extends Component {
render() {
return (
<div className="chat">
{/* <ChatRoomHeader body={this.state.messages[0]['body']}/> */}
<SendMessage/>
<ChatRoomHeader body={this.props}/>
</div>
);
......
const CONFIG = {
SERVER: 'http://localhost:3004'
}
export default CONFIG;
\ No newline at end of file
import React, { Component } from 'react';
import moment from 'moment';
import Config from './Config';
class SendMessage extends Component {
constructor(props) {
super(props);
this.state = {
text: '',
error: ''
}
}
inputFormHandler = e => {
this.setState({ text: e.target.value });
};
submitFormController = e => {
e.preventDefault();
if (this.state.text) {
this.setState({ error: ''})
} else {
this.setState({ error: 'El texto no puede estar vacío'})
return false;
}
const SERVER = Config.SERVER;
fetch(`${SERVER}/messages`, {
method: "post",
headers: {
"Content-Type": "application/json" // <--- don't forget this!
},
body: JSON.stringify({
// author: this.props.authorId,
author: 456317,
body: this.state.text,
date: moment().format()
})
})
.then(res => res.json())
.then(res => {
console.log("Resp:", res)
this.setState({
text: '',
error: ''
})
})
.catch(e => console.error(e));
};
render() {
return (
<div className="chat__form-wrapper">
{ this.state.error ? <p className="chat__form-error">{this.state.error}</p> : '' }
<form onSubmit={this.submitFormController} className="chat__form">
<div className="chat__form-header">
<div className="chat__form-header-avatar"><img src='avatars/456317.png' alt='Avatar' /></div>
<div className="chat__form-header-name">Ze Pequenho</div>
</div>
<div className="chat__form-submit">
<input type="text" value={this.state.text} onChange={e => this.inputFormHandler(e)} />
<button>Submit</button>
</div>
</form>
</div>
);
}
}
export default SendMessage;
......@@ -101,4 +101,49 @@ img {
font-size: 1.2rem;
font-weight: 700;
text-decoration: underline;
}
.chat__form-error {
color: #f00;
font-size: 1.4rem;
padding: .5rem;
border: .1rem dashed #f00;
font-weight: 700;
margin: .5rem;
}
.chat__form-header {
display: flex;
border-bottom: .1rem solid #eee;
justify-content: flex-end;
padding: .5rem;
}
.chat__form-header-avatar {
height: 2rem;
width: 2rem;
}
.chat__form-header-avatar img {
width: 100%;
}
.chat__form-header-name {
align-self: center;
font-size: 1.2rem;
margin-left: .5rem;
}
.chat__form-submit {
display: flex;
padding: .5rem;
}
.chat__form-submit input {
flex: 1 1 auto;
}
.chat__form-wrapper {
border: .1rem solid #000;
margin-bottom: 1.5rem;
}
\ 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