add usePrompt

src/features/QualificationPage/features/TestPage/components/Test/Test.tsx

@@ -26,6 +26,7 @@ import Question from './Question';
 import Navigation from './Navigation';
 import Summary from './Summary';
 import FixedSpinner from './FixedSpinner';
+import { usePrompt } from '../../../../../../libs/hooks';
 
 export interface TestProps {
   initialQuestions: QuestionT[];
@@ -44,7 +45,7 @@ const Test = ({ initialQuestions, qualification }: TestProps) => {
   const [startedAt, setStartedAt] = useState(new Date());
   const [endedAt, setEndedAt] = useState(new Date());
   const classes = useStyles();
-
+  usePrompt(!reviewMode);
   useEffect(() => {
     if (headingRef.current?.scrollIntoView) {
       headingRef.current?.scrollIntoView({

src/libs/hooks/index.ts

@@ -1 +1,2 @@
 export * from './useCountdown';
+export * from './usePrompt';

src/libs/hooks/usePrompt.ts

@@ -0,0 +1,20 @@
+import { useEffect, useRef, useCallback } from 'react';
+
+export const usePrompt = (when: boolean) => {
+  const whenRef = useRef(when);
+
+  useEffect(() => {
+    whenRef.current = when;
+  }, [when]);
+
+  useEffect(() => {
+    window.addEventListener('beforeunload', handleUnload);
+  }, []);
+
+  const handleUnload = useCallback((event: BeforeUnloadEvent) => {
+    if (whenRef.current) {
+      event.preventDefault();
+      event.returnValue = '';
+    }
+  }, []);
+};