Use Zustand for IsFormDirty State

src/client/package.json

@@ -68,7 +68,8 @@
     "redux-thunk": "^2.4.2",
     "semantic-ui-css": "github:Semantic-Org/Semantic-UI-CSS",
     "semantic-ui-react": "^2.1.4",
-    "styled-components": "^6.1.1"
+    "styled-components": "^6.1.1",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@babel/plugin-transform-private-property-in-object": "^7.24.7",

src/client/src/pages/detail/detailHeader.tsx

@@ -18,7 +18,7 @@ import { ExportDialog } from "../../components/export/exportDialog.tsx";
 import DateText from "../../components/legacyComponents/dateText";
 import { PromptContext } from "../../components/prompt/promptContext.tsx";
 import { DetailHeaderStack } from "../../components/styledComponents.ts";
-import { useFormDirty } from "./useFormDirty.tsx";
+import { useFormDirtyStore } from "./formDirtyStore.ts";
 
 interface DetailHeaderProps {
   editingEnabled: boolean;
@@ -40,7 +40,7 @@ const DetailHeader = ({
   const dispatch = useDispatch();
   const { t } = useTranslation();
   const { showPrompt } = useContext(PromptContext);
-  const { isFormDirty } = useFormDirty();
+  const { isFormDirty } = useFormDirtyStore();
   const auth = useAuth();
 
   const toggleEditing = (editing: boolean) => {

src/client/src/pages/detail/detailPage.tsx

@@ -16,7 +16,6 @@ import { DetailPageContent } from "./detailPageContent.tsx";
 import { DetailSideNav } from "./detailSideNav.tsx";
 import { BoreholeFormInputs } from "./form/borehole/boreholePanelInterfaces.ts";
 import { LocationFormInputs, LocationFormSubmission } from "./form/location/locationPanelInterfaces.tsx";
-import { FormDirtyProvider } from "./formDirtyContext.tsx";
 import { useLabelingContext } from "./labeling/labelingInterfaces.tsx";
 import LabelingPanel from "./labeling/labelingPanel.tsx";
 import { SaveBar } from "./saveBar";
@@ -128,7 +127,7 @@ export const DetailPage: FC = () => {
     (location.pathname.endsWith("/borehole") && location.hash === "#general");
 
   return (
-    <FormDirtyProvider>
+    <>
       <DetailHeader
         borehole={borehole}
         editingEnabled={editingEnabled}
@@ -177,6 +176,6 @@ export const DetailPage: FC = () => {
           {editingEnabled && shouldShowSaveBar && <SaveBar triggerSubmit={triggerSubmit} triggerReset={triggerReset} />}
         </Stack>
       </LayoutBox>
-    </FormDirtyProvider>
+    </>
   );
 };

src/client/src/pages/detail/form/borehole/sectionInput.jsx

@@ -10,14 +10,14 @@ import { DataCardButtonContainer } from "../../../../components/dataCard/dataCar
 import { DataCardContext } from "../../../../components/dataCard/dataCardContext.jsx";
 import { FormCheckbox, FormContainer, FormInput, FormSelect, FormValueType } from "../../../../components/form/form";
 import { FormDomainSelect } from "../../../../components/form/formDomainSelect";
-import { useFormDirty } from "../../useFormDirty";
+import { useFormDirtyStore } from "../../formDirtyStore.ts";
 import { useSaveOnCtrlS } from "../../useSaveOnCtrlS";
 
 const SectionInput = ({ item, parentId }) => {
   const { triggerReload, selectCard } = useContext(DataCardContext);
   const { data: domains } = useDomains();
   const { i18n } = useTranslation();
-  const { setIsFormDirty } = useFormDirty();
+  const { setIsFormDirty } = useFormDirtyStore();
 
   const sectionElementDefaults = {
     fromDepth: null,

src/client/src/pages/detail/form/useFormWithSaveBar.ts

@@ -1,8 +1,8 @@
 import { ForwardedRef, useCallback, useEffect, useImperativeHandle } from "react";
 import { FieldValues, UseFormReturn } from "react-hook-form";
 import { useHistory } from "react-router-dom";
+import { useFormDirtyStore } from "../formDirtyStore.ts";
 import { useBlockNavigation } from "../useBlockNavigation.tsx";
-import { useFormDirty } from "../useFormDirty.tsx";
 import { useSaveOnCtrlS } from "../useSaveOnCtrlS.ts";
 
 interface UseFormWithSaveBarProps<T extends FieldValues> {
@@ -20,7 +20,7 @@ export function UseFormWithSaveBar<T extends FieldValues>({
 }: UseFormWithSaveBarProps<T>) {
   const history = useHistory();
   const { handleBlockedNavigation } = useBlockNavigation();
-  const { setIsFormDirty } = useFormDirty();
+  const { setIsFormDirty } = useFormDirtyStore();
 
   // Block navigation if form is dirty
   history.block(nextLocation => {

src/client/src/pages/detail/formDirtyStore.ts

@@ -0,0 +1,10 @@
+import { create } from "zustand";
+
+interface FormDirtyState {
+  isFormDirty: boolean;
+  setIsFormDirty: (newState: boolean) => void;
+}
+export const useFormDirtyStore = create<FormDirtyState>(set => ({
+  isFormDirty: false,
+  setIsFormDirty: newState => set(() => ({ isFormDirty: newState })),
+}));

src/client/src/pages/detail/saveBar.tsx

@@ -5,7 +5,7 @@ import { Box, Stack } from "@mui/material";
 import { CircleCheck, CircleX } from "lucide-react";
 import { theme } from "../../AppTheme.ts";
 import { DeleteButton, SaveButton } from "../../components/buttons/buttons.tsx";
-import { useFormDirty } from "./useFormDirty.tsx";
+import { useFormDirtyStore } from "./formDirtyStore.ts";
 
 interface SaveBarProps {
   triggerSubmit: () => void;
@@ -15,7 +15,7 @@ export const SaveBar = ({ triggerSubmit, triggerReset }: SaveBarProps) => {
   const [showSaveFeedback, setShowSaveFeedback] = useState(false);
   const { t } = useTranslation();
   const location = useLocation();
-  const { isFormDirty } = useFormDirty();
+  const { isFormDirty } = useFormDirtyStore();
 
   useEffect(() => {
     setShowSaveFeedback(false);

src/client/src/pages/detail/useBlockNavigation.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import { Trash2, X } from "lucide-react";
 import { PromptContext } from "../../components/prompt/promptContext.tsx";
-import { useFormDirty } from "./useFormDirty.tsx";
+import { useFormDirtyStore } from "./formDirtyStore.ts";
 
 interface UseBlockNavigationResult {
   handleBlockedNavigation: (nextLocation: string) => boolean;
@@ -12,7 +12,8 @@ interface UseBlockNavigationResult {
 export const useBlockNavigation = (): UseBlockNavigationResult => {
   const [nextLocation, setNextLocation] = useState<string | null>(null);
   const [confirmedNavigation, setConfirmedNavigation] = useState(false);
-  const { isFormDirty } = useFormDirty();
+  const { isFormDirty } = useFormDirtyStore();
+
   const { showPrompt } = useContext(PromptContext);
   const { t } = useTranslation();
   const history = useHistory();