Commit 04cec773 authored by Ismael Rodríguez's avatar Ismael Rodríguez

MessageBar

parent 887534df
......@@ -83,6 +83,36 @@
"body": "Yo... no soy tu padre",
"date": "2019-03-27T09:33:41.579Z",
"id": 3
},
{
"id": 4,
"author": 456326,
"body": "hola",
"date": "function getDay() { [native code] }/function getMonth() { [native code] }/function getFullYear() { [native code] }"
},
{
"id": 5,
"author": 456326,
"body": "esto funciona",
"date": "function getDay() { [native code] }/function getMonth() { [native code] }/function getFullYear() { [native code] }"
},
{
"id": 6,
"author": 456326,
"body": "a ver ahora",
"date": "function getDay() { [native code] }/function getMonth() { [native code] }/function getFullYear() { [native code] }"
},
{
"id": 7,
"author": 456326,
"body": "hola",
"date": "function getDay() { [native code] }/function getMonth() { [native code] }/function getFullYear() { [native code] }"
},
{
"id": 8,
"author": 456326,
"body": "hola hola",
"date": "function getDay() { [native code] }/function getMonth() { [native code] }/function getFullYear() { [native code] }"
}
]
}
\ No newline at end of file
import React, { Component } from "react";
import Avatar from "../Avatar/Avatar";
import Carousel from "../Carousel/Carousel";
import "./AvatarList.scss";
class AvatarList extends Component {
......@@ -37,7 +38,8 @@ class AvatarList extends Component {
return (
<div className="AvatarList">
<h1>{message}</h1>
<div className="avatars">{this.loadAvatars()}</div>
<Carousel items={this.loadAvatars()} count="5"/>
{/* <div className="avatars">{this.loadAvatars()}</div> */}
</div>
);
}
......
import React, { Component } from "react";
import "./Carousel.scss";
class Carousel extends Component {
constructor(props) {
super(props);
console.log("constructor");
this.state = {
items: []
};
}
loadItems() {
const items = this.state.items
// .slice(0, this.props.count)
.map((item, index) => (
<div key={index} className="Carousel-item">
{item}
</div>
));
return items;
}
itemsToLeft() {
const array = this.state.items.map(
(item, index) =>
this.state.items[index < this.state.items.length - 1 ? index + 1 : 0]
);
this.setState({ items: array });
}
itemsToRight() {
const array = this.state.items.map(
(item, index) =>
this.state.items[index === 0 ? this.state.items.length - 1 : index - 1]
);
this.setState({ items: array });
}
componentDidUpdate() {
if (this.state.items.length === 0) {
this.setState({ items: this.props.items });
}
}
carouselScroll(e){
e.preventDefault();
console.log("scrolling");
}
render() {
return (
<div className="carousel" onScroll={this.carouselScroll}>
<div className="items">{this.loadItems()}</div>
<div className="controls">
<button className="prev" onClick={this.itemsToLeft.bind(this)} />
<button className="next" onClick={this.itemsToRight.bind(this)} />
</div>
</div>
);
}
}
export default Carousel;
.carousel{
.items{
align-items: center;
display: flex;
justify-content: space-evenly;
}
.controls{
display: flex;
justify-content: space-evenly;
margin: 0 auto;
width:50%;
.prev::after{
content: "<";
}
.next::after{
content: ">";
}
}
}
\ No newline at end of file
import React, { Component } from "react";
import Message from "../Message/Message";
import MessageBar from "../MessageBar/MessageBar";
import "./ChatRoom.scss";
import ChatRoomHeader from "../ChatRoomHeader/ChatRoomHeader";
class ChatRoom extends Component {
constructor(props) {
super(props);
this.state = {
messages: []
};
}
componentDidMount() {
const timer = setInterval(() => {
fetch("http://localhost:3004/messages")
.then(res => res.json())
.then(res => this.setState({ messages: res }))
.catch(err => console.log(err));
}, 1000);
this.setState({interval: timer});
}
componentWillUnmount(){
this.clearInterval(this.state.interval);
}
printMsg() {
const messages = this.state.messages;
const result = messages.map(mess => (
<Message key={mess.id} body={mess.body} user={this.searchUser(mess)} />
));
return result;
}
searchUser(message) {
const users = this.props.people;
const result = users.filter(user => user.id === message.author)[0];
return result;
}
render() {
return (
<div className="ChatRoom">
<ChatRoomHeader />
<div>{this.printMsg()}</div>
<MessageBar messageCount={this.state.messages.length} />
</div>
);
}
}
export default ChatRoom;
import React, { Component } from "react";
import Message from "../Message/Message";
import MessageBar from "../MessageBar/MessageBar";
import "./ChatRoom.scss";
import ChatRoomHeader from "../ChatRoomHeader/ChatRoomHeader"
import ChatRoomHeader from "../ChatRoomHeader/ChatRoomHeader";
class ChatRoom extends Component {
constructor(props){
constructor(props) {
super(props);
this.state={
this.state = {
messages: []
}
};
}
componentDidMount() {
const timer = setInterval(() => {
fetch("http://localhost:3004/messages")
.then(res => res.json())
.then(res => this.setState({ messages: res }))
.catch(err => console.log(err));
}, 1000);
this.setState({interval: timer});
}
componentDidMount(){
fetch('http://localhost:3004/messages')
.then(res => res.json())
.then(res => this.setState({messages: res}))
.catch(err => console.log(err));
componentWillUnmount(){
this.clearInterval(this.state.interval);
}
printMsg(){
printMsg() {
const messages = this.state.messages;
const result = messages.map(mess=>(
<Message key={mess.id} body={mess.body} user={this.searchUser(mess)}/>
))
const result = messages.map(mess => (
<Message key={mess.id} body={mess.body} user={this.searchUser(mess)} />
));
return result;
}
searchUser(message){
searchUser(message) {
const users = this.props.people;
const result = users.filter(user => (user.id === message.author) )[0]
const result = users.filter(user => user.id === message.author)[0];
return result;
}
......@@ -37,9 +44,8 @@ class ChatRoom extends Component {
return (
<div className="ChatRoom">
<ChatRoomHeader />
<div>
{this.printMsg()}
</div>
<div>{this.printMsg()}</div>
<MessageBar messageCount={this.state.messages.length} />
</div>
);
}
......
import React, { Component } from "react";
import "./MessageBar.scss";
class MessageBar extends Component {
constructor(props) {
super(props);
this.state = {
inputText: ""
};
}
render() {
return (
<div className="MessageBar">
<div className="userInfo">avatar</div>
<form>
<input
type="text"
value={this.state.inputText}
onChange={this.changeText.bind(this)}
/>
<button
className="buttonSubmit"
type="submit"
onClick={this.buttonClick.bind(this)}
/>
</form>
</div>
);
}
changeText(event) {
this.setState({ inputText: event.target.value });
}
buttonClick(event) {
event.preventDefault();
console.log("message: ", this.state.inputText);
fetch(`http://localhost:3004/messages`, {
method: "post",
headers: {
"Content-Type": "application/json" // <--- don't forget this!
},
body: JSON.stringify({
id: this.props.messageCount+1,
author: 456326,
body: this.state.inputText,
date: this.getDate()
})
})
.then(res => res.json())
.then(res => console.log("Resp:", res))
.catch(e => console.error(e));
}
getDate(){
let date = new Date();
return date.getDay+"/"+date.getMonth+"/"+date.getFullYear
}
}
export default MessageBar;
.MessageBar{
border-top: 1px solid gray;
margin: 50px 0 10px;
.buttonSubmit::after{
content: ">";
}
}
\ No newline at end of file
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