Commit 351fe632 authored by Ismael Rodríguez's avatar Ismael Rodríguez

Fin

parent 04cec773
......@@ -87,31 +87,19 @@
{
"id": 4,
"author": 456326,
"body": "hola",
"body": "difsiodj",
"date": "function getDay() { [native code] }/function getMonth() { [native code] }/function getFullYear() { [native code] }"
},
{
"id": 5,
"author": 456326,
"body": "esto funciona",
"author": 456323,
"body": "dsdio",
"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",
"author": 456327,
"body": "sdfgfthyjukk",
"date": "function getDay() { [native code] }/function getMonth() { [native code] }/function getFullYear() { [native code] }"
}
]
......
import React, { Component } from "react";
const setTimer = (effect, time) => WrappedComponent => {
return class extends Component {
constructor(props) {
super(props);
this.state = {
interval: null
};
}
componentDidMount = () => {
const timer = setInterval(() => this.setState({ date: effect() }), time);
this.setState({ interval: timer });
};
componentWillUnmount = () => {
clearInterval(this.state.interval);
};
render = () => {
return <WrappedComponent {...this.props} data={this.state.date} />;
};
};
};
export default setTimer;
import React, { Component } from "react";
import ChatRoom from "./ChatRoom/ChatRoom";
// import ChatRoom from "./ChatRoom/ChatRoom";
import ChatRoom from "./ChatRoom/ChatRoom.Function";
import AvatarList from "./AvatarList/AvatarList";
import "./App.scss";
class App extends Component {
constructor(props){
constructor(props) {
super(props);
this.state={
people: []
}
this.state = {
people: [],
profile: []
};
}
componentDidMount(){
fetch('http://localhost:3004/people')
componentDidMount() {
fetch("http://localhost:3004/people")
.then(res => res.json())
.then(res => this.setState({people: res}))
.then(res => this.setState({ people: res }))
.catch(err => console.log(err));
}
selectAvatar(person, e) {
e.preventDefault();
let array = [person]
this.setState({profile: array});
}
render() {
return (
<div className="App">
<AvatarList people={this.state.people}/>
<ChatRoom people={this.state.people}/>
<AvatarList
people={this.state.people}
selectAvatar={this.selectAvatar.bind(this)}
profile={this.state.profile}
/>
<ChatRoom people={this.state.people} profile={this.state.profile[0]} />
</div>
);
}
......
......@@ -4,36 +4,24 @@ import Carousel from "../Carousel/Carousel";
import "./AvatarList.scss";
class AvatarList extends Component {
constructor(props) {
super(props);
this.state = {
profile: null
};
}
loadAvatars() {
// console.log(this.state.profile);
const avatars = this.props.people.map(person => (
<Avatar
key={person.id}
className={this.state.profile === person.name ? "selected" : ""}
className={this.props.profile.name === person.name ? "selected" : ""}
name={person.name}
user={person.id}
click={this.selectAvatar.bind(this, person.name)}
click={this.props.selectAvatar.bind(this, person)}
/>
));
return avatars;
}
selectAvatar(name, e) {
e.preventDefault();
this.setState({ profile: name });
}
render() {
const message =
this.state.profile != null
? "Hola " + this.state.profile
this.props.profile[0] != null
? "Hola " + this.props.profile[0].name
: "Seleccione un avatar";
return (
<div className="AvatarList">
......
......@@ -4,7 +4,6 @@ import "./Carousel.scss";
class Carousel extends Component {
constructor(props) {
super(props);
console.log("constructor");
this.state = {
items: []
};
......@@ -45,7 +44,6 @@ class Carousel extends Component {
carouselScroll(e){
e.preventDefault();
console.log("scrolling");
}
render() {
......
import React, { Component } from "react";
import React, { useState, useEffect, 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});
}
function ChatRoom(props) {
componentWillUnmount(){
this.clearInterval(this.state.interval);
const messages = useMessages();
function useMessages(){
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));
}, []);
return messages;
}
printMsg() {
const messages = this.state.messages;
function printMsg() {
const result = messages.map(mess => (
<Message key={mess.id} body={mess.body} user={this.searchUser(mess)} />
<Message key={mess.id} body={mess.body} user={searchUser(mess)} />
));
return result;
}
searchUser(message) {
const users = this.props.people;
function searchUser(message) {
const users = 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>
);
}
return (
<div className="ChatRoom">
<ChatRoomHeader />
<div>{printMsg()}</div>
<MessageBar messageCount={messages.length} profile={props.profile}/>
</div>
);
}
export default ChatRoom;
export default ChatRoom;
\ No newline at end of file
......@@ -2,7 +2,7 @@ import React, { Component } from "react";
import Message from "../Message/Message";
import MessageBar from "../MessageBar/MessageBar";
import "./ChatRoom.scss";
import ChatRoomHeader from "../ChatRoomHeader/ChatRoomHeader";
import ChatRoomHeaderInterval from "../ChatRoomHeader/ChatRoomHeader";
class ChatRoom extends Component {
constructor(props) {
......@@ -23,7 +23,7 @@ class ChatRoom extends Component {
}
componentWillUnmount(){
this.clearInterval(this.state.interval);
clearInterval(this.state.interval);
}
printMsg() {
......@@ -43,9 +43,9 @@ class ChatRoom extends Component {
render() {
return (
<div className="ChatRoom">
<ChatRoomHeader />
<ChatRoomHeaderInterval />
<div>{this.printMsg()}</div>
<MessageBar messageCount={this.state.messages.length} />
<MessageBar messageCount={this.state.messages.length} profile={this.props.profile} />
</div>
);
}
......
import React, { Component } from 'react';
import setTimer from '../../HOC/setTimer/setTimer'
import './ChatRoomHeader.scss';
function getDate(){
......@@ -7,30 +9,10 @@ function getDate(){
}
class ChatRoomHeader extends Component {
constructor(props){
super(props);
this.state={
date: getDate(),
interval: null
}
}
render() {
return <header className="ChatRoomHeader">{this.state.date}</header>;
}
componentDidMount(){
const timer = setInterval(
() => this.setState({date: getDate()})
,1000
);
this.setState({interval: timer});
}
componentWillUnmount(){
clearInterval(this.state.interval)
return <header className="ChatRoomHeader">{this.props.data}</header>;
}
}
export default ChatRoomHeader;
const ChatRoomHeaderInterval = setTimer(getDate, 1000)(ChatRoomHeader);
export default ChatRoomHeaderInterval;
......@@ -6,7 +6,6 @@ import Avatar from '../Avatar/Avatar';
class Message extends Component {
render() {
// console.log(this.props)
return (
<div className="Message">
<Avatar name={this.props.user !== undefined ? this.props.user.name : ""} user={this.props.user !== undefined ? this.props.user.id : ""}/>
......
......@@ -10,9 +10,18 @@ class MessageBar extends Component {
}
render() {
const image =
this.props.profile != null
? "./avatars/" + this.props.profile.id + ".png"
: "";
return (
<div className="MessageBar">
<div className="userInfo">avatar</div>
<div className="userInfo">
<img className="userInfo-image" src={image} alt="" />
<div className="userInfo-name">
{this.props.profile != null ? this.props.profile.name : ""}
</div>
</div>
<form>
<input
type="text"
......@@ -35,15 +44,14 @@ class MessageBar extends Component {
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,
id: this.props.messageCount + 1,
author: this.props.profile.id,
body: this.state.inputText,
date: this.getDate()
})
......@@ -53,9 +61,9 @@ class MessageBar extends Component {
.catch(e => console.error(e));
}
getDate(){
let date = new Date();
return date.getDay+"/"+date.getMonth+"/"+date.getFullYear
getDate() {
let date = new Date();
return date.getDay + "/" + date.getMonth + "/" + date.getFullYear;
}
}
......
......@@ -5,4 +5,18 @@
.buttonSubmit::after{
content: ">";
}
.userInfo{
display: flex;
margin: 0 auto;
width: fit-content;
&-image{
height: 40px;
}
&-name{
text-align: center;
}
}
}
\ 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