import React, { useState, useEffect, useRef } from "react"; import * as Yup from "yup"; import { Formik, Form, Field } from "formik"; import { toast } from "react-toastify"; import { makeStyles, Button, TextField, Dialog, DialogActions, DialogContent, DialogTitle, CircularProgress, } from "@material-ui/core"; import { green } from "@material-ui/core/colors"; import { i18n } from "../../translate/i18n"; import api from "../../services/api"; import toastError from "../../errors/toastError"; const useStyles = makeStyles((theme) => ({ root: { flexWrap: "wrap", }, textField: { marginRight: theme.spacing(1), width: "100%", }, btnWrapper: { position: "relative", }, buttonProgress: { color: green[500], position: "absolute", top: "50%", left: "50%", marginTop: -12, marginLeft: -12, }, textQuickAnswerContainer: { width: "100%", }, })); const QuickAnswerSchema = Yup.object().shape({ shortcut: Yup.string() .min(2, "Too Short!") .max(15, "Too Long!") .required("Required"), message: Yup.string() .min(8, "Too Short!") .max(30000, "Too Long!") .required("Required"), }); const QuickAnswersModal = ({ open, onClose, quickAnswerId, initialValues, onSave, }) => { const classes = useStyles(); const isMounted = useRef(true); const initialState = { shortcut: "", message: "", }; const [quickAnswer, setQuickAnswer] = useState(initialState); useEffect(() => { return () => { isMounted.current = false; }; }, []); useEffect(() => { const fetchQuickAnswer = async () => { if (initialValues) { setQuickAnswer((prevState) => { return { ...prevState, ...initialValues }; }); } if (!quickAnswerId) return; try { const { data } = await api.get(`/quickAnswers/${quickAnswerId}`); if (isMounted.current) { setQuickAnswer(data); } } catch (err) { toastError(err); } }; fetchQuickAnswer(); }, [quickAnswerId, open, initialValues]); const handleClose = () => { onClose(); setQuickAnswer(initialState); }; const handleSaveQuickAnswer = async (values) => { try { if (quickAnswerId) { await api.put(`/quickAnswers/${quickAnswerId}`, values); handleClose(); } else { const { data } = await api.post("/quickAnswers", values); if (onSave) { onSave(data); } handleClose(); } toast.success(i18n.t("quickAnswersModal.success")); } catch (err) { toastError(err); } }; return (