Feat: Added import contacts function on frontend

backend/src/controllers/ContactController copy.js

@@ -1,67 +0,0 @@
-const Contact = require("../models/Contact");
-const Message = require("../models/Message");
-const Sequelize = require("sequelize");
-const { getIO } = require("../libs/socket");
-const { getWbot } = require("../libs/wbot");
-
-exports.index = 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
-
-	const contacts = await Contact.findAll({
-		where: whereCondition,
-		attributes: {
-			include: [
-				[
-					Sequelize.literal(`(
-			        SELECT COUNT(*)
-			        FROM messages AS message
-			        WHERE
-			            message.contactId = contact.id
-			            AND
-			            message.read = 0
-
-			    )`),
-					"unreadMessages",
-				],
-			],
-		},
-		order: [["updatedAt", "DESC"]],
-	});
-
-	return res.json(contacts);
-};
-
-exports.store = async (req, res) => {
-	const wbot = getWbot();
-	const io = getIO();
-	const { number, name } = req.body;
-
-	const result = await wbot.isRegisteredUser(`55${number}@c.us`);
-
-	if (!result) {
-		return res
-			.status(400)
-			.json({ error: "The suplied number is not a valid Whatsapp number" });
-	}
-	const profilePicUrl = await wbot.getProfilePicUrl(`55${number}@c.us`);
-
-	const contact = await Contact.create({
-		name,
-		number: `55${number}`,
-		profilePicUrl,
-	});
-
-	res.status(200).json(contact);
-};

backend/src/controllers/ContactController.js

@@ -1,29 +1,31 @@
 const Sequelize = require("sequelize");
+const { Op } = require("sequelize");
 
 const Contact = require("../models/Contact");
 const ContactCustomField = require("../models/ContactCustomField");
 
-// const Message = require("../models/Message");
-// const Sequelize = require("sequelize");
 const { getIO } = require("../libs/socket");
