fix: warning of memory leak in cotact modal

frontend/src/components/ContactDrawer/index.js

@@ -127,7 +127,7 @@ const ContactDrawer = ({ open, handleDrawerClose, contact, loading }) => {
 						<Button
 							variant="outlined"
 							color="primary"
-							onClick={e => setModalOpen(true)}
+							onClick={() => setModalOpen(true)}
 						>
 							{i18n.t("contactDrawer.buttons.edit")}
 						</Button>
@@ -135,30 +135,27 @@ const ContactDrawer = ({ open, handleDrawerClose, contact, loading }) => {
 					<Paper square variant="outlined" className={classes.contactDetails}>
 						<ContactModal
 							open={modalOpen}
-							onClose={e => setModalOpen(false)}
-							aria-labelledby="form-dialog-title"
+							onClose={() => setModalOpen(false)}
 							contactId={contact.id}
 						></ContactModal>
 						<Typography variant="subtitle1">
 							{i18n.t("contactDrawer.extraInfo")}
 						</Typography>
-						{contact &&
-							contact.extraInfo &&
-							contact.extraInfo.map(info => (
-								<Paper
-									key={info.id}
-									square
-									variant="outlined"
-									className={classes.contactExtraInfo}
-								>
-									<InputLabel>{info.name}</InputLabel>
-									<LinkifyWithTargetBlank>
-										<Typography noWrap style={{ paddingTop: 2 }}>
-											{info.value}
-										</Typography>
-									</LinkifyWithTargetBlank>
-								</Paper>
-							))}
+						{contact?.extraInfo?.map(info => (
+							<Paper
+								key={info.id}
+								square
+								variant="outlined"
+								className={classes.contactExtraInfo}
+							>
+								<InputLabel>{info.name}</InputLabel>
+								<LinkifyWithTargetBlank>
+									<Typography noWrap style={{ paddingTop: 2 }}>
+										{info.value}
+									</Typography>
+								</LinkifyWithTargetBlank>
+							</Paper>
+						))}
 					</Paper>
 				</div>
 			)}

frontend/src/components/ContactDrawerSkeleton/index.js

@@ -2,6 +2,7 @@ import React from "react";
 import Skeleton from "@material-ui/lab/Skeleton";
 import Typography from "@material-ui/core/Typography";
 import Paper from "@material-ui/core/Paper";
+import { i18n } from "../../translate/i18n";
 
 const ContactDrawerSkeleton = ({ classes }) => {
 	return (
@@ -19,7 +20,9 @@ const ContactDrawerSkeleton = ({ classes }) => {
 				<Skeleton animation="wave" height={25} width={80} />
 			</Paper>
 			<Paper square className={classes.contactDetails}>
-				<Typography variant="subtitle1">Outras informações</Typography>
+				<Typography variant="subtitle1">
+					{i18n.t("contactDrawer.extraInfo")}
+				</Typography>
 				<Paper square variant="outlined" className={classes.contactExtraInfo}>
 					<Skeleton animation="wave" height={20} width={60} />
 					<Skeleton animation="wave" height={20} width={160} />

frontend/src/components/ContactModal/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 
 import * as Yup from "yup";
 import { Formik, FieldArray, Form, Field } from "formik";
@@ -65,6 +65,7 @@ const ContactSchema = Yup.object().shape({
 
 const ContactModal = ({ open, onClose, contactId }) => {
 	const classes = useStyles();
+	const isMounted = useRef(true);
 
 	const initialState = {
 		name: "",
@@ -74,12 +75,20 @@ const ContactModal = ({ open, onClose, contactId }) => {
 
 	const [contact, setContact] = useState(initialState);
 
+	useEffect(() => {
+		return () => {
+			isMounted.current = false;
+		};
+	}, []);
+
 	useEffect(() => {
 		const fetchContact = async () => {
 			if (!contactId) return;
 			try {
 				const { data } = await api.get(`/contacts/${contactId}`);
-				setContact(data);
+				if (isMounted.current) {
+					setContact(data);
+				}
 			} catch (err) {
 				const errorMsg = err.response?.data?.error;
 				if (errorMsg) {