mirror of
https://github.com/cheveguerra/whaticket-community.git
synced 2026-04-19 12:19:16 +00:00
Finished AuthContext
This commit is contained in:
Cassio Santos
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import api from "../../../../util/api";
|
||||
import openSocket from "socket.io-client";
|
||||
import moment from "moment-timezone";
|
||||
|
||||
import profileDefaultPic from "../../../../Images/profile_default.png";
|
||||
|
||||
@@ -13,12 +14,12 @@ import ListItem from "@material-ui/core/ListItem";
|
||||
import ListItemText from "@material-ui/core/ListItemText";
|
||||
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
|
||||
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import Avatar from "@material-ui/core/Avatar";
|
||||
import Divider from "@material-ui/core/Divider";
|
||||
import Badge from "@material-ui/core/Badge";
|
||||
import SearchIcon from "@material-ui/icons/Search";
|
||||
import InputBase from "@material-ui/core/InputBase";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
|
||||
import ContactsHeader from "../ContactsHeader/ContactsHeader";
|
||||
|
||||
@@ -87,6 +88,19 @@ const useStyles = makeStyles(theme => ({
|
||||
border: "none",
|
||||
borderRadius: 30,
|
||||
},
|
||||
|
||||
contactNameWrapper: {
|
||||
display: "flex",
|
||||
// display: "inline",
|
||||
},
|
||||
|
||||
contactName: {
|
||||
// flex: 1,
|
||||
},
|
||||
|
||||
lastMessageTime: {
|
||||
marginLeft: "auto",
|
||||
},
|
||||
}));
|
||||
|
||||
const ContactsList = ({ selectedContact, setSelectedContact }) => {
|
||||
@@ -102,18 +116,16 @@ const ContactsList = ({ selectedContact, setSelectedContact }) => {
|
||||
useEffect(() => {
|
||||
const fetchContacts = async () => {
|
||||
try {
|
||||
const res = await api.get("/contacts", {
|
||||
headers: { Authorization: "Bearer " + token },
|
||||
});
|
||||
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.");
|
||||
if (err) {
|
||||
console.log(err);
|
||||
alert(err);
|
||||
}
|
||||
console.log(err);
|
||||
}
|
||||
@@ -206,9 +218,35 @@ const ContactsList = ({ selectedContact, setSelectedContact }) => {
|
||||
></Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primaryTypographyProps={{ noWrap: true }}
|
||||
secondaryTypographyProps={{ noWrap: true }}
|
||||
primary={contact.name}
|
||||
// primaryTypographyProps={{ noWrap: true }}
|
||||
// secondaryTypographyProps={{ noWrap: true }}
|
||||
|
||||
primary={
|
||||
<div className={classes.contactNameWrapper}>
|
||||
<Typography
|
||||
className={classes.contactName}
|
||||
noWrap
|
||||
component="span"
|
||||
variant="body2"
|
||||
color="textPrimary"
|
||||
>
|
||||
{contact.name}
|
||||
</Typography>
|
||||
{contact.messages && contact.messages[0] && (
|
||||
<Typography
|
||||
className={classes.lastMessageTime}
|
||||
oWrap
|
||||
component="span"
|
||||
variant="body2"
|
||||
color="textSecondary"
|
||||
>
|
||||
{moment(contact.messages[0].createdAt)
|
||||
.tz("America/Sao_Paulo")
|
||||
.format("HH:mm")}
|
||||
</Typography>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
secondary={
|
||||
(contact.messages &&
|
||||
contact.messages[0] &&
|
||||
|
||||
@@ -77,7 +77,6 @@ const MessagesInput = ({ selectedContact, searchParam }) => {
|
||||
const contactId = selectedContact.id;
|
||||
const userId = localStorage.getItem("userId");
|
||||
const username = localStorage.getItem("username");
|
||||
const token = localStorage.getItem("token");
|
||||
|
||||
const mediaInitialState = { preview: "", raw: "", name: "" };
|
||||
const [media, setMedia] = useState(mediaInitialState);
|
||||
@@ -131,9 +130,7 @@ const MessagesInput = ({ selectedContact, searchParam }) => {
|
||||
formData.append("messageBody", media.name);
|
||||
|
||||
try {
|
||||
await api.post(`/messages/${contactId}`, formData, {
|
||||
headers: { Authorization: "Bearer " + token },
|
||||
});
|
||||
await api.post(`/messages/${contactId}`, formData);
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
alert(err);
|
||||
@@ -151,9 +148,7 @@ const MessagesInput = ({ selectedContact, searchParam }) => {
|
||||
messageBody: `${username}: ${inputMessage.trim()}`,
|
||||
};
|
||||
try {
|
||||
await api.post(`/messages/${contactId}`, message, {
|
||||
headers: { Authorization: "Bearer " + token },
|
||||
});
|
||||
await api.post(`/messages/${contactId}`, message);
|
||||
} catch (err) {
|
||||
alert(err);
|
||||
}
|
||||
|
||||
@@ -218,7 +218,6 @@ const MessagesList = ({ selectedContact }) => {
|
||||
const fetchMessages = async () => {
|
||||
try {
|
||||
const res = await api.get("/messages/" + contactId, {
|
||||
headers: { Authorization: "Bearer " + token },
|
||||
params: { searchParam, pageNumber },
|
||||
});
|
||||
setMessagesList(prevMessages => {
|
||||
|
||||
@@ -1,464 +0,0 @@
|
||||
/* Chat board */
|
||||
|
||||
.viewChatBoard {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
height: 92vh;
|
||||
background-image: url("../../Images/wa-background.png");
|
||||
|
||||
backface-visibility: hidden;
|
||||
border-left: 1px solid #ededed;
|
||||
/* max-height: 104.3%; */
|
||||
/* min-height: 104.3%; */
|
||||
/* margin-right: 20px; */
|
||||
/* border-radius: 10px; */
|
||||
/* box-shadow: 0 5px 5px #808888; */
|
||||
}
|
||||
.viewAvatarItem {
|
||||
margin-left: 20px;
|
||||
/* background-image: url('../../images/nopic.jpg'); */
|
||||
}
|
||||
|
||||
.headerChatBoard {
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
|
||||
background-color: #ededed;
|
||||
}
|
||||
.aboutme {
|
||||
padding-top: 20px;
|
||||
margin-left: 80px;
|
||||
|
||||
align-items: center;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
}
|
||||
.textHeaderChatBoard {
|
||||
font-weight: bold;
|
||||
color: #203152;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.viewListContentChat {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
overflow-y: scroll;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.viewListContentChat::-webkit-scrollbar-track {
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.viewListContentChat::-webkit-scrollbar {
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
.viewListContentChat::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
|
||||
.viewBottom {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100px;
|
||||
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.viewMediaBottom {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100px;
|
||||
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.viewInputGallery {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 10px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.icOpenGallery {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icOpenGallery:hover {
|
||||
opacity: 70%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icOpenEmojis {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icOpenEmojis:hover {
|
||||
opacity: 70%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icSend {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: 5px;
|
||||
margin-right: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icSend:hover {
|
||||
opacity: 70%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: 5px;
|
||||
margin-right: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.viewMediaInput {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.viewInput {
|
||||
flex: 1;
|
||||
border-radius: 30px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
border: 0px;
|
||||
height: 50px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.viewInput:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: rgb(199, 199, 199);
|
||||
}
|
||||
|
||||
/* serach messages */
|
||||
|
||||
.searchMessageBar {
|
||||
padding: 10px;
|
||||
width: 300px;
|
||||
margin-bottom: 10px;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
.search-input-field {
|
||||
width: 300px;
|
||||
|
||||
border-radius: 10px;
|
||||
|
||||
/* margin-right: 85%; */
|
||||
align-self: center;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
outline: none !important;
|
||||
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.search-input-container {
|
||||
/* IE10 */
|
||||
display: flex;
|
||||
width: 50%;
|
||||
margin-left: 50%;
|
||||
align-content: flex-end;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/* View item message */
|
||||
|
||||
.viewItemRight {
|
||||
margin-right: 20px;
|
||||
margin-top: 5px;
|
||||
min-width: 100px;
|
||||
max-width: 600px;
|
||||
height: auto;
|
||||
display: block;
|
||||
position: relative;
|
||||
align-self: flex-end;
|
||||
text-align: left;
|
||||
background-color: #dcf8c6;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 0px;
|
||||
box-shadow: 0 5px 5px #808888;
|
||||
padding-left: 10px;
|
||||
padding-right: 40px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 0px;
|
||||
color: #203152;
|
||||
}
|
||||
|
||||
.viewItemRight2 {
|
||||
width: 315px;
|
||||
padding: 8px;
|
||||
height: auto;
|
||||
background-color: #dcf8c6;
|
||||
align-self: flex-end;
|
||||
margin-right: 20px;
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
position: relative;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 0px;
|
||||
color: #203152;
|
||||
box-shadow: 0 5px 5px #808888;
|
||||
}
|
||||
|
||||
.viewItemRight3 {
|
||||
width: 300px;
|
||||
height: auto;
|
||||
align-self: flex-end;
|
||||
margin-right: 20px;
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
position: relative;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 0px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.viewWrapItemLeft {
|
||||
/* width: 300px; */
|
||||
text-align: left;
|
||||
align-self: flex-start;
|
||||
margin-left: 20px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: -15px;
|
||||
}
|
||||
|
||||
.viewWrapItemRight {
|
||||
width: 300px;
|
||||
align-self: flex-end;
|
||||
text-align: left;
|
||||
/* margin-left: 20px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: -15px; */
|
||||
}
|
||||
|
||||
.viewWrapItemLeft3 {
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
width: 340px;
|
||||
margin-bottom: -15px;
|
||||
}
|
||||
|
||||
.viewItemLeft {
|
||||
margin-left: 20px;
|
||||
margin-top: 5px;
|
||||
min-width: 100px;
|
||||
max-width: 600px;
|
||||
height: auto;
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
background-color: #ffffff;
|
||||
align-self: flex-start;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-left-radius: 0px;
|
||||
border-bottom-right-radius: 8px;
|
||||
padding-left: 10px;
|
||||
padding-right: 40px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 0px;
|
||||
color: #303030;
|
||||
box-shadow: 0 5px 5px #808888;
|
||||
}
|
||||
|
||||
.viewItemLeft2 {
|
||||
width: 315px;
|
||||
padding: 8px;
|
||||
height: auto;
|
||||
background-color: #ffffff;
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
position: relative;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-left-radius: 0px;
|
||||
border-bottom-right-radius: 8px;
|
||||
color: #203152;
|
||||
box-shadow: 0 5px 5px #808888;
|
||||
}
|
||||
|
||||
.viewItemLeft3 {
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
width: 300px;
|
||||
height: auto;
|
||||
display: block;
|
||||
position: relative;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-left-radius: 0px;
|
||||
border-bottom-right-radius: 8px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.timesetup {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.peerAvatarLeft {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 15px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
object-fit: cover;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.viewPaddingLeft {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
/* Item text */
|
||||
|
||||
.textContentItem {
|
||||
font-size: 16px;
|
||||
overflow-wrap: break-word;
|
||||
padding: 0px 50px 0px 0px;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
font-size: 11px;
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
right: 10px;
|
||||
text-transform: uppercase;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.viewListContentChat div:last-child {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Item image */
|
||||
|
||||
.imgItemRight {
|
||||
object-fit: cover;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 0px;
|
||||
}
|
||||
|
||||
.imgItemLeft {
|
||||
object-fit: cover;
|
||||
width: 290px;
|
||||
height: 300px;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-left-radius: 0px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
|
||||
.time {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
align-self: center;
|
||||
font: italic small-caps bold 15px/30px Georgia, serif;
|
||||
width: 110px;
|
||||
background-color: #e1f3fb;
|
||||
margin: 10px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.textTime {
|
||||
color: #808888;
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
align-self: center;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
/* Stickers */
|
||||
|
||||
.viewStickers {
|
||||
position: absolute;
|
||||
bottom: 90px;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
.viewStickers::-webkit-scrollbar-track {
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.viewStickers::-webkit-scrollbar {
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
.viewStickers::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
|
||||
.imgSticker {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* Say hi */
|
||||
|
||||
.viewWrapSayHi {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.textSayHi {
|
||||
color: #808888;
|
||||
font-size: 14px;
|
||||
}
|
||||
@@ -1,566 +0,0 @@
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import InfiniteScrollReverse from "react-infinite-scroll-reverse";
|
||||
import { Spinner } from "react-bootstrap";
|
||||
import {
|
||||
FiPaperclip,
|
||||
FiSend,
|
||||
FiTrash2,
|
||||
FiSmile,
|
||||
FiFastForward,
|
||||
FiFile,
|
||||
} from "react-icons/fi";
|
||||
import { BsCheck, BsCheckAll, BsClock } from "react-icons/bs";
|
||||
|
||||
import { Picker } from "emoji-mart";
|
||||
import ModalImage from "react-modal-image";
|
||||
import moment from "moment-timezone";
|
||||
|
||||
import api from "../../util/api";
|
||||
import openSocket from "socket.io-client";
|
||||
import profileDefaultPic from "../../Images/profile_default.png";
|
||||
import ReactAudioPlayer from "react-audio-player";
|
||||
|
||||
import "react-toastify/dist/ReactToastify.css";
|
||||
import "emoji-mart/css/emoji-mart.css";
|
||||
import "./ChatBox.css";
|
||||
|
||||
const ChatBox = ({ currentPeerContact }) => {
|
||||
const SERVER_URL = "http://localhost:8080/";
|
||||
const contactId = currentPeerContact.id;
|
||||
|
||||
const userId = localStorage.getItem("userId");
|
||||
const username = localStorage.getItem("username");
|
||||
const token = localStorage.getItem("token");
|
||||
|
||||
const mediaInitialState = { preview: "", raw: "", name: "" };
|
||||
const [inputMessage, setInputMessage] = useState("");
|
||||
const [media, setMedia] = useState(mediaInitialState);
|
||||
const [showEmoji, setShowEmoji] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [listMessages, setListMessages] = useState([]);
|
||||
const [hasMore, setHasMore] = useState(false);
|
||||
const [searchParam, setSearchParam] = useState("");
|
||||
const [pageNumber, setPageNumber] = useState(0);
|
||||
const lastMessageRef = useRef();
|
||||
|
||||
useEffect(() => {
|
||||
setListMessages([]);
|
||||
}, [searchParam]);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
const delayDebounceFn = setTimeout(() => {
|
||||
console.log(searchParam);
|
||||
const fetchMessages = async () => {
|
||||
try {
|
||||
const res = await api.get("/messages/" + contactId, {
|
||||
headers: { Authorization: "Bearer " + token },
|
||||
params: { searchParam, pageNumber },
|
||||
});
|
||||
setListMessages(prevMessages => {
|
||||
return [...res.data.messages, ...prevMessages];
|
||||
});
|
||||
setHasMore(res.data.messages.length > 0);
|
||||
setLoading(false);
|
||||
console.log(res.data);
|
||||
if (pageNumber === 1 && res.data.messages.length > 0) {
|
||||
scrollToBottom();
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
alert(err);
|
||||
}
|
||||
};
|
||||
fetchMessages();
|
||||
}, 1000);
|
||||
return () => clearTimeout(delayDebounceFn);
|
||||
}, [searchParam, pageNumber, contactId, token]);
|
||||
|
||||
useEffect(() => {
|
||||
const socket = openSocket(SERVER_URL);
|
||||
|
||||
socket.emit("joinChatBox", contactId, () => {});
|
||||
|
||||
socket.on("appMessage", data => {
|
||||
if (data.action === "create") {
|
||||
addMessage(data.message);
|
||||
scrollToBottom();
|
||||
} else if (data.action === "update") {
|
||||
updateMessageAck(data.message);
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
socket.disconnect();
|
||||
setInputMessage("");
|
||||
setSearchParam("");
|
||||
setShowEmoji(false);
|
||||
setPageNumber(1);
|
||||
setMedia({});
|
||||
setListMessages([]);
|
||||
};
|
||||
}, [contactId]);
|
||||
|
||||
const loadMore = () => {
|
||||
setPageNumber(prevPageNumber => prevPageNumber + 1);
|
||||
};
|
||||
|
||||
const updateMessageAck = message => {
|
||||
let id = message.id;
|
||||
setListMessages(prevState => {
|
||||
let aux = [...prevState];
|
||||
let messageIndex = aux.findIndex(message => message.id === id);
|
||||
aux[messageIndex].ack = message.ack;
|
||||
|
||||
return aux;
|
||||
});
|
||||
};
|
||||
|
||||
const scrollToBottom = () => {
|
||||
if (lastMessageRef) {
|
||||
lastMessageRef.current.scrollIntoView({});
|
||||
}
|
||||
};
|
||||
|
||||
const addMessage = message => {
|
||||
setListMessages(prevState => {
|
||||
if (prevState.length >= 20) {
|
||||
let aux = [...prevState];
|
||||
aux.shift();
|
||||
aux.push(message);
|
||||
return aux;
|
||||
} else {
|
||||
return [...prevState, message];
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleChangeInput = e => {
|
||||
setInputMessage(e.target.value);
|
||||
};
|
||||
|
||||
const handleAddEmoji = e => {
|
||||
let emoji = e.native;
|
||||
setInputMessage(prevState => prevState + emoji);
|
||||
};
|
||||
|
||||
const handleChangeMedia = e => {
|
||||
if (e.target.files.length) {
|
||||
setMedia({
|
||||
preview: URL.createObjectURL(e.target.files[0]),
|
||||
raw: e.target.files[0],
|
||||
name: e.target.files[0].name,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputPaste = e => {
|
||||
if (e.clipboardData.files[0]) {
|
||||
setMedia({
|
||||
preview: URL.createObjectURL(e.clipboardData.files[0]),
|
||||
raw: e.clipboardData.files[0],
|
||||
name: e.clipboardData.files[0].name,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleUploadMedia = async e => {
|
||||
e.preventDefault();
|
||||
const formData = new FormData();
|
||||
formData.append("media", media.raw);
|
||||
formData.append("userId", userId);
|
||||
formData.append("messageBody", media.name);
|
||||
|
||||
try {
|
||||
await api.post(`/messages/${contactId}`, formData, {
|
||||
headers: { Authorization: "Bearer " + token },
|
||||
});
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
alert(err);
|
||||
}
|
||||
setMedia(mediaInitialState);
|
||||
};
|
||||
|
||||
const handleSendMessage = async () => {
|
||||
if (inputMessage.trim() === "") return;
|
||||
const message = {
|
||||
read: 1,
|
||||
userId: userId,
|
||||
mediaUrl: "",
|
||||
messageBody: `${username}: ${inputMessage.trim()}`,
|
||||
};
|
||||
try {
|
||||
await api.post(`/messages/${contactId}`, message, {
|
||||
headers: { Authorization: "Bearer " + token },
|
||||
});
|
||||
} catch (err) {
|
||||
alert(err);
|
||||
}
|
||||
setInputMessage("");
|
||||
setShowEmoji(false);
|
||||
};
|
||||
|
||||
const handleSearch = e => {
|
||||
setSearchParam(e.target.value);
|
||||
setPageNumber(1);
|
||||
};
|
||||
|
||||
const checkMessageDay = (message, index) => {
|
||||
if (index < listMessages.length - 1) {
|
||||
let messageDay = moment(listMessages[index].createdAt)
|
||||
.tz("America/Sao_Paulo")
|
||||
.format("DD");
|
||||
|
||||
let nextMessageDay = moment(listMessages[index + 1].createdAt)
|
||||
.tz("America/Sao_Paulo")
|
||||
.format("DD");
|
||||
|
||||
if (messageDay < nextMessageDay) {
|
||||
return (
|
||||
<span className="textTime" key={message.createdAt}>
|
||||
<div className="time">
|
||||
{moment(listMessages[index + 1].createdAt)
|
||||
.tz("America/Sao_Paulo")
|
||||
.format("DD/MM/YY")}
|
||||
</div>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
if (index + 1 === listMessages.length) {
|
||||
return (
|
||||
<div
|
||||
key={`ref-${message.createdAt}`}
|
||||
ref={lastMessageRef}
|
||||
style={{ float: "left", clear: "both" }}
|
||||
></div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const renderMsgAck = message => {
|
||||
//todo remove timestamp logic from main return and adopt moment to timestamps
|
||||
if (message.ack === 0) {
|
||||
return <BsClock size="18" />;
|
||||
} else if (message.ack === 1) {
|
||||
return <BsCheck size="18" />;
|
||||
} else if (message.ack === 2) {
|
||||
return <BsCheckAll size="18" />;
|
||||
} else if (message.ack === 3) {
|
||||
return <BsCheckAll size="18" color="green" />;
|
||||
}
|
||||
};
|
||||
|
||||
const renderMessages = () => {
|
||||
if (listMessages.length > 0) {
|
||||
let viewListMessages = [];
|
||||
listMessages.forEach((message, index) => {
|
||||
// mensagens recebidas
|
||||
if (message.userId === 0) {
|
||||
if (message.mediaUrl && message.mediaType === "image") {
|
||||
viewListMessages.push(
|
||||
<div className="viewItemLeft2" key={message.id}>
|
||||
<ModalImage
|
||||
className="imgItemLeft"
|
||||
smallSrcSet={message.mediaUrl}
|
||||
medium={message.mediaUrl}
|
||||
large={message.mediaUrl}
|
||||
alt=""
|
||||
/>
|
||||
<div className="textContentItem">
|
||||
{message.messageBody}
|
||||
<span className="timestamp">
|
||||
{moment(message.createdAt)
|
||||
.tz("America/Sao_Paulo")
|
||||
.format("HH:mm")}
|
||||
</span>
|
||||
</div>
|
||||
</div>,
|
||||
checkMessageDay(message, index)
|
||||
);
|
||||
} else if (message.mediaUrl && message.mediaType === "audio") {
|
||||
viewListMessages.push(
|
||||
<div className="viewItemLeft2" key={message.id}>
|
||||
<ReactAudioPlayer
|
||||
src={`${SERVER_URL}${message.mediaUrl}`}
|
||||
controls
|
||||
/>
|
||||
<div className="textContentItem">
|
||||
<span className="timestamp">
|
||||
{moment(message.createdAt)
|
||||
.tz("America/Sao_Paulo")
|
||||
.format("HH:mm")}
|
||||
</span>
|
||||
</div>
|
||||
</div>,
|
||||
checkMessageDay(message, index)
|
||||
);
|
||||
} else if (message.mediaUrl && message.mediaType === "video") {
|
||||
viewListMessages.push(
|
||||
<div className="viewItemLeft2" key={message.id}>
|
||||
<video
|
||||
className="imgItemLeft"
|
||||
src={`${SERVER_URL}${message.mediaUrl}`}
|
||||
controls
|
||||
/>
|
||||
<div className="textContentItem">
|
||||
{message.messageBody}
|
||||
<span className="timestamp">
|
||||
{moment(message.createdAt)
|
||||
.tz("America/Sao_Paulo")
|
||||
.format("HH:mm")}
|
||||
</span>
|
||||
</div>
|
||||
</div>,
|
||||
checkMessageDay(message, index)
|
||||
);
|
||||
} else if (message.mediaUrl) {
|
||||
viewListMessages.push(
|
||||
<div className="viewItemLeft" key={message.id}>
|
||||
<div className="textContentItem">
|
||||
<a
|
||||
href={`${SERVER_URL}${message.mediaUrl}`}
|
||||
className="textContentItem"
|
||||
>
|
||||
{message.messageBody}
|
||||
<FiFile size="20" />
|
||||
</a>
|
||||
<span className="timestamp">
|
||||
{moment(message.createdAt)
|
||||
.tz("America/Sao_Paulo")
|
||||
.format("HH:mm")}
|
||||
</span>
|
||||
</div>
|
||||
</div>,
|
||||
checkMessageDay(message, index)
|
||||
);
|
||||
} else {
|
||||
viewListMessages.push(
|
||||
<div className="viewItemLeft" key={message.id}>
|
||||
<div className="textContentItem">
|
||||
{message.messageBody}
|
||||
<span className="timestamp">
|
||||
{moment(message.createdAt)
|
||||
.tz("America/Sao_Paulo")
|
||||
.format("HH:mm")}
|
||||
</span>
|
||||
</div>
|
||||
</div>,
|
||||
checkMessageDay(message, index)
|
||||
);
|
||||
}
|
||||
} // mensagens enviadas
|
||||
else {
|
||||
if (message.mediaUrl && message.mediaType === "image") {
|
||||
viewListMessages.push(
|
||||
<div className="viewItemRight2" key={message.id}>
|
||||
<ModalImage
|
||||
className="imgItemRight"
|
||||
smallSrcSet={`${SERVER_URL}${message.mediaUrl}`}
|
||||
medium={`${SERVER_URL}${message.mediaUrl}`}
|
||||
large={`${SERVER_URL}${message.mediaUrl}`}
|
||||
alt=""
|
||||
/>
|
||||
<div className="textContentItem">
|
||||
{message.messageBody}
|
||||
<span className="timestamp">
|
||||
{moment(message.createdAt)
|
||||
.tz("America/Sao_Paulo")
|
||||
.format("HH:mm")}{" "}
|
||||
{renderMsgAck(message)}
|
||||
</span>
|
||||
</div>
|
||||
</div>,
|
||||
checkMessageDay(message, index)
|
||||
);
|
||||
} else if (message.mediaUrl && message.mediaType === "audio") {
|
||||
viewListMessages.push(
|
||||
<div className="viewItemRight2 " key={message.id}>
|
||||
<ReactAudioPlayer
|
||||
src={`${SERVER_URL}${message.mediaUrl}`}
|
||||
controls
|
||||
/>
|
||||
<div className="textContetItem">
|
||||
<span className="timestamp">
|
||||
{moment(message.createdAt)
|
||||
.tz("America/Sao_Paulo")
|
||||
.format("HH:mm")}{" "}
|
||||
{renderMsgAck(message)}
|
||||
</span>
|
||||
</div>
|
||||
</div>,
|
||||
checkMessageDay(message, index)
|
||||
);
|
||||
} else if (message.mediaUrl && message.mediaType === "video") {
|
||||
viewListMessages.push(
|
||||
<div className="viewItemRight2" key={message.id}>
|
||||
<video src={`${SERVER_URL}${message.mediaUrl}`} controls />
|
||||
{message.messageBody}
|
||||
<span className="timestamp">
|
||||
{moment(message.createdAt)
|
||||
.tz("America/Sao_Paulo")
|
||||
.format("HH:mm")}{" "}
|
||||
{renderMsgAck(message)}
|
||||
</span>
|
||||
</div>,
|
||||
checkMessageDay(message, index)
|
||||
);
|
||||
} else if (message.mediaUrl) {
|
||||
viewListMessages.push(
|
||||
<div className="viewItemRight" key={message.id}>
|
||||
<div className="textContentItem">
|
||||
<a
|
||||
href={`${SERVER_URL}${message.mediaUrl}`}
|
||||
className="textContentItem"
|
||||
>
|
||||
{message.messageBody}
|
||||
<FiFile size="20" />
|
||||
</a>
|
||||
<span className="timestamp">
|
||||
{moment(message.createdAt)
|
||||
.tz("America/Sao_Paulo")
|
||||
.format("HH:mm")}{" "}
|
||||
{renderMsgAck(message)}
|
||||
</span>
|
||||
</div>
|
||||
</div>,
|
||||
checkMessageDay(message, index)
|
||||
);
|
||||
} else {
|
||||
viewListMessages.push(
|
||||
<div className="viewItemRight" key={message.id}>
|
||||
<div className="textContentItem">
|
||||
{message.messageBody}
|
||||
<span className="timestamp">
|
||||
{moment(message.createdAt)
|
||||
.tz("America/Sao_Paulo")
|
||||
.format("HH:mm")}{" "}
|
||||
{renderMsgAck(message)}
|
||||
</span>
|
||||
</div>
|
||||
</div>,
|
||||
checkMessageDay(message, index)
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
return viewListMessages;
|
||||
} else {
|
||||
return (
|
||||
<div className="viewWrapSayHi">
|
||||
<span className="textSayHi">Diga olá para o seu novo contato</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
console.log(listMessages);
|
||||
|
||||
return (
|
||||
<div className="viewChatBoard">
|
||||
<div className="headerChatBoard">
|
||||
<img
|
||||
className="viewAvatarItem"
|
||||
src={currentPeerContact.imageURL || profileDefaultPic}
|
||||
alt=""
|
||||
/>
|
||||
<span className="textHeaderChatBoard">
|
||||
<p style={{ fontSize: "20px" }}>{currentPeerContact.name}</p>
|
||||
</span>
|
||||
<div className="aboutme">
|
||||
<span>
|
||||
<p>Status do contato</p>
|
||||
</span>
|
||||
</div>
|
||||
<div className="search-input-container">
|
||||
<input
|
||||
className="search-input-field"
|
||||
type="text"
|
||||
placeholder="Buscar Mensagens"
|
||||
onChange={handleSearch}
|
||||
value={searchParam}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<InfiniteScrollReverse
|
||||
className="viewListContentChat"
|
||||
hasMore={hasMore}
|
||||
isLoading={loading}
|
||||
loadMore={loadMore}
|
||||
loadArea={10}
|
||||
>
|
||||
{listMessages.length > 0 ? renderMessages() : []}
|
||||
</InfiniteScrollReverse>
|
||||
|
||||
{media.preview ? (
|
||||
<div className="viewMediaBottom">
|
||||
<FiTrash2
|
||||
color="gray"
|
||||
className="icOpenGallery"
|
||||
onClick={e => setMedia(mediaInitialState)}
|
||||
/>
|
||||
<span className="viewMediaInput">
|
||||
{media.name}
|
||||
{/* <img src={media.preview} alt=""></img> */}
|
||||
</span>
|
||||
<FiFastForward
|
||||
color="gray"
|
||||
className="icSend"
|
||||
onClick={handleUploadMedia}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="viewBottom">
|
||||
<div>
|
||||
{showEmoji ? (
|
||||
<div className="viewStickers">
|
||||
<Picker onSelect={handleAddEmoji} />
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<FiSmile
|
||||
color="gray"
|
||||
className="icOpenEmojis"
|
||||
onClick={e => setShowEmoji(prevState => !prevState)}
|
||||
/>
|
||||
<label htmlFor="upload-button">
|
||||
<FiPaperclip color="gray" className="icOpenGallery" />
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
id="upload-button"
|
||||
style={{ display: "none" }}
|
||||
onChange={handleChangeMedia}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<input
|
||||
// ref={input => inputMessage && inputMessage.focus()}
|
||||
name="inputMessage"
|
||||
autoComplete="off"
|
||||
className="viewInput"
|
||||
placeholder="Digite uma mensagem"
|
||||
onPaste={handleInputPaste}
|
||||
value={inputMessage}
|
||||
onChange={handleChangeInput}
|
||||
onKeyPress={e => {
|
||||
if (e.key === "Enter") {
|
||||
handleSendMessage();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<FiSend color="gray" className="icSend" onClick={handleSendMessage} />
|
||||
</div>
|
||||
)}
|
||||
{loading ? (
|
||||
<div className="viewLoading">
|
||||
<Spinner animation="border" variant="success" />
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChatBox;
|
||||
@@ -1,6 +1,4 @@
|
||||
import React, { useState } from "react";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import api from "../../util/api";
|
||||
import React, { useState, useContext } from "react";
|
||||
import { Link as RouterLink } from "react-router-dom";
|
||||
|
||||
import Avatar from "@material-ui/core/Avatar";
|
||||
@@ -17,6 +15,8 @@ import Typography from "@material-ui/core/Typography";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import Container from "@material-ui/core/Container";
|
||||
|
||||
import { AuthContext } from "../../Context/Auth/AuthContext";
|
||||
|
||||
const Copyright = () => {
|
||||
return (
|
||||
<Typography variant="body2" color="textSecondary" align="center">
|
||||
@@ -51,27 +51,11 @@ const useStyles = makeStyles(theme => ({
|
||||
}));
|
||||
|
||||
const Login = ({ showToast }) => {
|
||||
const [user, setUser] = useState({ email: "", password: "" });
|
||||
const history = useHistory();
|
||||
|
||||
const classes = useStyles();
|
||||
|
||||
const handleLogin = async e => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
const res = await api.post("/auth/login", user);
|
||||
localStorage.setItem("token", res.data.token);
|
||||
localStorage.setItem("username", res.data.username);
|
||||
localStorage.setItem("userId", res.data.userId);
|
||||
// const remainingMilliseconds = 60 * 60 * 1000;
|
||||
// const expiryDate = new Date(new Date().getTime() + remainingMilliseconds);
|
||||
// localStorage.setItem("expiryDate", expiryDate.toISOString());
|
||||
showToast(1, "Login efetuado com sucesso");
|
||||
history.push("/chat");
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
};
|
||||
const [user, setUser] = useState({ email: "", password: "" });
|
||||
|
||||
const { handleLogin } = useContext(AuthContext);
|
||||
|
||||
const handleChangeInput = e => {
|
||||
setUser({ ...user, [e.target.name]: e.target.value });
|
||||
|
||||
@@ -54,6 +54,7 @@ const useStyles = makeStyles(theme => ({
|
||||
const SignUp = () => {
|
||||
const classes = useStyles();
|
||||
const history = useHistory();
|
||||
|
||||
const [user, setUser] = useState({ name: "", email: "", password: "" });
|
||||
|
||||
const handleChangeInput = e => {
|
||||
|
||||
79
frontend/src/pages/WhatsAuth/WhatsAuth.js
Normal file
79
frontend/src/pages/WhatsAuth/WhatsAuth.js
Normal file
@@ -0,0 +1,79 @@
|
||||
import React from "react";
|
||||
import clsx from "clsx";
|
||||
import MainDrawer from "../../components/Layout/MainDrawer";
|
||||
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
|
||||
import Container from "@material-ui/core/Container";
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
root: {
|
||||
display: "flex",
|
||||
},
|
||||
|
||||
title: {
|
||||
flexGrow: 1,
|
||||
},
|
||||
|
||||
appBarSpacer: theme.mixins.toolbar,
|
||||
content: {
|
||||
flexGrow: 1,
|
||||
|
||||
overflow: "auto",
|
||||
},
|
||||
container: {
|
||||
// paddingTop: theme.spacing(4),
|
||||
// paddingBottom: theme.spacing(4),
|
||||
height: `calc(100% - 64px)`,
|
||||
},
|
||||
paper: {
|
||||
padding: theme.spacing(2),
|
||||
display: "flex",
|
||||
overflow: "auto",
|
||||
flexDirection: "column",
|
||||
},
|
||||
fixedHeight: {
|
||||
height: 640,
|
||||
},
|
||||
}));
|
||||
|
||||
const WhatsAuth = () => {
|
||||
const classes = useStyles();
|
||||
|
||||
const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<MainDrawer appTitle="QR Code">
|
||||
<div className={classes.root}>
|
||||
<main className={classes.content}>
|
||||
<div className={classes.appBarSpacer} />
|
||||
<Container maxWidth="lg" className={classes.container}>
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12}>
|
||||
<Paper className={classes.paper}>
|
||||
<h4>Status da conexão</h4>
|
||||
</Paper>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Paper className={fixedHeightPaper}>
|
||||
<h1>QR Code</h1>
|
||||
</Paper>
|
||||
</Grid>
|
||||
{/* <Grid item xs={12} md={4} lg={3}>
|
||||
<Paper className={fixedHeightPaper}>
|
||||
<h1>paper2</h1>
|
||||
</Paper>
|
||||
</Grid> */}
|
||||
</Grid>
|
||||
</Container>
|
||||
</main>
|
||||
</div>
|
||||
</MainDrawer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WhatsAuth;
|
||||
Reference in New Issue
Block a user