Merge pull request #372 from MeasureAuthoringTool/feature/MAT-7667

MAT-7667 Updated RouteChangePrompt to use useBlocker navigations and …

src/router/RouteChangeHandler.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { useNavigate, useBlocker, Blocker } from "react-router-dom";
+import { useBlocker } from "react-router-dom";
 import { MadieDiscardDialog } from "@madie/madie-design-system/dist/react";
 import { routeHandlerStore } from "@madie/madie-util";
 // We have to listen at the top level for navigational changes to block them.
@@ -8,12 +8,13 @@ export interface RouteHandlerState {
   canTravel: boolean;
   pendingRoute: string;
 }
-
+// Required by every single spa application that has internal routing
 const RouteChangePrompt = () => {
   const { updateRouteHandlerState } = routeHandlerStore;
   const [routeHandlerState, setRouteHandlerState] = useState<RouteHandlerState>(
     routeHandlerStore.state
   );
+  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
 
   useEffect(() => {
     const subscription = routeHandlerStore.subscribe(setRouteHandlerState);
@@ -22,41 +23,29 @@ const RouteChangePrompt = () => {
     };
   }, []);
 
-  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
-  let navigate = useNavigate();
-
-  const blocker: Blocker = useBlocker(
-    ({ currentLocation, nextLocation }) => !routeHandlerState.canTravel
-  );
-  useEffect(() => {
-    updateRouteHandlerState({
-      ...routeHandlerState,
-      pendingRoute: blocker?.location?.pathname,
-    });
-  }, [blocker?.location?.pathname]);
-  useEffect(() => {
-    if (routeHandlerState.pendingRoute) {
+  const blocker = useBlocker(({ currentLocation, nextLocation }) => {
+    if (
+      !routeHandlerState?.canTravel &&
+      currentLocation.pathname !== nextLocation.pathname
+    ) {
       setDialogOpen(true);
-      updateRouteHandlerState({
-        canTravel: true,
-        pendingRoute: routeHandlerState.pendingRoute,
-      });
+      return true;
     }
-  }, [routeHandlerState.pendingRoute, setDialogOpen]);
+    setDialogOpen(false);
+    return false;
+  });
 
   const onContinue = () => {
     setDialogOpen(false);
-    const currentRoute = routeHandlerState.pendingRoute;
     updateRouteHandlerState({
       canTravel: true,
       pendingRoute: "",
     });
-    navigate(currentRoute);
+    blocker.proceed();
   };
   const onClose = () => {
-    updateRouteHandlerState({ canTravel: false, pendingRoute: "" });
     setDialogOpen(false);
-    if (blocker.location) blocker.reset();
+    blocker.reset();
   };
 
   return (

src/styles/styles.tsx

@@ -1,55 +1,10 @@
 /** @format */
 
 import tw, { styled } from "twin.macro";
-import { Link } from "react-router-dom";
-
-export const Nav = tw.nav`
-    relative flex flex-wrap items-center justify-between px-4 py-5 
-    md:px-24 lg:px-8 bg-gray-300
-`;
-export const InnerNav = tw.div`
-    w-full px-4 flex flex-wrap items-center justify-between 
-`;
-export const InnerMost = tw.div`
-    w-full relative flex justify-between lg:w-auto lg:static lg:block 
-    lg:justify-start
-`;
-
 export const DropDown = styled.div((props: any) => [
   tw`lg:flex flex-grow items-center`,
 ]);
-
-export const Logo = tw(Link)`
-    leading-relaxed inline-block mr-4 whitespace-nowrap 
-`;
-// export const LogoLink = tw(Link)`
-//   leading-relaxed inline-block mr-4 whitespace-nowrap
-// `;
-export const NavButton = tw.button`
-    text-black cursor-pointer text-xl leading-none px-3 py-1 border border-solid 
-    border-transparent rounded bg-transparent block lg:hidden outline-none 
-    focus:outline-none
-`;
 export const DropMenu = tw.ul`
     flex flex-col lg:flex-row list-none lg:ml-auto md:w-full md:items-center
     lg:justify-end
 `;
-export const ListItem = tw.li`
-    block
-`;
-export const InnerItem = tw(Link)`
-    px-3 py-2 flex items-center font-sans font-semibold text-lg tracking-wide 
-    text-gray-700 hover:text-gray-900 
-`;
-export const ExtraButton = tw.a`
-    text-black bg-transparent border border-solid border-gray-900 
-    hover:bg-black hover:text-white active:bg-gray-600 font-sans font-semibold 
-    uppercase text-sm px-4 py-2 rounded outline-none focus:outline-none mr-1 
-    mb-1 mt-4 lg:mt-0 lg:ml-24
-`;
-export const Bars = tw.div`
-    mt-2
-`;
-export const Bar = tw.div`
-    w-8 h-1 bg-black mb-1 align-middle
-`;