From dc07e177884da57b56db39ab7b7af0f01f9527fe Mon Sep 17 00:00:00 2001
From: Richard Fernando Heise Ferreira <rfhf19@inf.ufpr.br>
Date: Thu, 24 Sep 2020 11:36:36 -0300
Subject: [PATCH] Issue #42: Detection on user leaving
---
.../fieldsDisplayForm/DisplayForm.js | 42 ++++++++++---------
src/pages/AnswerForm.js | 4 ++
2 files changed, 27 insertions(+), 19 deletions(-)
diff --git a/src/components/fieldsDisplayForm/DisplayForm.js b/src/components/fieldsDisplayForm/DisplayForm.js
index a1f257e..8c5d8f2 100644
--- a/src/components/fieldsDisplayForm/DisplayForm.js
+++ b/src/components/fieldsDisplayForm/DisplayForm.js
@@ -17,39 +17,39 @@ import { FormEditionContext } from "../../contexts/FormContext";
import useForm from "../../contexts/useForm";
import SubmitButton from "./SubmitButton";
/** CSS styles used on page components */
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(theme => ({
app: {
margin: "0",
padding: "40px",
display: "flex",
["@media (max-width: 600px)"]: {
flexDirection: "column-reverse",
- justifyContent: "flex-end",
+ justifyContent: "flex-end"
},
paddingBottom: "78px",
["@media (min-width: 600px)"]: {
- minHeight: "calc(100vh - 92.4px - 78px -60px)",
+ minHeight: "calc(100vh - 92.4px - 78px -60px)"
},
minHeight: "calc(100vh - 71.6px - 78px -60px)",
- marginBottom: "60px",
+ marginBottom: "60px"
},
addButton: {
- fontSize: "100%",
+ fontSize: "100%"
},
sideMenuFormatingGrid: {
["@media (max-width:600px)"]: {
- marginTop: "-90px",
- },
+ marginTop: "-90px"
+ }
},
sizeFormating: {
["@media (max-width:600px)"]: {
["@media (max-width:430px)"]: {
marginLeft: "1%",
- width: "95%",
+ width: "95%"
},
- marginLeft: "2%",
- },
- },
+ marginLeft: "2%"
+ }
+ }
}));
/** CSS style used through Material Ui. */
const theme = createMuiTheme({
@@ -57,19 +57,19 @@ const theme = createMuiTheme({
MuiInput: {
underline: {
"&:before": {
- borderBottom: "1px solid #35c7fc",
+ borderBottom: "1px solid #35c7fc"
},
"&:after": {
- borderBottom: "1px solid #3f51b5",
- },
- },
+ borderBottom: "1px solid #3f51b5"
+ }
+ }
},
MuiButton: {
label: {
- color: "white",
- },
- },
- },
+ color: "white"
+ }
+ }
+ }
});
/** Main function that returns the children that composes the form creation or edition page. */
function DisplayForm() {
@@ -90,6 +90,10 @@ function DisplayForm() {
*/
useEffect(() => {
setValidToSend(verifyError(form));
+ window.onbeforeunload = confirmExit;
+ function confirmExit() {
+ return "show warning";
+ }
}, [form]);
return (
<MuiThemeProvider theme={theme}>
diff --git a/src/pages/AnswerForm.js b/src/pages/AnswerForm.js
index f86d909..22b11ae 100644
--- a/src/pages/AnswerForm.js
+++ b/src/pages/AnswerForm.js
@@ -222,6 +222,10 @@ function AnwserForm() {
/** First thing the page does is getting the form from the API. */
useEffect(() => {
getForm(id);
+ window.onbeforeunload = confirmExit;
+ function confirmExit() {
+ return "show warning";
+ }
}, []);
return (
--
GitLab