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

fix: warning of memory leak in cotact modal

Browse Source
This commit is contained in:
canove
2020-10-17 13:14:00 -03:00
parent a523e244f8
commit 68c43a5020
3 changed files with 32 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/components/ContactDrawer/index.js
View File

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

5
frontend/src/components/ContactDrawerSkeleton/index.js
View File

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

13
frontend/src/components/ContactModal/index.js
View File

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