Merge pull request #1414 from Jubair70/fix_disable_click_outside_modal

fix: disable click outside all modals and check unsaved changes for education modal

client/components/shared/BaseModal.tsx

@@ -17,16 +17,21 @@ const BaseModal: React.FC<Props> = ({ icon, isOpen, heading, children, handleClo
   const router = useRouter();
   const { pathname, query } = router;
 
-  const onClose = () => {
+  const onClose = (event: object, reason: string) => {
     router.push({ pathname, query }, '');
+    if (reason === 'backdropClick') return;
+    handleClose();
+  };
 
+  const onIconClose = () => {
+    router.push({ pathname, query }, '');
     handleClose();
   };
 
   return (
     <Modal
       open={isOpen}
-      onClose={onClose}
+      onClose={(event, reason) => onClose(event, reason)}
       closeAfterTransition
       aria-labelledby={heading}
       classes={{ root: 'flex items-center justify-center' }}
@@ -40,7 +45,7 @@ const BaseModal: React.FC<Props> = ({ icon, isOpen, heading, children, handleClo
               <h1>{heading}</h1>
             </div>
 
-            <IconButton size="small" onClick={onClose}>
+            <IconButton size="small" onClick={onIconClose}>
               <CloseIcon sx={{ fontSize: 18 }} />
             </IconButton>
           </header>

client/modals/builder/sections/EducationModal.tsx

@@ -2,7 +2,6 @@ import { joiResolver } from '@hookform/resolvers/joi';
 import { Add, DriveFileRenameOutline } from '@mui/icons-material';
 import { Button, TextField } from '@mui/material';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-import { Education, SectionPath } from 'schema';
 import dayjs from 'dayjs';
 import Joi from 'joi';
 import get from 'lodash/get';
@@ -10,6 +9,7 @@ import isEmpty from 'lodash/isEmpty';
 import { useTranslation } from 'next-i18next';
 import { useEffect, useMemo } from 'react';
 import { Controller, useForm } from 'react-hook-form';
+import { Education, SectionPath } from 'schema';
 
 import ArrayInput from '@/components/shared/ArrayInput';
 import BaseModal from '@/components/shared/BaseModal';
@@ -66,7 +66,12 @@ const EducationModal: React.FC = () => {
   const addText = useMemo(() => t('builder.common.actions.add', { token: heading }), [t, heading]);
   const editText = useMemo(() => t('builder.common.actions.edit', { token: heading }), [t, heading]);
 
-  const { reset, control, handleSubmit } = useForm<FormData>({
+  const {
+    reset,
+    control,
+    handleSubmit,
+    formState: { isDirty },
+  } = useForm<FormData>({
     defaultValues: defaultState,
     resolver: joiResolver(schema),
   });
@@ -92,6 +97,14 @@ const EducationModal: React.FC = () => {
     reset(defaultState);
   };
 
+  const handleModalClose = () => {
+    if (isDirty) {
+      if (confirm('You have unsaved changes, Do you want to discard the changes?')) handleClose();
+      else return;
+    }
+    handleClose();
+  };
+
   useEffect(() => {
     if (!isEmpty(item)) {
       reset(item);
@@ -102,7 +115,7 @@ const EducationModal: React.FC = () => {
     <BaseModal
       icon={isEditMode ? <DriveFileRenameOutline /> : <Add />}
       isOpen={isOpen}
-      handleClose={handleClose}
+      handleClose={handleModalClose}
       heading={isEditMode ? editText : addText}
       footerChildren={<Button onClick={handleSubmit(onSubmit)}>{isEditMode ? editText : addText}</Button>}
     >
@@ -175,7 +188,7 @@ const EducationModal: React.FC = () => {
               slotProps={{
                 textField: {
                   error: !!fieldState.error,
-                  helperText: fieldState.error?.message || t('builder.common.form.start-date.help-text')
+                  helperText: fieldState.error?.message || t('builder.common.form.start-date.help-text'),
                 },
               }}
               onChange={(date: dayjs.Dayjs | null) => {
@@ -198,7 +211,7 @@ const EducationModal: React.FC = () => {
               slotProps={{
                 textField: {
                   error: !!fieldState.error,
-                  helperText: fieldState.error?.message || t('builder.common.form.end-date.help-text')
+                  helperText: fieldState.error?.message || t('builder.common.form.end-date.help-text'),
                 },
               }}
               onChange={(date: dayjs.Dayjs | null) => {