Feat: Added import contacts function on frontend

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>