Confirm Dialog For Navigation on Edited Questionnaire Form (ohcnetwor…

…k#9838)

* added logic for preventing navigation on dirty form

* switch to using raviger's hook

* reset isdirty after submission

* i18n

* Update src/components/Questionnaire/QuestionnaireForm.tsx

* reset isDirty on form submit

* rm setIsDirty in mutate

---------

Co-authored-by: Rithvik Nishad <[email protected]>

public/locale/en.json

@@ -2046,6 +2046,7 @@
   "unlink_skill_error": "Error while unlinking skill. Try again later.",
   "unlink_skill_success": "Skill unlinked successfully",
   "unlink_this_facility": "Unlink Facility",
+  "unsaved_changes": "You have unsaved changes. Are you sure you want to leave?",
   "unsubscribe": "Unsubscribe",
   "unsubscribe_failed": "Unsubscribe failed.",
   "unsubscribed_successfully": "Unsubscribed Successfully.",

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[]
   >([]);
@@ -94,6 +96,10 @@ 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, t("unsaved_changes"));
+
   useEffect(() => {
     if (!isInitialized && questionnaireSlug) {
       const questionnaire =
@@ -186,6 +192,7 @@ export function QuestionnaireForm({
   const hasErrors = questionnaireForms.some((form) => form.errors.length > 0);
 
   const handleSubmit = async () => {
+    setIsDirty(false);
     if (hasErrors) return;
 
     const requests: BatchRequest[] = [];
@@ -348,6 +355,9 @@ export function QuestionnaireForm({
                       : formItem,
                   ),
                 );
+                if (!isDirty) {
+                  setIsDirty(true);
+                }
               }}
               disabled={isPending}
               activeGroupId={activeGroupId}