Skip to content

Commit 95c5365

Browse files
andrefsilveira1andrefsilveira1
committed
feat: ajustes finais
1 parent 48c1a3b commit 95c5365

File tree

3 files changed

+36
-62
lines changed

3 files changed

+36
-62
lines changed

‎chatfront/src/App.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Chat from './components/chat';
1+
import {Chat} from './components/chat';
22
import 'bootstrap/dist/css/bootstrap.min.css';
33
function App() {
44
return (

‎chatfront/src/components/chat/index.css‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
1-
2-
.message{
3-
padding:5px;
4-
width: auto;
5-
display: flex;
6-
flex-direction: row;
7-
box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
8-
margin: 5px 10px;
9-
}
1+
.box {
2+
border: 1px solid #ccc;
3+
padding: 20px;
4+
height: 700px;
5+
}

‎chatfront/src/components/chat/index.js‎

Lines changed: 30 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
import React, { useState } from "react";
22
import { over } from "stompjs";
33
import SockJS from "sockjs-client";
4+
import "./index.css"
45

56
var stomClient = null;
6-
export default function Chat() {
7+
export function Chat() {
78
const [clientData, setClientData] = useState({
89
name:"",
910
receiver:"",
1011
connected: false,
1112
message:"",
1213
});
1314
const [publicRoom, setPublicRoom] = useState([]);
14-
const [privateRoom, setPrivateRoom] = useState(new Map());
15+
const [privateRoom, setPrivateRoom] = useState(new Map());
1516

1617
function handleValue(e) {
1718
const {value, name} = e.target
@@ -45,12 +46,12 @@ export default function Chat() {
4546
function onConnected() {
4647
setClientData({...clientData, "connected":true});
4748
stomClient.subscribe("/chat/public", onPublic);
48-
stomClient.subscribe("/user/"+clientData.name+"/private", onPrivate);
4949
clientConnected();
5050
}
5151
function clientConnected() {
5252
let client = {
5353
author: clientData.name,
54+
message: "connected",
5455
status: "JOIN",
5556
};
5657
stomClient.send("/app/message", {}, JSON.stringify(client));
@@ -85,66 +86,43 @@ export default function Chat() {
8586
}
8687
}
8788

88-
// Essa função pode ser usada para mandar mensagem privada
89-
// function sendMessagePrivate() {
90-
// if(stomClient) {
91-
// let message = {
92-
// name: clientData.name,
93-
// receiver: room,
94-
// message: clientData.message,
95-
// status: "MESSAGE",
96-
// };
97-
// if(clientData.name !== room) {
98-
// privateRoom.set(room).push(message);
99-
// setPrivateRoom(new Map(privateRoom));
100-
// }
101-
// stomClient.send("/app/message", {}, JSON.stringify(message));
102-
// setClientData({...clientData, "message":""});
103-
// }
104-
// }
105-
106-
function onPrivate(payload) {
107-
let payloadData = JSON.parse(payload);
108-
if(privateRoom.get(payloadData.name)) {
109-
let data = [];
110-
data.push(payloadData);
111-
privateRoom.set(payloadData.name, data);
112-
setPrivateRoom(new Map(privateRoom));
113-
}
114-
}
115-
11689
return(
11790
<div>
118-
<h1>ChatgpD</h1>
119-
<div className="container">
91+
<h1>ChatgpD</h1>
92+
<div className="container ">
12093
{clientData.connected?
94+
<>
12195
<div>
12296
<div className="chat-content">
123-
<ul className="chat-messages list-group list-group-flush">
124-
{publicRoom.map((chat, index) => (
125-
<>
126-
{
127-
chat.message !== null &&
128-
<li key={index} className={`message list-group-item`}>
97+
<div className="box rounded mt-5">
98+
<ul className="chat-messages list-group list-group-flush">
99+
100+
{publicRoom.map((chat, index) => (
101+
<>
102+
{chat.message === "connected" && chat.author !== clientData.name ? <small key={index} className="list-group-item text-secondary d-flex justify-content-center"> User ({chat.author}) has joined the Server!</small> : ''}
129103
{
130-
chat.message !== null && chat.author !== clientData.name ? <div className="message-data">{chat.author}: {chat.message}</div>
131-
:<div className="message-data">You: {chat.message}</div>
104+
chat.message !== null && chat.message !== "connected" &&
105+
<li key={index} className={`message list-group-item`}>
106+
{
107+
chat.author !== clientData.name? <div className="message-data">{chat.author}: {chat.message}</div>
108+
:<div className="message-data">You: {chat.message}</div>
109+
}
110+
</li>
132111
}
133-
</li>
134-
}
135-
</>
136-
))}
137-
</ul>
138-
139-
<div className="send-message d-flex">
140-
<input type="text" className="form-control m-2" placeholder="Enter your message" name="message" onKeyUp={handleKey} value={clientData.message} onChange={handleMessage}/>
141-
<button type="button" className="btn btn-primary m-2" onClick={sendMessagePublic}>Enviar</button>
142-
</div>
112+
</>
113+
))}
114+
</ul>
115+
</div>
116+
<div className="send-message d-flex mt-2">
117+
<input type="text" className="form-control m-2" placeholder="Enter your message" name="message" onKeyUp={handleKey} value={clientData.message} onChange={handleMessage}/>
118+
<button type="button" className="btn btn-primary m-2" onClick={sendMessagePublic}>Enviar</button>
119+
</div>
143120
</div>
144121
</div>
122+
</>
145123
:
146124

147-
<div className="form-group d-flex h-100 align-items-center justify-content-center">
125+
<div className="form-group d-flex mt-5 align-items-center justify-content-center">
148126
<label >Name: </label>
149127
<input placeholder="Insert your name" className="form-control m-2" name="name" value={clientData.name} onChange={handleValue} onKeyUp={handleKey}></input>
150128
<button type="button" name="name" className="btn btn-primary" onClick={registerClient}>Enter</button>

0 commit comments

Comments
 (0)