...
 
Commits (2)
......@@ -83,6 +83,18 @@
"body": "Yo... no soy tu padre",
"date": "2019-03-27T09:33:41.579Z",
"id": 3
},
{
"author": 456327,
"body": "Hello baby!",
"date": "2019-03-27T09:33:41.579Z",
"id": 4
},
{
"author": "456326",
"body": "Hola don pepito",
"date": "2019-03-27T09:33:41.579Z",
"id": "5"
}
]
}
\ No newline at end of file
import React, { Component } from 'react';
import logo from '../logo.svg';
import './App.css';
function getDate(){
//var utc = new Date().toJSON();//.slice(0,10).replace(/-/g,'/');
var utc = new Date().toLocaleString('es-ES');//.slice(0,10).replace(/-/g,'/');
return utc;
}
function Avatar(props){
return(
<div className="avatar">
<div className="image">
<img src={props.imgsrc}/>
</div>
<div>
<p className="name">{props.name}</p>
</div>
</div>
)
}
// recomendacion, empezar a crear todos los componentes así
const AvatarRecom = (props) => {
return(
<div className="avatar">
<div className="image">
<img src={props.imgsrc}/>
</div>
<div>
<p className="name">{props.name}</p>
</div>
</div>
)
}
// Ver PropTypes
class ChatRoomHeader extends React.Component{
constructor(props){
super(props);
this.state = {date:getDate(), intervalEvent:null};
}
componentDidMount(){
const chatRoomHeaderInterval = setInterval(()=>{
this.setState({date:getDate()});
},1000);
this.setState({intervalEvent:chatRoomHeaderInterval});
}
componentWillUnmount(){
clearInterval(this.state.intervalEvent);
}
render(){
return(
<div class="header">
<h2>Welcome to our chat</h2>
<div className="date">{getDate()}</div>
</div>
)
}
}
class ChatRoom extends React.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
}
]
}
);
}
printMessages(){
const messages = this.state.messages;
const listItems = messages.map((message)=>
<Message key={message.id} name={message.author} imgsrc="./avatars/456317.png" text={message.body} date={getDate()}/>
);
return(listItems)
}
getName(id){
const people = this.state.people;
for (let person of people){
if (person.id == id){
return person.name;
}
}
return false;
}
getImage(id){
return "./avatars/"+id+".png";
}
// getName(id){
// this.state.people.filter(el =>{
// el.id == id ? return true;
// });
// }
import React, { Component } from "react";
import "./App.css";
import ChatRoom from "../components/ChatRoom";
const SERVER = "http://localhost:3004";
render(){
const getAuthorName = authorId =>
this.state.people.filter(
person => person.id === authorId
)[0].name;
return(
<div className="body">
<h1>React ChatRoom</h1>
<ChatRoomHeader />
<div className="avatar-selector">
{this.state.people.map(person => (
<Avatar key={person.id} name={person.name} imgsrc={this.getImage(person.id)}/>
))}
</div>
{/* <Message name="Pepe" imgsrc="./avatars/456317.png" text={this.state.messages[0].body} date={getDate()}/> */}
{/* Forma 1 */}
{/* {this.printMessages()} */}
{/* Forma 2 */}
{this.state.messages.map(message => (
<Message key={message.id} name={this.getName(message.author)} imgsrc={this.getImage(message.author)} text={message.body} date={getDate()}/>
))}
</div>
)
}
}
function Message(props){
return(
<div className="message">
<div className="left">
<Avatar name={props.name} imgsrc={props.imgsrc}/>
</div>
<div className="right">
<div className="date">
Enviado a las {props.date}
</div>
<div className="text">
<MessageText text={props.text}/>
</div>
</div>
</div>
)
}
class App extends Component {
constructor(props) {
super(props);
this.state = {
people: []
};
}
function MessageText(props){
const {text} = props; //Destructuración del componente. Cogemos text de props
return(
<span>{text}</span>
);
}
componentDidMount() {
fetch(`${SERVER}/people`)
.then(res => res.json())
.then(res => {
this.setState({ people: res });
})
.catch(err => {
console.error("Error:", err);
this.setState({ people: [] });
});
}
class App extends Component {
render() {
return (
<div className="App">
{/* <header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header> */}
<ChatRoom/>
<ChatRoom people={this.state.people} />
</div>
);
}
......
import React from "react";
import "./Avatar.css";
const Avatar = ({name}) => {
console.log(name)
return(
<div className="Avatar">
<img src="./avatars/456324.png" alt="logo" />
<div>{name}</div>
</div>
)};
export default Avatar;
\ No newline at end of file
import React, { Component } from "react";
//import "./Avatar.css";
class Avatar extends Component {
constructor(props) {
super(props);
this.state = {
selected: false
};
this.setSelected = this.setSelected.bind(this);
}
setSelected() {
this.setState(state => ({
selected: true
}));
console.log("selected:" + this.props.name);
}
render() {
console.log("selected:", this.state);
return (
<div
className={(this.props.isSelected ? "selected" : "") + " avatar"}
onClick={e => this.props.authorChanger(e, this.props.id)}
>
<div className="image">
<img src={this.props.imgsrc} alt="" />
</div>
<div>
<p className="name">{this.props.name}</p>
</div>
</div>
);
}
}
export default Avatar;
import React, { Component } from "react";
import Avatar from "../components/Avatar";
class AvatarSelector extends Component {
constructor(props) {
super(props);
this.state = {
selectedAvatarId: null
};
}
getName(id) {
const people = this.props.people;
for (let person of people) {
if (person.id == id) {
return person.name;
}
}
return false;
}
getImage(id) {
return "./avatars/" + id + ".png";
}
handleClick = (e, personId) => {
this.setState({
selectedAvatarId: personId
});
};
render() {
return (
<div className="avatar-selector">
{this.props.people.map(person => (
<Avatar
key={person.id}
name={person.name}
imgsrc={this.getImage(person.id)}
id={person.id}
isSelected={this.state.selectedAvatarId === person.id}
authorChanger={this.handleClick}
/>
))}
</div>
);
}
}
export default AvatarSelector;
import React, { Component } from "react";
import "./ChatRoom.css";
//import "./ChatRoom.css";
import Message from "./Message";
import ChatRoomHeader from "./ChatRoomHeader"
import ChatRoomHeader from "../components/ChatRoomHeader";
import AvatarSelector from "../components/AvatarSelector";
const SERVER = "http://localhost:3004";
let getDate = () => new Date().toLocaleString("es-ES");
class ChatRoom extends Component {
constructor(props) {
super(props);
this.state = {
messages: []
};
}
componentDidMount() {
fetch(`${SERVER}/messages`)
.then(res => res.json())
.then(res => {
this.setState({ messages: res });
})
.catch(err => {
console.error("Error:", err);
this.setState({ messages: [] });
});
}
printMessages() {
const messages = this.state.messages;
const listItems = messages.map(message => (
<Message
key={message.id}
name={message.author}
imgsrc="./avatars/456317.png"
text={message.body}
date={getDate()}
/>
));
return listItems;
}
getName(id) {
const people = this.props.people;
for (let person of people) {
if (person.id === id) {
return person.name;
}
}
return false;
}
getImage(id) {
return "./avatars/" + id + ".png";
}
render() {
// const getAuthorName = authorId =>
// this.state.people.filter(person => person.id === authorId)[0].name;
return (
<div className="ChatRoom">
<div className="body">
<h1>React ChatRoom</h1>
<ChatRoomHeader />
<div>
<Message />
</div>
<AvatarSelector people={this.props.people} />
{/* <Message name="Pepe" imgsrc="./avatars/456317.png" text={this.state.messages[0].body} date={getDate()}/> */}
{/* Forma 1 */}
{/* {this.printMessages()} */}
{/* Forma 2 */}
{this.state.messages.map(message => (
<Message
key={message.id}
name={this.getName(message.author)}
imgsrc={this.getImage(message.author)}
text={message.body}
date={getDate()}
/>
))}
</div>
);
}
......
import React, { Component } from 'react';
import './ChatRoomHeader.css';
class ChatRoomHeader extends Component {
render() {
return <header className="ChatRoomHeader">3/4/2019 14:42:38</header>;
let getDate = () => new Date().toLocaleString('es-ES');
class ChatRoomHeader extends Component{
constructor(props){
super(props);
this.state = {date:getDate(), intervalEvent:null};
}
componentDidMount(){
const chatRoomHeaderInterval = setInterval(()=>{
this.setState({date:getDate()});
},1000);
this.setState({intervalEvent:chatRoomHeaderInterval});
}
componentWillUnmount(){
clearInterval(this.state.intervalEvent);
}
render(){
return(
<div class="header">
<h2>Welcome to our chat</h2>
<div className="date">{getDate()}</div>
</div>
)
}
}
......
import React, { Component } from 'react';
import './Message.css';
import MessageText from './MessageText'
import Avatar from './Avatar';
import React, { Component } from "react";
//import './Message.css';
import MessageText from "./MessageText";
import Avatar from "./Avatar";
class Message extends Component {
render() {
return (
<div className="Message">
<Avatar name="Juan Nadie" asco="tatata" pepe="loquesea" />
<div>
<MessageText />
function Message(props) {
return (
<div className="message">
<div className="left">
<Avatar name={props.name} imgsrc={props.imgsrc} />
</div>
<div className="right">
<div className="date">Enviado a las {props.date}</div>
<div className="text">
<MessageText text={props.text} />
</div>
</div>
);
}
</div>
);
}
export default Message;
import React, { Component } from 'react';
import './MessageText.css';
import React, { Component } from "react";
//import './MessageText.css';
class MessageText extends Component {
render() {
return (
<div className="MessageText">
<header className="MessageText-header">
enviado a las 13:42
</header>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div>
</div>
);
}
function MessageText(props) {
const { text } = props; //Destructuración del componente. Cogemos text de props
return <span>{text}</span>;
}
export default MessageText;
class Util {
static getDate = () => new Date().toLocaleString("es-ES");
}
export default Util;
\ No newline at end of file
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './myScss.scss';
import App from './components/App';
import * as serviceWorker from './serviceWorker';
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import "./myScss.scss";
import App from "./components/App";
import * as serviceWorker from "./serviceWorker";
ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(<App />, document.getElementById("root"));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
......
......@@ -7,6 +7,11 @@
.avatar-selector{
display: flex;
flex-wrap: wrap;
justify-content: center;
border: 1px solid black;
border-top: none;
margin-bottom: 10px;
.avatar{
.image{
width: 60px;
......@@ -20,6 +25,9 @@
.name{
font-size: 10px;
}
&.selected{
background-color: coral;
}
}
}
......@@ -30,6 +38,8 @@
border: 1px solid grey;
padding: 10px;
background-color: #EEE;
margin-bottom: 5px;
margin-left: 5px;
.left{
padding: 10px;
.avatar{
......@@ -45,6 +55,7 @@
.name{
}
}
}
.right{
......