Commit 6bc505b8 authored by Daniel Rilo's avatar Daniel Rilo

Fetch

parent cabf82fa
......@@ -83,6 +83,12 @@
"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
}
]
}
\ No newline at end of file
......@@ -6,97 +6,119 @@ import AvatarHeader from './AvatarHeader';
// import '../main.scss';
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"
// }
// ],
// "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
// }
// ]
// }
// };
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"
}
],
"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
}
]
people: [],
messages: []
}
};
}
componentDidMount() {
const SERVER = ' http://localhost:3004';
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));
}
render() {
return (
......
......@@ -4,10 +4,12 @@ import React from 'react';
// In this varible, I'll calculate the link to the avatar image.
const Avatar = (props) => {
const imgID = `avatars/${props.people.id}.png`;
const name = props.people.name;
return (
<div className="chat__avatar">
<div className={`chat__avatar ${props.selectedOne === name ? 'selected' : ''}`} onClick={props.clickFnd}>
<img src={imgID} alt='Avatar' />
<p>{props.people.name}</p>
<p>{name}</p>
</div>
);
}
......
......@@ -20,7 +20,10 @@ class AvatarHeader extends Component {
<h1 className="chat__title">Selecciona tu perfil</h1>
{ this.state.nameSelected ? <p className="chat__selected-one">Perfil seleccionado: <span className="chat__selected-one-name">{this.state.nameSelected}</span></p> : <p className="chat__selected-one">Por favor, selecciona un perfil</p>}
<div className="chat__avatar-display">
{ this.props.peoples.map(el => <a href="/#" onClick={e => {this.selectPeople(e, el)}} key={el.id} className={this.state.nameSelected === el.name ? 'selected' : '' }><Avatar people={el} /> </a>) }
{
/* this.props.peoples.map(el => <a href="/#" onClick={e => {this.selectPeople(e, el)}} key={el.id} className={this.state.nameSelected === el.name ? 'selected' : '' }><Avatar people={el} /> </a>) */
this.props.peoples.map(el => <Avatar key={el.id} people={el} clickFnd={e => {this.selectPeople(e, el)}} selectedOne={this.state.nameSelected} /> )
}
</div>
</div>
)
......
......@@ -21,6 +21,13 @@ code {
width: 50%;
}
img {
display: block;
height: auto;
margin: 0 auto;
width: 50%;
}
.chat__room-header {
border: .1rem dashed #ddd;
}
......@@ -55,17 +62,7 @@ code {
padding: .5rem;
}
.chat__avatar {
padding: .5rem;
}
.chat__avatar img {
display: block;
margin: 0 auto;
width: 50%;
}
.chat__avatar p {
.chat__avatar-display p {
text-align: center;
}
......@@ -75,17 +72,18 @@ code {
justify-content: space-between;
}
.chat__avatar-display a {
flex: 0 0 23%;
.chat__avatar-display > div {
flex: 0 0 20%;
margin-bottom: 1.5rem;
border: .1rem solid #eee;
padding: .5rem;
}
.chat__avatar-display a.selected {
.chat__avatar-display > div.selected {
border: .1rem solid #f00;
}
.chat__avatar-display .chat__avatar:hover {
.chat__avatar-display >div:hover {
background-color: rgba(0, 0, 0, .1);
cursor: pointer;
}
......
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