From dae142e5ce5e42210fdb926f0471e74a80222831 Mon Sep 17 00:00:00 2001
From: Jubair70 <jubair.hossain@yahoo.com>
Date: Tue, 1 Aug 2023 15:29:31 +0600
Subject: [PATCH] fix: disable click outside all modals and check unsaved
 changes for education modal

---
 client/components/shared/BaseModal.tsx            | 11 ++++++++---
 client/modals/builder/sections/EducationModal.tsx | 13 +++++++++++--
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/client/components/shared/BaseModal.tsx b/client/components/shared/BaseModal.tsx
index c93c0dd6d..a849e084c 100644
--- a/client/components/shared/BaseModal.tsx
+++ b/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>
diff --git a/client/modals/builder/sections/EducationModal.tsx b/client/modals/builder/sections/EducationModal.tsx
index e355f7474..28ca0f456 100644
--- a/client/modals/builder/sections/EducationModal.tsx
+++ b/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>}
     >