proposal - styled modal that warns the user is leaving a form. (#3966)

Co-authored-by: Smith <[email protected]>

source/frontend/src/components/common/ConfirmNavigation.tsx

@@ -0,0 +1,42 @@
+import { Location } from 'history';
+import { useEffect, useState } from 'react';
+import { Prompt } from 'react-router-dom';
+
+import { getCancelModalProps, useModalContext } from '@/hooks/useModalContext';
+
+interface Props {
+  when?: boolean | undefined;
+  navigate: (path: string) => void;
+  shouldBlockNavigation: (location: Location) => boolean;
+}
+
+const ConfirmNavigation = ({ when, navigate, shouldBlockNavigation }: Props) => {
+  const { setDisplayModal, setModalContent } = useModalContext();
+  const [lastLocation, setLastLocation] = useState<Location | null>(null);
+  const [confirmedNavigation, setConfirmedNavigation] = useState(false);
+
+  const handleConfirmNavigationClick = () => {
+    setDisplayModal(false);
+    setConfirmedNavigation(true);
+  };
+
+  const handleBlockedNavigation = (nextLocation: Location): boolean => {
+    if (!confirmedNavigation && shouldBlockNavigation(nextLocation)) {
+      setModalContent({ ...getCancelModalProps(), handleOk: () => handleConfirmNavigationClick() });
+      setDisplayModal(true);
+      setLastLocation(nextLocation);
+      return false;
+    }
+    return true;
+  };
+
+  useEffect(() => {
+    if (confirmedNavigation && lastLocation) {
+      // Navigate to the previous blocked location with your navigate function
+      navigate(lastLocation.pathname);
+    }
+  }, [confirmedNavigation, lastLocation, navigate]);
+
+  return <Prompt when={when} message={handleBlockedNavigation} />;
+};
+export default ConfirmNavigation;

source/frontend/src/features/mapSideBar/research/add/AddResearchContainer.tsx

@@ -5,6 +5,7 @@ import { useHistory } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import styled from 'styled-components';
 
+import ConfirmNavigation from '@/components/common/ConfirmNavigation';
 import { useMapStateMachine } from '@/components/common/mapFSM/MapStateMachineContext';
 import MapSideBarLayout from '@/features/mapSideBar/layout/MapSideBarLayout';
 import { usePimsPropertyRepository } from '@/hooks/repositories/usePimsPropertyRepository';
@@ -213,6 +214,12 @@ export const AddResearchContainer: React.FunctionComponent<IAddResearchContainer
           <StyledFormWrapper>
             <AddResearchForm confirmBeforeAdd={confirmBeforeAdd} />
           </StyledFormWrapper>
+          <ConfirmNavigation
+            navigate={history.push}
+            shouldBlockNavigation={() => {
+              return formikProps.dirty && !formikProps.isSubmitting && !initialForm.id;
+            }}
+          />
         </MapSideBarLayout>
       )}
     </Formik>