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

@@ -66,7 +66,7 @@ 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),
   });
@@ -90,6 +90,15 @@ 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(() => {
@@ -102,7 +111,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>}
     >