cheveguerra/whaticket-community
1
0
Fork 0
mirror of https://github.com/cheveguerra/whaticket-community.git synced 2026-04-19 20:29:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

First github Commit

Browse Source
This commit is contained in:
canove
2020-06-18 17:25:43 -03:00
parent 48ee6385d3
commit 8a6324a98b
19 changed files with 391 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
backend/controllers/contact.js
View File

@@ -3,12 +3,23 @@ const Message = require("../models/Message");
const Sequelize = require("sequelize"); const Sequelize = require("sequelize");
exports.getContacts = async (req, res) => { exports.getContacts = async (req, res) => {
const { searchParam } = req.query;
const lowerSerachParam = searchParam.toLowerCase();
const whereCondition = {
name: Sequelize.where(
Sequelize.fn("LOWER", Sequelize.col("name")),
"LIKE",
"%" + lowerSerachParam + "%"
),
};
//todo >> add contact number to search where condition
try { try {
const contacts = await Contact.findAll({ const contacts = await Contact.findAll({
include: { where: whereCondition,
model: Message,
attributes: [],
},
attributes: { attributes: {
include: [ include: [
[ [
@@ -25,7 +36,7 @@ exports.getContacts = async (req, res) => {
], ],
], ],
}, },
order: [[Message, "createdAt", "DESC"]], order: [["updatedAt", "DESC"]],
}); });
return res.json(contacts); return res.json(contacts);

14
backend/controllers/message.js
View File

@@ -3,7 +3,7 @@ const Message = require("../models/Message");
const Contact = require("../models/Contact"); const Contact = require("../models/Contact");
const { getIO } = require("../socket"); const { getIO } = require("../socket");
const { getWbot } = require("./wbot"); const { getWbot } = require("./wbot");
const sequelize = require("sequelize"); const Sequelize = require("sequelize");
const { MessageMedia } = require("whatsapp-web.js"); const { MessageMedia } = require("whatsapp-web.js");
@@ -44,13 +44,11 @@ exports.getContactMessages = async (req, res, next) => {
const { contactId } = req.params; const { contactId } = req.params;
const { searchParam, pageNumber = 1 } = req.query; const { searchParam, pageNumber = 1 } = req.query;
console.log(req.body, req.query);
const lowerSerachParam = searchParam.toLowerCase(); const lowerSerachParam = searchParam.toLowerCase();
const whereCondition = { const whereCondition = {
messageBody: sequelize.where( messageBody: Sequelize.where(
sequelize.fn("LOWER", sequelize.col("messageBody")), Sequelize.fn("LOWER", Sequelize.col("messageBody")),
"LIKE", "LIKE",
"%" + lowerSerachParam + "%" "%" + lowerSerachParam + "%"
), ),
@@ -90,7 +88,11 @@ exports.getContactMessages = async (req, res, next) => {
}; };
}); });
return res.json({ messages: serializedMessages.reverse(), messagesFound }); return res.json({
messages: serializedMessages.reverse(),
contact: contact,
messagesFound,
});
} catch (err) { } catch (err) {
next(err); next(err);
} }

99
backend/controllers/wbot.js
View File

@@ -1,57 +1,72 @@
const qrCode = require("qrcode-terminal"); const qrCode = require("qrcode-terminal");
const { Client } = require("whatsapp-web.js"); const { Client } = require("whatsapp-web.js");
const Whatsapp = require("../models/Whatsapp"); const Whatsapp = require("../models/Whatsapp");
const { getIO } = require("../socket");
let wbot; let wbot;
module.exports = { module.exports = {
init: async () => { init: async () => {
let sessionCfg; try {
let sessionCfg;
const dbSession = await Whatsapp.findOne({ where: { id: 1 } }); const dbSession = await Whatsapp.findOne({ where: { id: 1 } });
if (dbSession && dbSession.session) { if (dbSession && dbSession.session) {
sessionCfg = JSON.parse(dbSession.session); sessionCfg = JSON.parse(dbSession.session);
} }
wbot = new Client({ wbot = new Client({
session: sessionCfg, session: sessionCfg,
restartOnAuthFail: true, restartOnAuthFail: true,
});
wbot.initialize();
wbot.on("qr", async qr => {
qrCode.generate(qr, { small: true });
await Whatsapp.upsert({ id: 1, qrcode: qr, status: "pending" });
});
wbot.on("authenticated", async session => {
console.log("AUTHENTICATED");
await Whatsapp.upsert({
id: 1,
session: JSON.stringify(session),
status: "authenticated",
}); });
}); wbot.initialize();
wbot.on("auth_failure", async msg => { wbot.on("qr", async qr => {
console.error("AUTHENTICATION FAILURE", msg); qrCode.generate(qr, { small: true });
await Whatsapp.destroy({ where: { id: 1 } }); await Whatsapp.upsert({ id: 1, qrcode: qr, status: "pending" });
}); getIO().emit("qrcode", {
wbot.on("ready", async () => { action: "update",
console.log("READY"); qr: qr,
await Whatsapp.update({ status: "online" }, { where: { id: 1 } }); });
// const chats = await wbot.getChats(); // pega as mensagens nao lidas (recebidas quando o bot estava offline) });
// let unreadMessages; // todo > salvar isso no DB pra mostrar no frontend wbot.on("authenticated", async session => {
// for (let chat of chats) { console.log("AUTHENTICATED");
// if (chat.unreadCount > 0) { await Whatsapp.upsert({
// unreadMessages = await chat.fetchMessages({ id: 1,
// limit: chat.unreadCount, session: JSON.stringify(session),
// }); status: "authenticated",
// } });
// } getIO().emit("whats_auth", {
action: "authentication",
session: dbSession,
});
});
wbot.on("auth_failure", async msg => {
console.error("AUTHENTICATION FAILURE", msg);
await Whatsapp.update({ session: "" }, { where: { id: 1 } });
});
wbot.on("ready", async () => {
console.log("READY");
await Whatsapp.update(
{ status: "online", qrcode: "" },
{ where: { id: 1 } }
);
// const chats = await wbot.getChats(); // pega as mensagens nao lidas (recebidas quando o bot estava offline)
// let unreadMessages; // todo > salvar isso no DB pra mostrar no frontend
// for (let chat of chats) {
// if (chat.unreadCount > 0) {
// unreadMessages = await chat.fetchMessages({
// limit: chat.unreadCount,
// });
// }
// }
// console.log(unreadMessages); // console.log(unreadMessages);
wbot.sendPresenceAvailable(); wbot.sendPresenceAvailable();
}); });
return wbot;
return wbot; } catch (err) {
console.log(err);
}
}, },
getWbot: () => { getWbot: () => {

63
backend/controllers/wbotMonitor.js
View File

@@ -1,10 +1,6 @@
const Contact = require("../models/Contact"); const Whatsapp = require("../models/Whatsapp");
const Message = require("../models/Message");
const wbotMessageListener = require("./wbotMessageListener"); const wbotMessageListener = require("./wbotMessageListener");
const path = require("path");
const fs = require("fs");
const { getIO } = require("../socket"); const { getIO } = require("../socket");
const { getWbot, init } = require("./wbot"); const { getWbot, init } = require("./wbot");
@@ -12,32 +8,43 @@ const wbotMonitor = () => {
const io = getIO(); const io = getIO();
const wbot = getWbot(); const wbot = getWbot();
wbot.on("change_state", newState => { try {
console.log("monitor", newState); wbot.on("change_state", newState => {
}); console.log("monitor", newState);
});
wbot.on("change_battery", batteryInfo => { wbot.on("change_battery", async batteryInfo => {
// Battery percentage for attached device has changed // Battery percentage for attached device has changed
const { battery, plugged } = batteryInfo; const { battery, plugged } = batteryInfo;
console.log(`Battery: ${battery}% - Charging? ${plugged}`); try {
}); await Whatsapp.update({ battery, plugged }, { where: { id: 1 } });
} catch (err) {
console.log(err);
}
wbot.on("disconnected", reason => { console.log(`Battery: ${battery}% - Charging? ${plugged}`); //todo> save batery state to db
console.log("disconnected", reason); });
wbot.destroy();
setTimeout(() =>
init()
.then(res => {
wbotMessageListener();
wbotMonitor();
})
.catch(err => console.log(err))
);
});
// setInterval(() => { wbot.on("disconnected", reason => {
// wbot.resetState(); console.log("disconnected", reason); //todo> save connection status to DB
// }, 20000); setTimeout(
() =>
init()
.then(res => {
wbotMessageListener();
wbotMonitor();
})
.catch(err => console.log(err)),
2000
);
});
// setInterval(() => {
// wbot.resetState();
// }, 20000);
} catch (err) {
console.log(err);
}
}; };
module.exports = wbotMonitor; module.exports = wbotMonitor;

