NavBlocker: Block Stop page tab changes

Author: Huulivoide

ui/src/components/forms/common/NavigationBlocker.tsx

@@ -77,7 +77,7 @@ type BlockerContext = {
   readonly requestNavigation: RequestNavigationFn;
 };
 
-const navigationBlockerContext = createContext<BlockerContext>({
+export const navigationBlockerContext = createContext<BlockerContext>({
   registerBlock: () => noop,
   requestNavigation: noop,
 });

ui/src/components/stop-registry/stops/stop-details/StopDetailsPage.tsx

@@ -1,10 +1,11 @@
-import { FC, useState } from 'react';
+import { FC, useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MdWarning } from 'react-icons/md';
 import { useGetStopDetails, useRequiredParams } from '../../../../hooks';
 import { Container, Visible } from '../../../../layoutComponents';
 import { mapToShortDate } from '../../../../time';
 import { LoadingWrapper } from '../../../../uiComponents/LoadingWrapper';
+import { navigationBlockerContext } from '../../../forms/common/NavigationBlocker';
 import { BasicDetailsSection } from './basic-details/BasicDetailsSection';
 import {
   DetailTabSelector,
@@ -33,12 +34,17 @@ const testIds = {
 };
 
 export const StopDetailsPage: FC = () => {
-  const { stopDetails, loading, error } = useGetStopDetails();
   const { t } = useTranslation();
-  const [activeDetailTab, selectDetailTab] = useState(
+  const { label } = useRequiredParams<{ label: string }>();
+
+  const [activeDetailTab, setActiveDetailTab] = useState(
     DetailTabType.BasicDetailsTab,
   );
-  const { label } = useRequiredParams<{ label: string }>();
+  const { requestNavigation } = useContext(navigationBlockerContext);
+  const selectDetailTab = (nextTab: DetailTabType) =>
+    requestNavigation(() => setActiveDetailTab(nextTab));
+
+  const { stopDetails, loading, error } = useGetStopDetails();
 
   return (
     <Container testId={testIds.page}>