diff --git a/public/locale/en.json b/public/locale/en.json index 65a010592db..a75fc2a5be8 100644 --- a/public/locale/en.json +++ b/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.", diff --git a/src/components/Questionnaire/QuestionnaireForm.tsx b/src/components/Questionnaire/QuestionnaireForm.tsx index ca6c0978cd0..3196bbc43ab 100644 --- a/src/components/Questionnaire/QuestionnaireForm.tsx +++ b/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}