mirror of
https://github.com/cheveguerra/whaticket-community.git
synced 2026-04-19 20:29:17 +00:00
Finalized Chat migration to Material Ui
This commit is contained in:
Cassio Santos
@@ -1,180 +1,85 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import api from "../../util/api";
|
||||
import profilePic from "../../Images/canove.png";
|
||||
import profileDefaultPic from "../../Images/profile_default.png";
|
||||
import openSocket from "socket.io-client";
|
||||
import { FiSearch } from "react-icons/fi";
|
||||
import React, { useState } from "react";
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
|
||||
import LogedinNavbar from "../../components/Navbar/LogedinNavbar";
|
||||
import DefaultNavbar from "../../components/Navbar/DefaultNavbar";
|
||||
import ContactsList from "./components/ContactsList/ContactsList";
|
||||
import MessagesList from "./components/MessagesList/MessagesList";
|
||||
import MainDrawer from "../../components/Layout/MainDrawer";
|
||||
|
||||
import ChatBox from "../ChatBox/ChatBox";
|
||||
import "./Chat.css";
|
||||
// let socket;
|
||||
const useStyles = makeStyles(theme => ({
|
||||
chatContainer: {
|
||||
flex: 1,
|
||||
backgroundColor: "#eee",
|
||||
// padding: 20,
|
||||
height: `calc(100% - 64px)`,
|
||||
overflowY: "hidden",
|
||||
},
|
||||
|
||||
const Chat = ({ showToast }) => {
|
||||
const token = localStorage.getItem("token");
|
||||
const username = localStorage.getItem("username");
|
||||
chatPapper: {
|
||||
backgroundColor: "#eee",
|
||||
display: "flex",
|
||||
height: "100%",
|
||||
overflowY: "hidden",
|
||||
},
|
||||
|
||||
const history = useHistory();
|
||||
contactsWrapper: {
|
||||
display: "flex",
|
||||
height: "100%",
|
||||
flexDirection: "column",
|
||||
overflow: "hidden",
|
||||
},
|
||||
messagessWrapper: {
|
||||
display: "flex",
|
||||
height: "100%",
|
||||
flexDirection: "column",
|
||||
overflow: "hidden",
|
||||
},
|
||||
welcomeMsg: {
|
||||
backgroundColor: "#eee",
|
||||
display: "flex",
|
||||
justifyContent: "space-evenly",
|
||||
alignItems: "center",
|
||||
height: "100%",
|
||||
textAlign: "center",
|
||||
},
|
||||
}));
|
||||
|
||||
const [currentPeerContact, setCurrentPeerContact] = useState(null);
|
||||
const [contacts, setContacts] = useState([]);
|
||||
const [displayedContacts, setDisplayedContacts] = useState([]);
|
||||
const [notification, setNotification] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchContacts = async () => {
|
||||
try {
|
||||
const res = await api.get("/contacts", {
|
||||
headers: { Authorization: "Bearer " + token },
|
||||
});
|
||||
setContacts(res.data);
|
||||
setDisplayedContacts(res.data);
|
||||
} catch (err) {
|
||||
if (err.response.data.message === "invalidToken") {
|
||||
localStorage.removeItem("token");
|
||||
localStorage.removeItem("username");
|
||||
localStorage.removeItem("userId");
|
||||
history.push("/login");
|
||||
alert("Sessão expirada, por favor, faça login novamente.");
|
||||
}
|
||||
console.log(err);
|
||||
}
|
||||
};
|
||||
fetchContacts();
|
||||
}, [currentPeerContact, token, notification, history]);
|
||||
|
||||
useEffect(() => {
|
||||
const socket = openSocket("http://localhost:8080");
|
||||
|
||||
socket.emit("joinNotification");
|
||||
|
||||
socket.on("contact", data => {
|
||||
if (data.action === "create") {
|
||||
addContact(data.contact);
|
||||
setNotification(prevState => !prevState);
|
||||
}
|
||||
});
|
||||
|
||||
socket.on("appMessage", data => {
|
||||
setNotification(prevState => !prevState);
|
||||
// handleUnreadMessages(data.message.contactId);
|
||||
});
|
||||
|
||||
return () => {
|
||||
socket.disconnect();
|
||||
};
|
||||
}, []);
|
||||
|
||||
// const handleUnreadMessages = contactId => {
|
||||
// console.log("Atualizando mensagens n lidas");
|
||||
// console.log(contacts);
|
||||
// let aux = [...contacts];
|
||||
// let contactIndex = aux.findIndex(contact => contact.id === contactId);
|
||||
// aux[contactIndex].unreadMessages++;
|
||||
|
||||
// aux.unshift(aux.splice(contactIndex, 1)[0]);
|
||||
|
||||
// setDisplayedContacts(aux);
|
||||
// };
|
||||
|
||||
const addContact = contact => {
|
||||
setContacts(prevState => [...prevState, contact]);
|
||||
setDisplayedContacts(prevState => [...prevState, contact]);
|
||||
};
|
||||
|
||||
const handleSearchContact = e => {
|
||||
let searchTerm = e.target.value.toLowerCase();
|
||||
|
||||
setDisplayedContacts(
|
||||
contacts.filter(contact =>
|
||||
contact.name.toLowerCase().includes(searchTerm)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const handleSelectContact = (e, contact) => {
|
||||
setCurrentPeerContact(contact);
|
||||
};
|
||||
const Chat = () => {
|
||||
const classes = useStyles();
|
||||
const [selectedContact, setSelectedContact] = useState(null);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{!localStorage.getItem("token") ? (
|
||||
<div>
|
||||
<DefaultNavbar />
|
||||
<h1> Você não está logado </h1>
|
||||
<MainDrawer appTitle="Chat">
|
||||
<div className={classes.chatContainer}>
|
||||
<Paper square className={classes.chatPapper}>
|
||||
<Grid container spacing={0}>
|
||||
<Grid item xs={4} className={classes.contactsWrapper}>
|
||||
<ContactsList
|
||||
selectedContact={selectedContact}
|
||||
setSelectedContact={setSelectedContact}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={8} className={classes.messagessWrapper}>
|
||||
{selectedContact ? (
|
||||
<>
|
||||
<MessagesList selectedContact={selectedContact} />
|
||||
</>
|
||||
) : (
|
||||
<Paper
|
||||
square
|
||||
variant="outlined"
|
||||
className={classes.welcomeMsg}
|
||||
>
|
||||
<span>Selecione um contato para começar a conversar</span>
|
||||
</Paper>
|
||||
)}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Paper>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<LogedinNavbar />
|
||||
<div className="root">
|
||||
<div className="body">
|
||||
<div className="viewListUser">
|
||||
<div className="profileviewleftside">
|
||||
<img className="ProfilePicture" alt="" src={profilePic} />
|
||||
<span className="ProfileHeaderText">{username}</span>
|
||||
</div>
|
||||
<div className="rootsearchbar">
|
||||
<div className="input-container">
|
||||
<i className="fa fa-search icon">
|
||||
<FiSearch size="20px" />
|
||||
</i>
|
||||
<input
|
||||
className="input-field"
|
||||
type="text"
|
||||
placeholder="Buscar Contato"
|
||||
onChange={handleSearchContact}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{displayedContacts &&
|
||||
displayedContacts.length > 0 &&
|
||||
displayedContacts.map((contact, index) => (
|
||||
<button
|
||||
className={
|
||||
currentPeerContact &&
|
||||
currentPeerContact.id === contact.id
|
||||
? "selectedviewWrapItem"
|
||||
: "viewWrapItem"
|
||||
}
|
||||
id={contact.id}
|
||||
key={contact.id}
|
||||
onClick={e => handleSelectContact(e, contact)}
|
||||
>
|
||||
<img
|
||||
className="viewAvatarItem"
|
||||
alt=""
|
||||
src={
|
||||
contact.imageURL
|
||||
? contact.imageURL
|
||||
: profileDefaultPic
|
||||
}
|
||||
/>
|
||||
<div className="viewWrapContentItem">
|
||||
<span className="textItem">{contact.name}</span>
|
||||
</div>
|
||||
|
||||
{contact.unreadMessages > 0 && (
|
||||
<div className="notificationpragraph">
|
||||
<p className="newmessages">
|
||||
{contact.unreadMessages}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="viewBoard">
|
||||
{currentPeerContact ? (
|
||||
<ChatBox currentPeerContact={currentPeerContact} />
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</MainDrawer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user