Clase miércoles

parent 08f19e21
......@@ -83,6 +83,30 @@
"body": "Yo... no soy tu padre",
"date": "2019-03-27T09:33:41.579Z",
"id": 3
},
{
"author": 456323,
"body": "Hi from Postman",
"date": "2019-04-09T10:30:07.579Z",
"id": 4
},
{
"author": 456322,
"body": "Postman is working :D",
"date": "2019-04-09T10:41:07.579Z",
"id": 5
},
{
"author": 456319,
"body": "Nuevo mensaje utilizando método POST desde Visual Studio Code",
"date": "10/4/2019 10:28:53",
"id": 6
},
{
"author": 456319,
"body": "BIBA HESPANHA",
"date": "10/4/2019 10:43:16",
"id": 7
}
]
}
\ No newline at end of file
......@@ -2842,7 +2842,8 @@
},
"ansi-regex": {
"version": "2.1.1",
"bundled": true
"bundled": true,
"optional": true
},
"aproba": {
"version": "1.2.0",
......@@ -3207,7 +3208,8 @@
},
"safe-buffer": {
"version": "5.1.2",
"bundled": true
"bundled": true,
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
......@@ -3255,6 +3257,7 @@
"strip-ansi": {
"version": "3.0.1",
"bundled": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
......@@ -3293,11 +3296,13 @@
},
"wrappy": {
"version": "1.0.2",
"bundled": true
"bundled": true,
"optional": true
},
"yallist": {
"version": "3.0.3",
"bundled": true
"bundled": true,
"optional": true
}
}
},
......@@ -6336,7 +6341,8 @@
},
"ansi-regex": {
"version": "2.1.1",
"bundled": true
"bundled": true,
"optional": true
},
"aproba": {
"version": "1.2.0",
......@@ -6701,7 +6707,8 @@
},
"safe-buffer": {
"version": "5.1.1",
"bundled": true
"bundled": true,
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
......@@ -6749,6 +6756,7 @@
"strip-ansi": {
"version": "3.0.1",
"bundled": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
......@@ -6787,11 +6795,13 @@
},
"wrappy": {
"version": "1.0.2",
"bundled": true
"bundled": true,
"optional": true
},
"yallist": {
"version": "3.0.2",
"bundled": true
"bundled": true,
"optional": true
}
}
},
......
......@@ -3,7 +3,9 @@ import "./Avatar.css";
const Avatar = (props) => {
return(
<div className="Avatar">
<div
className="Avatar"
onClick={e => props.authorChanger(e, props.author)}>
<img src={`./avatars/${props.author}.png`} alt="logo" />
<div>{props.name}</div>
</div>
......
......@@ -7,31 +7,36 @@ class ChatRoom extends Component {
constructor(props) {
super(props);
this.state = {
messages: [
{
id: 1,
author: 456317,
body:
"mensaje 0 con un texto algo largo. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
date: "2019-03-26T18:33:00"
},
{
id: 2,
author: 456317,
body:
"mensaje 1 de texto suficientemente largo Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
date: "2019-03-26T18:33:02"
},
{
author: 456326,
body: "Yo... no soy tu padre",
date: "2019-03-27T09:33:41.579Z",
id: 3
}
]
messages: [],
dateInterval: null
};
}
getMessages() {
const server="http://localhost:3004";
fetch(`${server}/messages`)
.then(res => res.json())
.then(res => {
this.setState({ messages: res });
})
.catch(err => {
console.error("Error:", err);
this.setState({ messages: []});
});
}
componentDidMount() {
const dateTimer = setInterval(
() => this.setState({ date: this.getMessages()}),
1000
);
this.setState({ dateInterval: dateTimer });
}
componentWillUnmount() {
clearInterval(this.state.dateTimer);
}
render() {
const getAuthorName = authorId =>
this.props.people.filter(person => person.id === authorId)[0].name;
......
import React, { Component } from "react";
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {message: ''};
}
getDate() {
let d = new Date();
return d.toLocaleString("es-ES");
}
handleChange = (event) => {
this.setState(
{
message: event.target.value
}
);
}
handleSubmit = (event) => {
var authorId = 456319;
event.preventDefault();
const server="http://localhost:3004";
fetch(`${server}/messages`, {
method: "post",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(
{
author: authorId,
body: this.state.message,
date: this.getDate()
}
)
}
)
.then(res => res.json())
.then(res => console.log("Resp:", res))
.catch(e => console.error(e));
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Message:
<input type="text" value={this.state.message} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" onSubmit={this.handleSubmit}/>
</form>
);
}
}
export default NameForm;
\ No newline at end of file
.ProfileSelector {
background: lightskyblue;
background: lightblue;
margin: 5px;
padding: 5px;
border: 1px solid blue;
......@@ -13,11 +13,10 @@
.ProfileSelector-header h1 {
font-size: 1.4em;
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
font-family: "Comic Sans";
}
.ProfileSelector-list .Avatar:hover {
background: rgba(255, 255, 255, 0.9);
box-shadow: inset 0 0 0 1px gray;
background: white;
box-shadow: gray;
}
import React, { Component } from "react";
import "./ProfileSelector.css";
import Avatar from "./Avatar";
import NameForm from "./NameForm";
class ProfileSelector extends Component {
class ListUsers extends Component {
constructor(props) {
super(props);
this.state = {
......@@ -38,7 +39,6 @@ class ProfileSelector extends Component {
<a
className={isSelected(person)}
key={person.id}
onClick={e => this.handleClick(e, person.id)}
href="/#"
style={{
textDecoration: "none",
......@@ -53,9 +53,10 @@ class ProfileSelector extends Component {
</a>
))}
</div>
<NameForm/>
</div>
);
}
}
export default ProfileSelector;
export default ListUsers;
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