4
backend/models/Whatsapp.js
View File

@@ -5,7 +5,9 @@ const sequelize = require("../util/database");
const Whatsapp = sequelize.define("whatsapp", { const Whatsapp = sequelize.define("whatsapp", {
session: { type: Sequelize.TEXT() }, session: { type: Sequelize.TEXT() },
qrcode: { type: Sequelize.TEXT() }, qrcode: { type: Sequelize.TEXT() },
status: { type: Sequelize.STRING(20) }, status: { type: Sequelize.STRING(60) },
battery: { type: Sequelize.STRING(20) },
plugged: { type: Sequelize.BOOLEAN() },
}); });
module.exports = Whatsapp; module.exports = Whatsapp;

24
backend/package-lock.json generated
View File

@@ -31,9 +31,9 @@
"dev": true "dev": true
}, },
"@types/node": { "@types/node": {
"version": "14.0.11", "version": "14.0.13",
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.0.11.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-14.0.13.tgz",
"integrity": "sha512-lCvvI24L21ZVeIiyIUHZ5Oflv1hhHQ5E1S25IRlKIXaRkVgmXpJMI3wUJkmym2bTbCe+WoIibQnMVAU3FguaOg==" "integrity": "sha512-rouEWBImiRaSJsVA+ITTFM6ZxibuAlTuNOCyxVbwreu6k6+ujs7DfnU9o+PShFhET78pMBl3eH+AGSI5eOTkPA=="
}, },
"@types/yauzl": { "@types/yauzl": {
"version": "2.9.1", "version": "2.9.1",
@@ -1046,9 +1046,9 @@
} }
}, },
"extract-zip": { "extract-zip": {
"version": "2.0.0", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.0.tgz", "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
"integrity": "sha512-i42GQ498yibjdvIhivUsRslx608whtGoFIhF26Z7O4MYncBxp8CwalOs1lnHy21A9sIohWO2+uiE4SRtC9JXDg==", "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
"requires": { "requires": {
"@types/yauzl": "^2.9.1", "@types/yauzl": "^2.9.1",
"debug": "^4.1.1", "debug": "^4.1.1",
@@ -2342,9 +2342,9 @@
"integrity": "sha1-1WgS4cAXpuTnw+Ojeh2m143TyT4=" "integrity": "sha1-1WgS4cAXpuTnw+Ojeh2m143TyT4="
}, },
"sequelize": { "sequelize": {
"version": "5.21.12", "version": "5.21.13",
"resolved": "https://registry.npmjs.org/sequelize/-/sequelize-5.21.12.tgz", "resolved": "https://registry.npmjs.org/sequelize/-/sequelize-5.21.13.tgz",
"integrity": "sha512-WRTXLoH72HQnlEUbKI1Iev2yS1/epg72Chz0fHqk0MLn4Wj2pH/TS01lpMDGQqxZPXCxRGrwk1YxwUw2C0yI9A==", "integrity": "sha512-wpwSpxzvADmgPkcOGeer5yFdAVsYeA7NLEw4evSXw03OlGL41J4S8hVz2/nilSWlJSwumlDGC9QbdwAmkWGqJg==",
"requires": { "requires": {
"bluebird": "^3.5.0", "bluebird": "^3.5.0",
"cls-bluebird": "^2.1.0", "cls-bluebird": "^2.1.0",
@@ -2867,9 +2867,9 @@
"integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=" "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
}, },
"whatsapp-web.js": { "whatsapp-web.js": {
"version": "1.6.1", "version": "1.7.0",
"resolved": "https://registry.npmjs.org/whatsapp-web.js/-/whatsapp-web.js-1.6.1.tgz", "resolved": "https://registry.npmjs.org/whatsapp-web.js/-/whatsapp-web.js-1.7.0.tgz",
"integrity": "sha512-pj0JEIuMsWTlqlNr7vRST9XrS+lj/E4i9B7c00FCzUGu6pbPr+95QrYYY56tH5bpCtpsl2NbIB3fbYe3RlxdkA==", "integrity": "sha512-cha7byb+/xWZCB60JW/bSTGaiPgWlA4m37vXjGRkUvMT30/JZyVjQ9W2hazS4dBOtnx3/8DKSnn2AQEEb6Hi5w==",
"requires": { "requires": {
"@pedroslopez/moduleraid": "^4.1.0", "@pedroslopez/moduleraid": "^4.1.0",
"jsqr": "^1.3.1", "jsqr": "^1.3.1",

4
backend/package.json
View File

@@ -23,10 +23,10 @@
"multer": "^1.4.2", "multer": "^1.4.2",
"mysql2": "^2.1.0", "mysql2": "^2.1.0",
"qrcode-terminal": "^0.12.0", "qrcode-terminal": "^0.12.0",
"sequelize": "^5.21.12", "sequelize": "^5.21.13",
"sequelize-cli": "^5.5.1", "sequelize-cli": "^5.5.1",
"socket.io": "^2.3.0", "socket.io": "^2.3.0",
"whatsapp-web.js": "^1.6.1" "whatsapp-web.js": "^1.7.0"
}, },
"devDependencies": { "devDependencies": {
"nodemon": "^2.0.4" "nodemon": "^2.0.4"

15
frontend/package-lock.json generated
View File

@@ -10736,6 +10736,21 @@
"resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz", "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
"integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=" "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc="
}, },
"qr.js": {
"version": "0.0.0",
"resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz",
"integrity": "sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8="
},
"qrcode.react": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-1.0.0.tgz",
"integrity": "sha512-jBXleohRTwvGBe1ngV+62QvEZ/9IZqQivdwzo9pJM4LQMoCM2VnvNBnKdjvGnKyDZ/l0nCDgsPod19RzlPvm/Q==",
"requires": {
"loose-envify": "^1.4.0",
"prop-types": "^15.6.0",
"qr.js": "0.0.0"
}
},
"qs": { "qs": {
"version": "6.5.2", "version": "6.5.2",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz", "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",

1
frontend/package.json
View File

@@ -13,6 +13,7 @@
"emoji-mart": "^3.0.0", "emoji-mart": "^3.0.0",
"moment": "^2.26.0", "moment": "^2.26.0",
"moment-timezone": "^0.5.31", "moment-timezone": "^0.5.31",
"qrcode.react": "^1.0.0",
"react": "^16.13.1", "react": "^16.13.1",
"react-audio-player": "^0.13.0", "react-audio-player": "^0.13.0",
"react-bootstrap": "^1.0.1", "react-bootstrap": "^1.0.1",

2
frontend/src/components/Layout/MainDrawer.js
View File

@@ -181,7 +181,7 @@ const MainDrawer = ({ appTitle, children }) => {
{appTitle} {appTitle}
</Typography> </Typography>
<IconButton color="inherit"> <IconButton color="inherit">
<Badge badgeContent={4} color="secondary"> <Badge badgeContent={0} color="secondary">
<NotificationsIcon /> <NotificationsIcon />
</Badge> </Badge>
</IconButton> </IconButton>

6
frontend/src/components/Layout/MainListItems.js
View File

@@ -12,7 +12,7 @@ import Collapse from "@material-ui/core/Collapse";
import DashboardIcon from "@material-ui/icons/Dashboard"; import DashboardIcon from "@material-ui/icons/Dashboard";
import WhatsAppIcon from "@material-ui/icons/WhatsApp"; import WhatsAppIcon from "@material-ui/icons/WhatsApp";
// import PeopleIcon from "@material-ui/icons/People"; // import PeopleIcon from "@material-ui/icons/People";
import BorderOuterIcon from "@material-ui/icons/BorderOuter"; import SyncAltIcon from "@material-ui/icons/SyncAlt";
import ChatIcon from "@material-ui/icons/Chat"; import ChatIcon from "@material-ui/icons/Chat";
import BarChartIcon from "@material-ui/icons/BarChart"; import BarChartIcon from "@material-ui/icons/BarChart";
import LayersIcon from "@material-ui/icons/Layers"; import LayersIcon from "@material-ui/icons/Layers";
@@ -71,8 +71,8 @@ const MainListItems = () => {
<ListItemLink <ListItemLink
className={classes.nested} className={classes.nested}
to="/whats-auth" to="/whats-auth"
primary="Autenticação" primary="Conexão"
icon={<BorderOuterIcon />} icon={<SyncAltIcon />}
/> />
<ListItemLink <ListItemLink
className={classes.nested} className={classes.nested}

14
frontend/src/pages/Chat/Chat.js
View File

@@ -1,4 +1,5 @@
import React, { useState } from "react"; import React from "react";
import { useParams } from "react-router-dom";
import Grid from "@material-ui/core/Grid"; import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper"; import Paper from "@material-ui/core/Paper";
import { makeStyles } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
@@ -47,7 +48,7 @@ const useStyles = makeStyles(theme => ({
const Chat = () => { const Chat = () => {
const classes = useStyles(); const classes = useStyles();
const [selectedContact, setSelectedContact] = useState(null); const { contactId } = useParams();
return ( return (
<div> <div>
@@ -56,15 +57,12 @@ const Chat = () => {
<Paper square className={classes.chatPapper}> <Paper square className={classes.chatPapper}>
<Grid container spacing={0}> <Grid container spacing={0}>
<Grid item xs={4} className={classes.contactsWrapper}> <Grid item xs={4} className={classes.contactsWrapper}>
<ContactsList <ContactsList />
selectedContact={selectedContact}
setSelectedContact={setSelectedContact}
/>
</Grid> </Grid>
<Grid item xs={8} className={classes.messagessWrapper}> <Grid item xs={8} className={classes.messagessWrapper}>
{selectedContact ? ( {contactId ? (
<> <>
<MessagesList selectedContact={selectedContact} /> <MessagesList />
</> </>
) : ( ) : (
<Paper <Paper

155
frontend/src/pages/Chat/components/ContactsList/ContactsList.js
View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { useHistory } from "react-router-dom"; import { useHistory, useParams } from "react-router-dom";
import api from "../../../../util/api"; import api from "../../../../util/api";
import openSocket from "socket.io-client"; import openSocket from "socket.io-client";
import moment from "moment-timezone"; import moment from "moment-timezone";
@@ -8,6 +8,7 @@ import profileDefaultPic from "../../../../Images/profile_default.png";
import { makeStyles } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
import { green } from "@material-ui/core/colors"; import { green } from "@material-ui/core/colors";
import CircularProgress from "@material-ui/core/CircularProgress";
import Paper from "@material-ui/core/Paper"; import Paper from "@material-ui/core/Paper";
import List from "@material-ui/core/List"; import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem"; import ListItem from "@material-ui/core/ListItem";
@@ -45,6 +46,7 @@ const useStyles = makeStyles(theme => ({
}, },
contactsList: { contactsList: {
position: "relative",
borderTopLeftRadius: 0, borderTopLeftRadius: 0,
borderTopRightRadius: 0, borderTopRightRadius: 0,
borderBottomRightRadius: 0, borderBottomRightRadius: 0,
@@ -59,6 +61,7 @@ const useStyles = makeStyles(theme => ({
}, },
}, },
contactsSearchBox: { contactsSearchBox: {
position: "relative",
background: "#fafafa", background: "#fafafa",
padding: "10px 13px", padding: "10px 13px",
}, },
@@ -106,14 +109,24 @@ const useStyles = makeStyles(theme => ({
color: "white", color: "white",
backgroundColor: green[500], backgroundColor: green[500],
}, },
circleLoading: {
color: green[500],
opacity: "70%",
position: "absolute",
top: 0,
left: "50%",
marginTop: 12,
// marginLeft: -12,
},
})); }));
const ContactsList = ({ selectedContact, setSelectedContact }) => { const ContactsList = () => {
const classes = useStyles(); const classes = useStyles();
const token = localStorage.getItem("token"); const token = localStorage.getItem("token");
const { contactId } = useParams();
const [contacts, setContacts] = useState([]); const [contacts, setContacts] = useState([]);
const [displayedContacts, setDisplayedContacts] = useState([]); const [loading, setLoading] = useState();
const [searchParam, setSearchParam] = useState("");
const history = useHistory(); const history = useHistory();
@@ -126,21 +139,23 @@ const ContactsList = ({ selectedContact, setSelectedContact }) => {
}, []); }, []);
useEffect(() => { useEffect(() => {
const fetchContacts = async () => { setLoading(true);
try { const delayDebounceFn = setTimeout(() => {
const res = await api.get("/contacts"); const fetchContacts = async () => {
setContacts(res.data); try {
setDisplayedContacts(res.data); const res = await api.get("/contacts", {
} catch (err) { params: { searchParam },
if (err) { });
setContacts(res.data);
setLoading(false);
} catch (err) {
console.log(err); console.log(err);
alert(err);
} }
console.log(err); };
} fetchContacts();
}; }, 1000);
fetchContacts(); return () => clearTimeout(delayDebounceFn);
}, [token, history]); }, [searchParam, token]);
useEffect(() => { useEffect(() => {
const socket = openSocket("http://localhost:8080"); const socket = openSocket("http://localhost:8080");
@@ -154,60 +169,54 @@ const ContactsList = ({ selectedContact, setSelectedContact }) => {
}); });
socket.on("appMessage", data => { socket.on("appMessage", data => {
if ( if (data.action === "create") {
selectedContact && updateUnreadMessagesCount(data);
data.message.contactId === selectedContact.id && if (
document.visibilityState === "visible" contactId &&
) { data.message.contactId === +contactId &&
return; document.visibilityState === "visible"
)
return;
showDesktopNotification(data);
} }
let contactImageUrl = profileDefaultPic;
let contactName = "Novo Contato";
const contactIndex = contacts.findIndex(
contact => contact.id === data.message.contactId
);
if (contactIndex !== -1) {
contactImageUrl = contacts[contactIndex].imageURL;
contactName = contacts[contactIndex].name;
setDisplayedContacts(prevState => {
let aux = [...prevState];
aux.unshift(aux.splice(contactIndex, 1)[0]);
return aux;
});
setContacts(prevState => {
let aux = [...prevState];
aux[contactIndex].unreadMessages++;
aux.unshift(aux.splice(contactIndex, 1)[0]);
return aux;
});
} else {
setContacts(prevState => [data.contact, ...prevState]);
setDisplayedContacts(prevState => [data.contact, ...prevState]);
}
showNotification(data, contactName, contactImageUrl);
}); });
return () => { return () => {
socket.disconnect(); socket.disconnect();
}; };
}, [selectedContact, contacts]); }, [contactId]);
const showNotification = (data, contactName, contactImageUrl) => { const updateUnreadMessagesCount = data => {
setContacts(prevState => {
const contactIndex = prevState.findIndex(
contact => contact.id === data.message.contactId
);
if (contactIndex !== -1) {
let aux = [...prevState];
aux[contactIndex].unreadMessages++;
aux[contactIndex].lastMessage = data.message.messageBody;
aux.unshift(aux.splice(contactIndex, 1)[0]);
return aux;
} else {
return [data.contact, ...prevState];
}
});
};
const showDesktopNotification = data => {
const options = { const options = {
body: `${data.message.messageBody} - ${moment(new Date()) body: `${data.message.messageBody} - ${moment(new Date())
.tz("America/Sao_Paulo") .tz("America/Sao_Paulo")
.format("DD/MM/YY - HH:mm")}`, .format("DD/MM/YY - HH:mm")}`,
icon: contactImageUrl, icon: data.contact.imageURL,
}; };
new Notification(`Mensagem de ${contactName}`, options); new Notification(`Mensagem de ${data.contact.name}`, options);
document.getElementById("sound").play(); document.getElementById("sound").play();
}; };
const resetUnreadMessages = contactId => { const resetUnreadMessages = contactId => {
setDisplayedContacts(prevState => { setContacts(prevState => {
let aux = [...prevState]; let aux = [...prevState];
let contactIndex = aux.findIndex(contact => contact.id === +contactId); let contactIndex = aux.findIndex(contact => contact.id === +contactId);
aux[contactIndex].unreadMessages = 0; aux[contactIndex].unreadMessages = 0;
@@ -217,17 +226,12 @@ const ContactsList = ({ selectedContact, setSelectedContact }) => {
}; };
const handleSelectContact = (e, contact) => { const handleSelectContact = (e, contact) => {
setSelectedContact(contact); history.push(`/chat/${contact.id}`);
}; };
const handleSearchContact = e => { const handleSearchContact = e => {
let searchTerm = e.target.value.toLowerCase(); // let searchTerm = e.target.value.toLowerCase();
setSearchParam(e.target.value.toLowerCase());
setDisplayedContacts(
contacts.filter(contact =>
contact.name.toLowerCase().includes(searchTerm)
)
);
}; };
return ( return (
@@ -246,12 +250,12 @@ const ContactsList = ({ selectedContact, setSelectedContact }) => {
</Paper> </Paper>
<Paper variant="outlined" className={classes.contactsList}> <Paper variant="outlined" className={classes.contactsList}>
<List> <List>
{displayedContacts.map((contact, index) => ( {contacts.map((contact, index) => (
<React.Fragment key={contact.id}> <React.Fragment key={contact.id}>
<ListItem <ListItem
button button
onClick={e => handleSelectContact(e, contact)} onClick={e => handleSelectContact(e, contact)}
selected={selectedContact && selectedContact.id === contact.id} selected={contactId && +contactId === contact.id}
> >
<ListItemAvatar> <ListItemAvatar>
<Avatar <Avatar
@@ -296,15 +300,13 @@ const ContactsList = ({ selectedContact, setSelectedContact }) => {
> >
{contact.lastMessage || <br />} {contact.lastMessage || <br />}
</Typography> </Typography>
{contact.unreadMessages > 0 && ( <Badge
<Badge className={classes.newMessagesCount}
className={classes.newMessagesCount} badgeContent={contact.unreadMessages}
badgeContent={contact.unreadMessages} classes={{
classes={{ badge: classes.badgeStyle,
badge: classes.badgeStyle, }}
}} />
/>
)}
</span> </span>
} }
/> />
@@ -313,6 +315,11 @@ const ContactsList = ({ selectedContact, setSelectedContact }) => {
</React.Fragment> </React.Fragment>
))} ))}
</List> </List>
{loading ? (
<div>
<CircularProgress className={classes.circleLoading} />
</div>
) : null}
</Paper> </Paper>
<audio id="sound" preload="auto"> <audio id="sound" preload="auto">
<source src={require("../../../../util/sound.mp3")} type="audio/mpeg" /> <source src={require("../../../../util/sound.mp3")} type="audio/mpeg" />

8
frontend/src/pages/Chat/components/MessagesInput/MessagesInput.js
View File

@@ -1,4 +1,5 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import api from "../../../../util/api"; import api from "../../../../util/api";
import "emoji-mart/css/emoji-mart.css"; import "emoji-mart/css/emoji-mart.css";
import { Picker } from "emoji-mart"; import { Picker } from "emoji-mart";
@@ -63,6 +64,7 @@ const useStyles = makeStyles(theme => ({
circleLoading: { circleLoading: {
color: green[500], color: green[500],
opacity: "70%",
position: "absolute", position: "absolute",
top: "20%", top: "20%",
left: "50%", left: "50%",
@@ -72,9 +74,9 @@ const useStyles = makeStyles(theme => ({
}, },
})); }));
const MessagesInput = ({ selectedContact, searchParam }) => { const MessagesInput = ({ searchParam }) => {
const classes = useStyles(); const classes = useStyles();
const contactId = selectedContact.id; const { contactId } = useParams();
const userId = localStorage.getItem("userId"); const userId = localStorage.getItem("userId");
const username = localStorage.getItem("username"); const username = localStorage.getItem("username");
@@ -90,7 +92,7 @@ const MessagesInput = ({ selectedContact, searchParam }) => {
setShowEmoji(false); setShowEmoji(false);
setMedia({}); setMedia({});
}; };
}, [selectedContact]); }, [contactId]);
const handleChangeInput = e => { const handleChangeInput = e => {
setInputMessage(e.target.value); setInputMessage(e.target.value);

39
frontend/src/pages/Chat/components/MessagesList/MessagesList.js
View File

@@ -1,4 +1,5 @@
import React, { useState, useEffect, useRef } from "react"; import React, { useState, useEffect, useRef } from "react";
import { useParams } from "react-router-dom";
import { makeStyles } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
import AccessTimeIcon from "@material-ui/icons/AccessTime"; import AccessTimeIcon from "@material-ui/icons/AccessTime";
@@ -92,6 +93,7 @@ const useStyles = makeStyles(theme => ({
circleLoading: { circleLoading: {
color: green[500], color: green[500],
position: "absolute", position: "absolute",
opacity: "70%",
top: 0, top: 0,
left: "50%", left: "50%",
marginTop: 12, marginTop: 12,
@@ -193,13 +195,14 @@ const useStyles = makeStyles(theme => ({
}, },
})); }));
const MessagesList = ({ selectedContact }) => { const MessagesList = () => {
const contactId = selectedContact.id; const { contactId } = useParams();
const classes = useStyles(); const classes = useStyles();
const token = localStorage.getItem("token"); const token = localStorage.getItem("token");
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [contact, setContact] = useState({});
const [messagesList, setMessagesList] = useState([]); const [messagesList, setMessagesList] = useState([]);
const [hasMore, setHasMore] = useState(false); const [hasMore, setHasMore] = useState(false);
const [searchParam, setSearchParam] = useState(""); const [searchParam, setSearchParam] = useState("");
@@ -213,12 +216,12 @@ const MessagesList = ({ selectedContact }) => {
useEffect(() => { useEffect(() => {
setLoading(true); setLoading(true);
const delayDebounceFn = setTimeout(() => { const delayDebounceFn = setTimeout(() => {
console.log(searchParam);
const fetchMessages = async () => { const fetchMessages = async () => {
try { try {
const res = await api.get("/messages/" + contactId, { const res = await api.get("/messages/" + contactId, {
params: { searchParam, pageNumber }, params: { searchParam, pageNumber },
}); });
setContact(res.data.contact);
setMessagesList(prevMessages => { setMessagesList(prevMessages => {
return [...res.data.messages, ...prevMessages]; return [...res.data.messages, ...prevMessages];
}); });
@@ -444,13 +447,24 @@ const MessagesList = ({ selectedContact }) => {
return ( return (
<div className={classes.mainWrapper}> <div className={classes.mainWrapper}>
<Card variant="outlined" square className={classes.messagesHeader}> <Card variant="outlined" square className={classes.messagesHeader}>
<CardHeader {!loading ? (
titleTypographyProps={{ noWrap: true }} <CardHeader
subheaderTypographyProps={{ noWrap: true }} titleTypographyProps={{ noWrap: true }}
avatar={<Avatar alt="contact_name" src={selectedContact.imageURL} />} subheaderTypographyProps={{ noWrap: true }}
title={selectedContact.name} avatar={<Avatar alt="contact_image" src={contact.imageURL} />}
subheader="Contacts Status" title={contact.name}
/> subheader="Contact Status"
/>
) : (
<CardHeader
titleTypographyProps={{ noWrap: true }}
subheaderTypographyProps={{ noWrap: true }}
avatar={<Avatar alt="contact_image" />}
title=""
subheader=""
/>
)}
<div className={classes.messagesSearchInputWrapper}> <div className={classes.messagesSearchInputWrapper}>
<SearchIcon className={classes.searchIcon} /> <SearchIcon className={classes.searchIcon} />
<InputBase <InputBase
@@ -477,10 +491,7 @@ const MessagesList = ({ selectedContact }) => {
> >
{messagesList.length > 0 ? renderMessages() : []} {messagesList.length > 0 ? renderMessages() : []}
</InfiniteScrollReverse> </InfiniteScrollReverse>
<MessagesInput <MessagesInput searchParam={searchParam} />
selectedContact={selectedContact}
searchParam={searchParam}
/>
{loading ? ( {loading ? (
<div> <div>
<CircularProgress className={classes.circleLoading} /> <CircularProgress className={classes.circleLoading} />

72
frontend/src/pages/WhatsAuth/WhatsAuth.js
View File

@@ -1,12 +1,17 @@
import React from "react"; import React, { useState, useEffect } from "react";
import { useHistory } from "react-router-dom";
import api from "../../util/api";
import clsx from "clsx"; import clsx from "clsx";
import MainDrawer from "../../components/Layout/MainDrawer"; import MainDrawer from "../../components/Layout/MainDrawer";
import openSocket from "socket.io-client";
import { makeStyles } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
import Container from "@material-ui/core/Container"; import Container from "@material-ui/core/Container";
import Grid from "@material-ui/core/Grid"; import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper"; import Paper from "@material-ui/core/Paper";
import Bateryinfo from "./components/Bateryinfo";
import Qrcode from "./components/Qrcode";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(theme => ({
root: { root: {
@@ -41,6 +46,47 @@ const useStyles = makeStyles(theme => ({
const WhatsAuth = () => { const WhatsAuth = () => {
const classes = useStyles(); const classes = useStyles();
const history = useHistory();
const [qrCode, setQrCode] = useState("");
const [session, setSession] = useState({});
useEffect(() => {
const fetchSession = async () => {
try {
const res = await api.get("/whatsapp/session");
setQrCode(res.data.qrcode);
setSession(res.data);
} catch (err) {
console.log(err);
}
};
fetchSession();
}, []);
useEffect(() => {
const socket = openSocket("http://localhost:8080");
socket.on("qrcode", data => {
if (data.action === "update") {
setQrCode(data.qr);
}
});
socket.on("whats_auth", data => {
if (data.action === "authentication") {
history.push("/chat");
setQrCode("");
setSession(data.session);
}
});
return () => {
socket.disconnect();
};
}, []);
console.log(session);
const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight); const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight);
@@ -52,16 +98,20 @@ const WhatsAuth = () => {
<div className={classes.appBarSpacer} /> <div className={classes.appBarSpacer} />
<Container maxWidth="lg" className={classes.container}> <Container maxWidth="lg" className={classes.container}>
<Grid container spacing={3}> <Grid container spacing={3}>
<Grid item xs={12}> {session.status === "pending" ? (
<Paper className={classes.paper}> <Grid item xs={6}>
<h4>Status da conexão</h4> <Paper className={classes.paper}>
</Paper> <Qrcode qrCode={qrCode} />
</Grid> </Paper>
<Grid item xs={12}> </Grid>
<Paper className={fixedHeightPaper}> ) : (
<h1>QR Code</h1> <Grid item xs={6}>
</Paper> <Paper className={classes.paper}>
</Grid> <Bateryinfo sessio={session} />
</Paper>
</Grid>
)}
{/* <Grid item xs={12} md={4} lg={3}> {/* <Grid item xs={12} md={4} lg={3}>
<Paper className={fixedHeightPaper}> <Paper className={fixedHeightPaper}>
<h1>paper2</h1> <h1>paper2</h1>

34
frontend/src/pages/WhatsAuth/components/Bateryinfo.js Normal file
View File

@@ -0,0 +1,34 @@
import React from "react";
import Link from "@material-ui/core/Link";
import { makeStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
const useStyles = makeStyles({
main: {
flex: 1,
},
});
const Bateryinfo = ({ session }) => {
const classes = useStyles();
return (
<React.Fragment>
<Typography component="h2" variant="h6" color="primary" gutterBottom>
Bateria
</Typography>
<Typography component="p" variant="h6">
{(session && session.baterry) || "Não disponível"}
</Typography>
<Typography color="textSecondary" className={classes.main}>
Carregando: {(session && session.plugged) || "Não disponível"}
</Typography>
<div>
<Link color="primary" href="#">
Verificar bateria
</Link>
</div>
</React.Fragment>
);
};
export default Bateryinfo;

25
frontend/src/pages/WhatsAuth/components/Qrcode.js Normal file
View File

@@ -0,0 +1,25 @@
import React from "react";
import QRCode from "qrcode.react";
import { makeStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
const useStyles = makeStyles({
main: {
flex: 1,
},
});
const Qrcode = ({ qrCode }) => {
const classes = useStyles();
return (
<div>
<Typography component="h2" variant="h6" color="primary" gutterBottom>
Leia o QrCode para iniciar a sessão
</Typography>
<QRCode value={qrCode} size={256} />
</div>
);
};
export default Qrcode;

1
frontend/src/routes.js
View File

@@ -57,6 +57,7 @@ const Routes = () => {
<Switch> <Switch>
<PrivateRoute exact path="/" component={Dashboard} /> <PrivateRoute exact path="/" component={Dashboard} />
<PrivateRoute exact path="/chat" component={Chat} /> <PrivateRoute exact path="/chat" component={Chat} />
<PrivateRoute exact path="/chat/:contactId" component={Chat} />
<PrivateRoute exact path="/profile" component={Profile} /> <PrivateRoute exact path="/profile" component={Profile} />
<PrivateRoute exact path="/whats-auth" component={WhatsAuth} /> <PrivateRoute exact path="/whats-auth" component={WhatsAuth} />
<PublicRoute exact path="/login" component={Login} /> <PublicRoute exact path="/login" component={Login} />