-// const { getWbot } = require("../libs/wbot");
+const { getWbot } = require("../libs/wbot");
 
 exports.index = async (req, res) => {
 	const { searchParam = "", pageNumber = 1, rowsPerPage = 10 } = req.query;
 
 	const whereCondition = {
-		name: Sequelize.where(
-			Sequelize.fn("LOWER", Sequelize.col("name")),
-			"LIKE",
-			"%" + searchParam.toLowerCase() + "%"
-		),
+		[Op.or]: [
+			{
+				name: Sequelize.where(
+					Sequelize.fn("LOWER", Sequelize.col("name")),
+					"LIKE",
+					"%" + searchParam.toLowerCase() + "%"
+				),
+			},
+			{ number: { [Op.like]: `%${searchParam}%` } },
+		],
 	};
 
 	let limit = +rowsPerPage;
 	let offset = limit * (pageNumber - 1);
 
-	//todo >> add contact number to search where condition
-
 	const { count, rows: contacts } = await Contact.findAndCountAll({
 		where: whereCondition,
 		limit,
@@ -35,22 +37,27 @@ exports.index = async (req, res) => {
 };
 
 exports.store = async (req, res) => {
-	// const wbot = getWbot();
+	const wbot = getWbot();
 	const io = getIO();
 	const newContact = req.body;
 
-	// const result = await wbot.isRegisteredUser(`55${number}@c.us`);
+	const result = await wbot.isRegisteredUser(`${newContact.number}@c.us`);
 
-	// if (!result) {
-	// 	return res
-	// 		.status(400)
-	// 		.json({ error: "The suplied number is not a valid Whatsapp number" });
-	// }
-	// const profilePicUrl = await wbot.getProfilePicUrl(`55${number}@c.us`);
+	if (!result) {
+		return res
+			.status(400)
+			.json({ error: "The suplied number is not a valid Whatsapp number" });
+	}
+	const profilePicUrl = await wbot.getProfilePicUrl(
+		`${newContact.number}@c.us`
+	);
 
-	const contact = await Contact.create(newContact, {
-		include: "extraInfo",
-	});
+	const contact = await Contact.create(
+		{ ...newContact, profilePicUrl },
+		{
+			include: "extraInfo",
+		}
+	);
 
 	io.emit("contact", {
 		action: "create",

backend/src/controllers/ImportPhoneContactsController.js

@@ -0,0 +1,18 @@
+const Contact = require("../models/Contact");
+const { getIO } = require("../libs/socket");
+const { getWbot, init } = require("../libs/wbot");
+
+exports.store = async (req, res, next) => {
+	const io = getIO();
+	const wbot = getWbot();
+
+	const phoneContacts = await wbot.getContacts();
+
+	await Promise.all(
+		phoneContacts.map(async ({ number, name }) => {
+			await Contact.create({ number, name });
+		})
+	);
+
+	return res.status(200).json({ message: "contacts imported" });
+};

backend/src/models/Contact.js

@@ -5,7 +5,7 @@ class Contact extends Sequelize.Model {
 		super.init(
 			{
 				name: { type: Sequelize.STRING },
-				number: { type: Sequelize.STRING },
+				number: { type: Sequelize.STRING, allowNull: false, unique: true },
 				email: { type: Sequelize.STRING, allowNull: false, defaultValue: "" },
 				profilePicUrl: { type: Sequelize.STRING },
 			},

backend/src/routes/contacts.js

@@ -2,9 +2,12 @@ const express = require("express");
 const isAuth = require("../middleware/is-auth");
 
 const ContactController = require("../controllers/ContactController");
+const ImportPhoneContactsController = require("../controllers/ImportPhoneContactsController");
 
 const routes = express.Router();
 
+routes.post("/contacts/import", isAuth, ImportPhoneContactsController.store);
+
 routes.get("/contacts", isAuth, ContactController.index);
 
 routes.get("/contacts/:contactId", isAuth, ContactController.show);

backend/src/services/wbotMessageListener.js

@@ -28,7 +28,7 @@ const verifyContact = async (msgContact, profilePicUrl) => {
 };
 
 const verifyTicket = async contact => {
-	const [ticket, created] = await Ticket.findOrCreate({
+	const [ticket] = await Ticket.findOrCreate({
 		where: {
 			status: {
 				[Op.or]: ["open", "pending"],

frontend/src/components/ContactDrawer/index.js

@@ -151,7 +151,7 @@ const ContactDrawer = ({ open, handleDrawerClose, contact, loading }) => {
 					</Paper>
 					<Paper square variant="outlined" className={classes.contactDetails}>
 						<ContactModal
-							modalOpen={modalOpen}
+							open={modalOpen}
 							onClose={e => setModalOpen(false)}
 							aria-labelledby="form-dialog-title"
 							contactId={contact.id}

frontend/src/components/ContactModal/index.js

@@ -52,19 +52,13 @@ const useStyles = makeStyles(theme => ({
 	},
 }));
 
-const ContactModal = ({ modalOpen, onClose, contactId }) => {
+const ContactModal = ({ open, onClose, contactId }) => {
 	const classes = useStyles();
 
 	const initialState = {
 		name: "",
 		number: "",
 		email: "",
-		extraInfo: [
-			{
-				name: "",
-				value: "",
-			},
-		],
 	};
 
 	const [contact, setContact] = useState(initialState);
@@ -77,7 +71,7 @@ const ContactModal = ({ modalOpen, onClose, contactId }) => {
 		};
 
 		fetchContact();
-	}, [contactId, modalOpen]);
+	}, [contactId, open]);
 
 	const handleClose = () => {
 		onClose();
@@ -100,7 +94,7 @@ const ContactModal = ({ modalOpen, onClose, contactId }) => {
 	return (
 		<div className={classes.root}>
 			<Dialog
-				open={modalOpen}
+				open={open}
 				onClose={handleClose}
 				maxWidth="lg"
 				scroll="paper"
@@ -125,7 +119,7 @@ const ContactModal = ({ modalOpen, onClose, contactId }) => {
 						handleSubmit,
 						isSubmitting,
 					}) => (
-						<>
+						<form onSubmit={handleSubmit}>
 							<DialogTitle id="form-dialog-title">
 								{contactId ? "Editar contato" : "Adicionar contato"}
 							</DialogTitle>
@@ -148,7 +142,7 @@ const ContactModal = ({ modalOpen, onClose, contactId }) => {
 									name="number"
 									value={values.number || ""}
 									onChange={handleChange}
-									placeholder="Ex: 13912344321"
+									placeholder="Ex: 5513912344321"
 									variant="outlined"
 									margin="dense"
 									required
@@ -234,7 +228,7 @@ const ContactModal = ({ modalOpen, onClose, contactId }) => {
 									Cancelar
 								</Button>
 								<Button
-									onClick={handleSubmit}
+									type="submit"
 									color="primary"
 									disabled={isSubmitting}
 									variant="contained"
@@ -249,7 +243,7 @@ const ContactModal = ({ modalOpen, onClose, contactId }) => {
 									)}
 								</Button>
 							</DialogActions>
-						</>
+						</form>
 					)}
 				</Formik>
 			</Dialog>

frontend/src/components/NewTicketModal/index.js

@@ -9,7 +9,6 @@ import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import Autocomplete from "@material-ui/lab/Autocomplete";
 import CircularProgress from "@material-ui/core/CircularProgress";
-import FormControl from "@material-ui/core/FormControl";
 import { green } from "@material-ui/core/colors";
 
 import { makeStyles } from "@material-ui/core/styles";
@@ -43,25 +42,33 @@ const NewTicketModal = ({ modalOpen, onClose, contactId }) => {
 
 	const [options, setOptions] = useState([]);
 	const [loading, setLoading] = useState(false);
+	const [searchParam, setSearchParam] = useState("");
 	const [selectedContact, setSelectedContact] = useState(null);
 
 	useEffect(() => {
+		if (!modalOpen || searchParam.length < 3) return;
 		setLoading(true);
-		const fetchContacts = async () => {
-			try {
-				const res = await api.get("contacts");
-				setOptions(res.data.contacts);
-			} catch (err) {
-				alert(err);
-			}
-		};
+		const delayDebounceFn = setTimeout(() => {
+			const fetchContacts = async () => {
+				try {
+					const res = await api.get("contacts", {
+						params: { searchParam, rowsPerPage: 20 },
+					});
+					setOptions(res.data.contacts);
+					setLoading(false);
+				} catch (err) {
+					alert(err);
+				}
+			};
 
-		fetchContacts();
-		setLoading(false);
-	}, []);
+			fetchContacts();
+		}, 1000);
+		return () => clearTimeout(delayDebounceFn);
+	}, [searchParam, modalOpen]);
 
 	const handleClose = () => {
 		onClose();
+		setSearchParam("");
 		setSelectedContact(null);
 	};
 
@@ -82,6 +89,8 @@ const NewTicketModal = ({ modalOpen, onClose, contactId }) => {
 		handleClose();
 	};
 
+	console.log(options);
+
 	return (
 		<div className={classes.root}>
 			<Dialog
@@ -96,7 +105,7 @@ const NewTicketModal = ({ modalOpen, onClose, contactId }) => {
 						<Autocomplete
 							id="asynchronous-demo"
 							style={{ width: 300 }}
-							getOptionLabel={option => option.name}
+							getOptionLabel={option => `${option.name} - ${option.number}`}
 							onChange={(e, newValue) => {
 								setSelectedContact(newValue);
 							}}
@@ -105,9 +114,11 @@ const NewTicketModal = ({ modalOpen, onClose, contactId }) => {
 							renderInput={params => (
 								<TextField
 									{...params}
-									label="Selecione o contato"
+									label="Digite para pesquisar o contato"
 									variant="outlined"
 									required
+									autoFocus
+									onChange={e => setSearchParam(e.target.value)}
 									id="my-input"
 									InputProps={{
 										...params.InputProps,

frontend/src/components/TicketsList/index.js

@@ -211,8 +211,7 @@ const TicketsList = () => {
 	const [loading, setLoading] = useState();
 	const [searchParam, setSearchParam] = useState("");
 	const [tab, setTab] = useState("open");
-
-	const [newTicketModalOpen, setNewTicketModalOpen] = useState(true);
+	const [newTicketModalOpen, setNewTicketModalOpen] = useState(false);
 
 	useEffect(() => {
 		if (!("Notification" in window)) {

frontend/src/pages/Contacts/index.js

@@ -70,9 +70,6 @@ const useStyles = makeStyles(theme => ({
 const Contacts = () => {
 	const classes = useStyles();
 
-	const token = localStorage.getItem("token");
-	// const userId = localStorage.getItem("userId");
-
 	const [loading, setLoading] = useState(true);
 	const [page, setPage] = useState(0);
 	const [rowsPerPage, setRowsPerPage] = useState(10);
@@ -80,9 +77,7 @@ const Contacts = () => {
 	const [searchParam, setSearchParam] = useState("");
 	const [contacts, setContacts] = useState([]);
 	const [selectedContactId, setSelectedContactId] = useState(null);
-
-	const [modalOpen, setModalOpen] = useState(false);
-
+	const [contactModalOpen, setContactModalOpen] = useState(false);
 	const [deletingContact, setDeletingContact] = useState(null);
 	const [confirmOpen, setConfirmOpen] = useState(false);
 
@@ -105,7 +100,7 @@ const Contacts = () => {
 			fetchContacts();
 		}, 1000);
 		return () => clearTimeout(delayDebounceFn);
-	}, [searchParam, page, token, rowsPerPage]);
+	}, [searchParam, page, rowsPerPage]);
 
 	useEffect(() => {
 		const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
@@ -163,19 +158,19 @@ const Contacts = () => {
 		setSearchParam(event.target.value.toLowerCase());
 	};
 
-	const handleClickOpen = () => {
+	const handleOpenContactModal = () => {
 		setSelectedContactId(null);
-		setModalOpen(true);
+		setContactModalOpen(true);
 	};
 
-	const handleClose = () => {
+	const handleCloseContactModal = () => {
 		setSelectedContactId(null);
-		setModalOpen(false);
+		setContactModalOpen(false);
 	};
 
 	const hadleEditContact = contactId => {
 		setSelectedContactId(contactId);
-		setModalOpen(true);
+		setContactModalOpen(true);
 	};
 
 	const handleDeleteContact = async contactId => {
@@ -185,24 +180,43 @@ const Contacts = () => {
 			alert(err);
 		}
 		setDeletingContact(null);
+		setSearchParam("");
+		setPage(0);
+	};
+
+	const handleimportContact = async () => {
+		try {
+			await api.post("/contacts/import");
+		} catch (err) {
+			console.log(err);
+		}
 	};
 
 	return (
 		<Container className={classes.mainContainer}>
 			<ContactModal
-				modalOpen={modalOpen}
-				onClose={handleClose}
+				open={contactModalOpen}
+				onClose={handleCloseContactModal}
 				aria-labelledby="form-dialog-title"
 				contactId={selectedContactId}
 			></ContactModal>
 			<ConfirmationModal
-				title={deletingContact && `Deletar ${deletingContact.name}`}
+				title={
+					deletingContact
+						? `Deletar ${deletingContact.name}?`
+						: `Importar contatos`
+				}
 				open={confirmOpen}
 				setOpen={setConfirmOpen}
-				onConfirm={e => handleDeleteContact(deletingContact.id)}
+				onConfirm={e =>
+					deletingContact
+						? handleDeleteContact(deletingContact.id)
+						: handleimportContact()
+				}
 			>
-				Tem certeza que deseja deletar este contato? Todos os tickets
-				relacionados serão perdidos.
+				{deletingContact
+					? "Tem certeza que deseja deletar este contato? Todos os tickets relacionados serão perdidos."
+					: "Deseja importas todos os contatos do telefone? Essa função é experimental, você terá que recarregar a página após a importação "}
 			</ConfirmationModal>
 			<div className={classes.contactsHeader}>
 				<Typography variant="h5" gutterBottom>
@@ -223,10 +237,18 @@ const Contacts = () => {
 							),
 						}}
 					/>
-					<Button variant="contained" color="primary">
+					<Button
+						variant="contained"
+						color="primary"
+						onClick={e => setConfirmOpen(true)}
+					>
 						Importar contatos
 					</Button>
-					<Button variant="contained" color="primary" onClick={handleClickOpen}>
+					<Button
+						variant="contained"
+						color="primary"
+						onClick={handleOpenContactModal}
+					>
 						Adicionar contato
 					</Button>
 				</div>
@@ -237,7 +259,7 @@ const Contacts = () => {
 						<TableRow>
 							<TableCell padding="checkbox" />
 							<TableCell>Nome</TableCell>
-							<TableCell>Telefone</TableCell>
+							<TableCell>Whatsapp</TableCell>
 							<TableCell>Email</TableCell>
 							<TableCell align="right">Ações</TableCell>
 						</TableRow>