From 68c43a5020dd4011efe001d93dae79d16d08525b Mon Sep 17 00:00:00 2001
From: canove <cassio@economicros.com.br>
Date: Sat, 17 Oct 2020 13:14:00 -0300
Subject: [PATCH] fix: warning of memory leak in cotact modal

---
 .../src/components/ContactDrawer/index.js     | 37 +++++++++----------
 .../components/ContactDrawerSkeleton/index.js |  5 ++-
 frontend/src/components/ContactModal/index.js | 13 ++++++-
 3 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/ContactDrawer/index.js b/frontend/src/components/ContactDrawer/index.js
index da512bf..bb6dc9c 100644
--- a/frontend/src/components/ContactDrawer/index.js
+++ b/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>
 			)}
diff --git a/frontend/src/components/ContactDrawerSkeleton/index.js b/frontend/src/components/ContactDrawerSkeleton/index.js
index 9fcb0c1..481afd5 100644
--- a/frontend/src/components/ContactDrawerSkeleton/index.js
+++ b/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} />
diff --git a/frontend/src/components/ContactModal/index.js b/frontend/src/components/ContactModal/index.js
index acd4dda..5b4264b 100644
--- a/frontend/src/components/ContactModal/index.js
+++ b/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) {