Commit a6c8cd85 authored by Pablo Saavedra's avatar Pablo Saavedra

Hooks

parent 21507d04
......@@ -4,5 +4,7 @@
"path": "."
}
],
"settings": {}
"settings": {
"vscode.tsc.compiler.alertTSConfigChanges": "never"
}
}
\ No newline at end of file
......@@ -95,6 +95,66 @@
"body": "Hola don pepito",
"date": "2019-03-27T09:33:41.579Z",
"id": "5"
},
{
"author": "456322",
"body": "pruea",
"date": "2019-04-10T08:27:58.626Z",
"id": "HHYrIOT"
},
{
"author": "456322",
"body": "test",
"date": "2019-04-10T08:36:34.304Z",
"id": "fNYkFUS"
},
{
"author": "456322",
"body": "test2",
"date": "2019-04-10T08:36:40.469Z",
"id": "cA2BMfM"
},
{
"author": "456322",
"body": "test3",
"date": "2019-04-11T07:29:46.945Z",
"id": "gNU1hwn"
},
{
"author": "456322",
"body": "test4",
"date": "2019-04-11T07:30:01.099Z",
"id": "fyvxqXc"
},
{
"author": "456322",
"body": "test",
"date": "2019-04-11T08:04:30.721Z",
"id": "ZEkPiAd"
},
{
"author": 456330,
"body": "Hola soy ana",
"date": "2019-04-11T08:26:15.676Z",
"id": "ZnhI_nL"
},
{
"author": 456328,
"body": "Hola soy Lennon",
"date": "2019-04-11T08:26:36.288Z",
"id": "jizN4xs"
},
{
"author": 456331,
"body": "Hola soy Bea",
"date": "2019-04-11T08:29:42.682Z",
"id": "6aBlqO5"
},
{
"author": 456327,
"body": "Hola soy Obi",
"date": "2019-04-11T08:30:07.570Z",
"id": "PMRfmSX"
}
]
}
\ No newline at end of file
json-server --watch db.json --port 3004
import React, { Component } from "react";
import "./App.css";
import ChatRoom from "../components/ChatRoom";
import ChatRoom from "../components/ChatRoom.hooks.js";
const SERVER = "http://localhost:3004";
......
......@@ -27,6 +27,7 @@ class AvatarSelector extends Component {
this.setState({
selectedAvatarId: personId
});
this.props.selectorHandler(personId);
};
render() {
......
import React, { useState, useEffect } from "react";
//import "./ChatRoom.css";
import Message from "./Message";
import ChatRoomHeader from "../components/ChatRoomHeader";
import AvatarSelector from "../components/AvatarSelector";
import NameForm from "../components/NameForm";
import {SERVER} from "../components/Util";
function ChatRoom(props) {
const [messages, setMessages] = useState([]);
const [selectedUser, setSelectedUser] = useState("456317");
useEffect(() => {
const messagesPollingInterval = setInterval(() => {
fetch(`${SERVER}/messages`)
.then(res => res.json())
.then(res => {
setMessages(res);
})
.catch(err => {
console.error("Error:", err);
setMessages([]);
});
}, 1000);
// The return function will be launched in componentWillDismount
return () => clearInterval(messagesPollingInterval);
},[/*put here the variables to be observed, empty=launch once*/]);
function getName(id) {
const people = props.people;
for (let person of people) {
if (person.id === id) {
return person.name;
}
}
return false;
}
function getImage(id) {
return "./avatars/" + id + ".png";
}
return (
<div className="body">
<h1>React ChatRoom</h1>
<ChatRoomHeader />
<AvatarSelector people={props.people} selectorHandler={setSelectedUser}/>
<NameForm authorId={selectedUser} />
{messages.map(message => (
<Message
key={message.id}
name={getName(message.author)}
imgsrc={getImage(message.author)}
text={message.body}
date={message.date}
/>
))}
</div>
);
}
export default ChatRoom;
......@@ -3,28 +3,43 @@ import React, { Component } from "react";
import Message from "./Message";
import ChatRoomHeader from "../components/ChatRoomHeader";
import AvatarSelector from "../components/AvatarSelector";
const SERVER = "http://localhost:3004";
let getDate = () => new Date().toLocaleString("es-ES");
import NameForm from "../components/NameForm";
import {SERVER} from "../components/Util";
import {getDate} from "../components/Util";
class ChatRoom extends Component {
constructor(props) {
super(props);
this.state = {
messages: []
messages: [],
intervalEvent: null
};
}
componentDidMount() {
fetch(`${SERVER}/messages`)
.then(res => res.json())
.then(res => {
this.setState({ messages: res });
})
.catch(err => {
console.error("Error:", err);
this.setState({ messages: [] });
});
const messagesPollingInterval = setInterval(() => {
this.setState({ date: getDate() });
fetch(`${SERVER}/messages`)
.then(res => res.json())
.then(res => {
this.setState({
messages: res,
intervalEvent: messagesPollingInterval
});
})
.catch(err => {
console.error("Error:", err);
this.setState({
messages: [],
intervalEvent: messagesPollingInterval
});
});
}, 1000);
}
componentWillUnmount() {
clearInterval(this.state.intervalEvent);
}
printMessages() {
......@@ -64,6 +79,7 @@ class ChatRoom extends Component {
<h1>React ChatRoom</h1>
<ChatRoomHeader />
<AvatarSelector people={this.props.people} />
<NameForm authorId="456319" />
{/* <Message name="Pepe" imgsrc="./avatars/456317.png" text={this.state.messages[0].body} date={getDate()}/> */}
......
import React, { Component } from "react";
import Avatar from '../components/Avatar';
import {SERVER} from '../components/Util';
function getISODate(){
let d=new Date();
return d.toISOString();
}
class NameForm extends Component {
constructor(props) {
super(props);
this.state = {
message: ""
};
}
onSubmitHandler = e => {
e.preventDefault(); //Stop default behavior
fetch(`${SERVER}/messages`, {
method: "post",
headers: {
"Content-Type": "application/json" // <--- don't forget this!
},
body: JSON.stringify({
author: this.props.authorId,
body: this.state.message,
date: getISODate()
})
})
.then(res => res.json()) //parseado de la respuesta
.then(res => {
console.log("Resp:", res)
this.setState({
message:""
});
})
.catch(e => console.error(e));
};
onChangeHandler = e => {
this.setState({
message: e.target.value
});
};
render() {
return (
<form id="NameForm" onSubmit={this.onSubmitHandler}>
<Avatar
// name="pepe"
imgsrc={"../avatars/" + this.props.authorId + ".png"}
/>
<input
name="name"
type="text"
value={this.state.message}
onChange={this.onChangeHandler}
/>
<button type="submit" name="submit" value="submit">
Submit
</button>
</form>
);
}
}
export default NameForm;
\ No newline at end of file
class Util {
export class Util {
static getDate = () => new Date().toLocaleString("es-ES");
}
export default Util;
\ No newline at end of file
export const getDate = () => new Date().toLocaleString("es-ES");
export const SERVER = "http://localhost:3004";
\ No newline at end of file
......@@ -70,4 +70,11 @@
background-color: cadetblue;
}
}
}
#NameForm{
border: 1px solid black;
img{
width: 40px;
height: 40px;
}
}
\ 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