Commit 0b9811d5 authored by Miguel Castro Blanco's avatar Miguel Castro Blanco

input messages

parent 48fa31fe
......@@ -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": 456323,
"body": "Vamos al cafe ya!!!!",
"date": "2019-04-09T11:00:07.579Z",
"id": 5
},
{
"author": 456326,
"body": "Hola mundo",
"date": "11/4/2019 9:54:31",
"id": 6
},
{
"author": 456326,
"body": "aalskdjalksdj",
"date": "11/4/2019 9:57:08",
"id": 7
}
]
}
\ No newline at end of file
......@@ -7,74 +7,22 @@ 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 () {
const server = "http://localhost:3004"
fetch(`${server}/people`)
.then(res => res.json())
.then(res => {
this.setState({ people: res });
})
.catch(err => {
console.error("Error:", err);
this.setState({ people: [] });
});
}
render() {
return (
<div className="App">
......
......@@ -18,5 +18,5 @@
}
.Avatar.focus {
border: solid 1px red;
border: solid 2px red;
}
\ No newline at end of file
import React from "react";
import "./Avatar.css";
const Avatar = ({name, personId, selectedAvatar}) => {
const src = `./avatars/${personId}.png`;
const Avatar = (props) => {
const src = `./avatars/${props.personId}.png`;
let classAvatar = `Avatar`;
if(selectedAvatar === personId) {
if(props.selectedAvatar === props.personId) {
classAvatar = `Avatar focus`;
}
const onClickFunc = () => props.onClick === undefined ? "" : props.onClick(props.personId);
return(
<div className={classAvatar}>
<img src={src} alt="logo" />
<span>{name}</span>
</div>
<div className={classAvatar} onClick={() => onClickFunc()}>
<img src={src} alt="logo" />
<span>{props.name}</span>
</div>
)};
export default Avatar;
\ No newline at end of file
import React, { Component } from "react";
import "./ChatRoom.css";
import Message from "./Message";
import ChatRoomHeader from "./ChatRoomHeader";
function messageList(messageList, personList) {
const listItems = messageList.map(
(message) => (
<li key={message.id}>
<Message message={message} person={getPersonMessage(message.author, personList)} />
</li>
)
);
return (
<ul>{listItems}</ul>
);
}
function getPersonMessage(messageAuthor, personList) {
let person = personList.filter(
(p) => {
if(messageAuthor === p.id) {
return true;
} else {
return false;
}
}
);
const name = person[0] ? person[0].name : "";
return name;
}
class ChatRoom extends Component {
constructor(props) {
super(props);
this.state = {
"messages": []
};
}
componentDidMount () {
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: [] });
});
}
render() {
return (
<div className="ChatRoom">
<ChatRoomHeader />
<div>
{messageList(this.state.messages, this.props.people)}
</div>
</div>
);
}
}
export default ChatRoom;
import React, { Component } from "react";
import React, { useState, useEffect } from "react";
import "./ChatRoom.css";
import Message from "./Message";
import ChatRoomHeader from "./ChatRoomHeader";
import ChatRoomInput from "./ChatRoomInput";
function messageList(messageList, personList) {
const listItems = messageList.map(
......@@ -18,57 +18,42 @@ function messageList(messageList, personList) {
}
function getPersonMessage(messageAuthor, personList) {
const person = personList.filter(
let person = personList.filter(
(p) => {
if(messageAuthor === p.id) {
return true;
} else {
return false;
}
}
);
return person[0];
}
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
}
]
};
}
render() {
const ChatRoom = (props) => {
const {people} = props;
const [messages, setMessages] = useState([]);
useEffect(() => {
let timer = setInterval(() => {
fetch("http://localhost:3004/messages")
.then(res => res.json())
.then(res => setMessages(res))
.catch(err => console.log(err));
}, 1000);
return() => clearInterval(timer);
},[messages]);
return (
<div className="ChatRoom">
<div className="ChatRoom">
<ChatRoomHeader />
<div>
{messageList(this.state.messages, this.props.people)}
{messageList(messages, people)}
</div>
<ChatRoomInput />
</div>
</div>
);
}
}
};
export default ChatRoom;
export default ChatRoom;
\ No newline at end of file
import React, { Component } from "react";
import "./ChatRoomHeader.css";
function getDate() {
let d = new Date();
return d.toLocaleString("es-ES");
}
const SERVER = "http://localhost:3004";
class ChatRoomInput extends Component {
constructor(props) {
super(props);
this.state = { value: "" };
}
handleChange = event => {
this.setState({ value: event.target.value });
};
handleSubmit = event => {
fetch(`${SERVER}/messages`, {
method: "post",
headers: {
"Content-Type": "application/json" // <--- don't forget this!
},
body: JSON.stringify({
author: 456326,
body: this.state.value,
date: getDate()
})
})
.then(res => res.json())
.then(res => console.log("Resp:", res))
.catch(e => console.error(e));
event.preventDefault();
};
render() {
return (
<form onSubmit={this.handleSubmit}>
<div className="Avatar">
<img src="avatars/456326.png" alt="Avatar" /> Darth Maul
</div>
<label>
<input type="text" value={this.state.message} onChange={this.handleChange} />
</label>
<button>Submit</button>
</form>
);
}
}
export default ChatRoomInput;
form {
border-top: 1px solid gray;
margin: 50px 0 10px;
.buttonSubmit::after{
content: ">";
}
}
\ No newline at end of file
......@@ -14,8 +14,8 @@ class ListAvatar extends Component {
const list = listAv.map(
(avatar) => {
return (
<div key={avatar.id} className="Avatar__wrapper" onClick={() => this.handleClick(avatar)}>
<Avatar name={avatar.name} personId={avatar.id} selectedAvatar={selectAvatar.id}/>
<div key={avatar.id} className="Avatar__wrapper" >
<Avatar name={avatar.name} personId={avatar.id} selectedAvatar={selectAvatar.id} onClick={(e) => this.handleClick(e, avatar)}/>
</div>
);
}
......@@ -23,17 +23,17 @@ class ListAvatar extends Component {
return <ul>{list}</ul>
}
handleClick = (avatar) => {
handleClick = (e, avatar) => {
this.setState({selectedAvatar: avatar});
}
render() {
return (
<div className="listAvatar">
{this.state.selectedAvatar ? <h1>Has seleccionado {this.state.selectedAvatar.name}</h1> : <h1>Selecciona tu perfil</h1>}
<div>{this.lsAvatar(this.props.people, this.state.selectedAvatar)}</div>
</div>
);
render() {
return (
<div className="listAvatar">
{this.state.selectedAvatar ? <h1>Has seleccionado {this.state.selectedAvatar.name}</h1> : <h1>Selecciona tu perfil</h1>}
<div>{this.lsAvatar(this.props.people, this.state.selectedAvatar)}</div>
</div>
);
}
}
......
......@@ -9,7 +9,7 @@ class Message extends Component {
render() {
return (
<div className="Message">
<Avatar name={this.props.person.name} personId={this.props.person.id} />
<Avatar name={this.props.person.name} personId={this.props.person.id} selectedAvatar=""/>
<div className="Message__wrapper">
<MessageText body={this.props.message.body} date={this.props.message.date}/>
</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