Commit 887534df authored by Ismael Rodríguez's avatar Ismael Rodríguez

Json server

parent b14340c6
......@@ -7,75 +7,17 @@ class App extends Component {
constructor(props){
super(props);
this.state={
"people": [
{
"id": 456317,
"name": "Mr. Bean"
},
{
"id": 456318,
"name": "Diego Playa"
},
{
"id": 456319,
"name": "Guille Puertas"
},
{
"id": 456320,
"name": "M. Rajoy"
},
{
"id": 456321,
"name": "María López"
},
{
"id": 456322,
"name": "Pedro Carreras"
},
{
"id": 456323,
"name": "Mike Rivers"
},
{
"id": 456324,
"name": "Juan Nadie"
},
{
"id": 456325,
"name": "Julia Soto"
},
{
"id": 456326,
"name": "Darth Maul"
},
{
"id": 456327,
"name": "Obi Juan"
},
{
"id": 456328,
"name": "Oldie Lennon"
},
{
"id": 456329,
"name": "Mss. Rottenmeier"
},
{
"id": 456330,
"name": "Anita Kiro"
},
{
"id": 456331,
"name": "Bea Fangirl"
},
{
"id": 456332,
"name": "Pijus Magnificus"
}
]
people: []
}
}
componentDidMount(){
fetch('http://localhost:3004/people')
.then(res => res.json())
.then(res => this.setState({people: res}))
.catch(err => console.log(err));
}
render() {
return (
<div className="App">
......
import React from "react";
import React, { Component } from "react";
import "./Avatar.scss";
const Avatar = ({name, user}) => {
const img = "./avatars/"+user+".png"
return(
<div className="Avatar">
<img src={img} alt="logo" />
<div>{name}</div>
</div>
)};
class Avatar extends Component{
render(){
const img = "./avatars/"+this.props.user+".png"
return(
<div className={this.props.className+" Avatar"} onClick={this.props.click}>
<img src={img} alt="logo" />
<div>{this.props.name}</div>
</div>
)
}
}
export default Avatar;
\ No newline at end of file
......@@ -11,16 +11,15 @@ class AvatarList extends Component {
}
loadAvatars() {
console.log(this.state.profile)
// console.log(this.state.profile);
const avatars = this.props.people.map(person => (
<a
className={this.state.profile === person.name ? "selected" : ""}
<Avatar
key={person.id}
href="/#"
onClick={this.selectAvatar.bind(this, person.name)}
>
<Avatar name={person.name} user={person.id} />
</a>
className={this.state.profile === person.name ? "selected" : ""}
name={person.name}
user={person.id}
click={this.selectAvatar.bind(this, person.name)}
/>
));
return avatars;
}
......@@ -32,7 +31,9 @@ class AvatarList extends Component {
render() {
const message =
this.state.profile != null ? "Hola "+this.state.profile : "Seleccione un avatar";
this.state.profile != null
? "Hola " + this.state.profile
: "Seleccione un avatar";
return (
<div className="AvatarList">
<h1>{message}</h1>
......
......@@ -4,8 +4,9 @@
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
padding: 0 10%;
.selected >div{
.selected{
border: 1px solid orangered;
}
}
......
......@@ -6,31 +6,19 @@ import ChatRoomHeader from "../ChatRoomHeader/ChatRoomHeader"
class ChatRoom extends Component {
constructor(props){
super(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: []
}
}
componentDidMount(){
fetch('http://localhost:3004/messages')
.then(res => res.json())
.then(res => this.setState({messages: res}))
.catch(err => console.log(err));
}
printMsg(){
const messages = this.state.messages;
const result = messages.map(mess=>(
......
......@@ -6,9 +6,10 @@ import Avatar from '../Avatar/Avatar';
class Message extends Component {
render() {
// console.log(this.props)
return (
<div className="Message">
<Avatar name={this.props.user.name} user={this.props.user.id}/>
<Avatar name={this.props.user !== undefined ? this.props.user.name : ""} user={this.props.user !== undefined ? this.props.user.id : ""}/>
<div>
<MessageText body={this.props.body}/>
</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