From b2408f94715677c253f27c59e1898351b1aa1544 Mon Sep 17 00:00:00 2001
From: Olexii Bulhakov <bulhakovolexii@gmail.com>
Date: Sun, 14 Jul 2024 09:59:56 +0300
Subject: [PATCH] Added Unsaved Changes Warning

---
 app/components/UnsavedChangesWarning.js | 22 ++++++++++++++++++++++
 app/questionnaire/layout.jsx            |  3 ++-
 app/results/page.jsx                    | 15 ++++++++++-----
 3 files changed, 34 insertions(+), 6 deletions(-)
 create mode 100644 app/components/UnsavedChangesWarning.js

diff --git a/app/components/UnsavedChangesWarning.js b/app/components/UnsavedChangesWarning.js
new file mode 100644
index 0000000..1256d1e
--- /dev/null
+++ b/app/components/UnsavedChangesWarning.js
@@ -0,0 +1,22 @@
+"use client";
+
+import { useEffect } from "react";
+
+const UnsavedChangesWarning = () => {
+  useEffect(() => {
+    const handleBeforeUnload = (event) => {
+      event.preventDefault();
+      event.returnValue = ""; // Современные браузеры требуют, чтобы значение было пустой строкой
+    };
+
+    window.addEventListener("beforeunload", handleBeforeUnload);
+
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  }, []);
+
+  return null;
+};
+
+export default UnsavedChangesWarning;
diff --git a/app/questionnaire/layout.jsx b/app/questionnaire/layout.jsx
index d27fea9..503dae7 100644
--- a/app/questionnaire/layout.jsx
+++ b/app/questionnaire/layout.jsx
@@ -12,7 +12,7 @@ import FormNavigationButton from "../components/FormNavigationButton";
 import Building from "../model/Building";
 import monthlyDurationIntervals from "../model/reference-data/monthlyDurationIntervals";
 import CustomAppBar from "../components/MyAppBar";
-import Background from "../components/Background";
+import UnsavedChangesWarning from "../components/UnsavedChangesWarning";
 
 const steps = [
   {
@@ -156,6 +156,7 @@ export default function QuestionnaireLayout({ children }) {
 
   return (
     <>
+      <UnsavedChangesWarning />
       <CustomAppBar color="secondary" />
       <Container
         maxWidth="lg"
diff --git a/app/results/page.jsx b/app/results/page.jsx
index bc8ba65..5f155fc 100644
--- a/app/results/page.jsx
+++ b/app/results/page.jsx
@@ -17,8 +17,9 @@ import {
   Button,
   TextField,
 } from "@mui/material";
-import Background from "../components/Background";
 import MyAppBar from "../components/MyAppBar";
+import UnsavedChangesWarning from "../components/UnsavedChangesWarning";
+import Link from "next/link";
 
 const biluxSystem = {
   heatGenerator:
@@ -203,6 +204,7 @@ const SuccessfulResult = ({ inputData }) => {
     <Grid container spacing={2} mt={1}>
       <Grid item xs={12} md={6} spacing={2}>
         <Button
+          LinkComponent={Link}
           href="/questionnaire/step-7"
           color="primary"
           variant="contained"
@@ -311,9 +313,12 @@ export default function Results() {
   return !inputData.city ? (
     router.push("/")
   ) : (
-    <Container maxWidth="lg">
-      <MyAppBar color="transparent" />
-      <SuccessfulResult inputData={inputData} />
-    </Container>
+    <>
+      <UnsavedChangesWarning />
+      <Container maxWidth="lg">
+        <MyAppBar color="transparent" />
+        <SuccessfulResult inputData={inputData} />
+      </Container>
+    </>
   );
 }