Confirm Dialog For Navigation on Edited Questionnaire Form

src/components/Questionnaire/QuestionnaireForm.tsx

@@ -1,5 +1,6 @@
 import { useMutation } from "@tanstack/react-query";
 import { t } from "i18next";
+import { useNavigationPrompt } from "raviger";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 
@@ -63,6 +64,7 @@ export function QuestionnaireForm({
   onCancel,
   facilityId,
 }: QuestionnaireFormProps) {
+  const [isDirty, setIsDirty] = useState(false);
   const [questionnaireForms, setQuestionnaireForms] = useState<
     QuestionnaireFormState[]
   >([]);
@@ -83,6 +85,7 @@ export function QuestionnaireForm({
     mutationFn: mutate(routes.batchRequest, { silent: true }),
     onSuccess: () => {
       toast.success(t("questionnaire_submitted_successfully"));
+      setIsDirty(false);
       onSubmit?.();
     },
     onError: (error) => {
@@ -94,6 +97,13 @@ export function QuestionnaireForm({
     },
   });
 
+  // TODO: Use useBlocker hook after switching to tanstack router
+  // https://tanstack.com/router/latest/docs/framework/react/guide/navigation-blocking#how-do-i-use-navigation-blocking
+  useNavigationPrompt(
+    isDirty,
+    "You have unsaved changes. Are you sure you want to leave?",
+  );
+
   useEffect(() => {
     if (!isInitialized && questionnaireSlug) {
       const questionnaire =
@@ -348,6 +358,9 @@ export function QuestionnaireForm({
                       : formItem,
                   ),
                 );
+                if (!isDirty) {
+                  setIsDirty(true);
+                }
               }}
               disabled={isPending}
               activeGroupId={activeGroupId}