feature/52-save-changes-user-leaving-dashboard

frontend/src/hooks/index.ts

@@ -1,2 +1,3 @@
 export { usePopUp } from './usePopUp';
 export { useToggle } from './useToggle';
+export { useLeaveConfirm } from './useLeaveConfirm';

frontend/src/hooks/useLeaveConfirm.tsx

@@ -0,0 +1,54 @@
+import { Dispatch, SetStateAction, useCallback, useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+
+import { leaveConfirmDefaultMessage } from '@app/const';
+
+type LeaveConfirmProps = {
+    initialValue: boolean,
+    message?: string
+}
+
+interface LeaveConfirmReturn {
+  hasUnsavedChanges: boolean,
+  setHasUnsavedChanges: Dispatch<SetStateAction<boolean>>,  
+}
+
+export function useLeaveConfirm({
+    initialValue,
+    message = leaveConfirmDefaultMessage,
+}: LeaveConfirmProps): LeaveConfirmReturn {
+  const router = useRouter()
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState<boolean>(initialValue);
+
+  const onRouteChangeStart = useCallback(() => {
+    if (hasUnsavedChanges) {
+      if (confirm(message)) {
+        return true
+      }
+      throw "Abort route change by user's confirmation."
+    }
+  }, [hasUnsavedChanges])
+
+  const handleWindowClose = useCallback((e: any) => {
+    if (!hasUnsavedChanges) { 
+      return;
+    }
+    e.preventDefault();
+    e.returnValue = message;
+  });
+
+  useEffect(() => {
+    router.events.on("routeChangeStart", onRouteChangeStart);
+    window.addEventListener('beforeunload', handleWindowClose);
+
+    return () => {
+      router.events.off("routeChangeStart", onRouteChangeStart);
+      window.removeEventListener('beforeunload', handleWindowClose);
+    }
+  }, [onRouteChangeStart, handleWindowClose]);
+
+  return {
+    hasUnsavedChanges,
+    setHasUnsavedChanges,
+  };
+}