Prevent accidental data discarding (#534)

* Add onstepchange alerts

* Add translations and clean up code

* Clean up stepContent

* Modularize functions

* Edit translations

Author: vasuchal

frontend/src/components/StepContent/StepContent.js

@@ -26,8 +26,9 @@ const StepContent = ({
     loading,
     stepData,
     onDataSaved,
+    edit,
+    setEdit,
 }) => {
-    const [edit, setEdit] = useState(false);
     const [updatedData, setUpdatedData] = useState(_.cloneDeep(stepData));
     const [currentQuestion, setCurrentQuestion] = useState(0);
     const [singleQuestionFormat, setSingleQuestionFormat] = useState(false);
@@ -38,6 +39,19 @@ const StepContent = ({
         setUpdatedData(_.cloneDeep(stepData));
     }, [stepData]);
 
+    useEffect(() => {
+        const determinePreventDefault = (e) => {
+            // Check if any of the step is being edited
+            if (edit) {
+                e.preventDefault();
+                e.returnValue = '';
+            }
+        };
+        window.addEventListener('beforeunload', determinePreventDefault);
+        return () =>
+            window.removeEventListener('beforeunload', determinePreventDefault);
+    }, [edit]);
+
     const handleSimpleUpdate = (fieldKey, value) => {
         setUpdatedData((data) => {
             const dataCopy = _.cloneDeep(data);
@@ -289,6 +303,8 @@ StepContent.propTypes = {
     loading: PropTypes.bool.isRequired,
     stepData: PropTypes.object.isRequired,
     onDataSaved: PropTypes.func.isRequired,
+    edit: PropTypes.bool.isRequired,
+    setEdit: PropTypes.func.isRequired,
 };
 
 export default StepContent;

frontend/src/pages/PatientDetail/PatientDetail.js

@@ -38,6 +38,7 @@ const PatientDetail = () => {
     const [isManagePatientModalOpen, setManagePatientModalOpen] =
         useState(false);
     const stepKeyParam = useQueryParam('stepKey', StringParam)[0];
+    const [edit, setEdit] = useState(false);
 
     /**
      * Fetch metadata for all steps and the patient's data.
@@ -116,12 +117,36 @@ const PatientDetail = () => {
         };
     };
 
-    const onStepChange = (newStep) => {
+    const displayUnsavedDataAlert = (newStep) => {
+        swal({
+            title: translations.components.swal.dataDiscarding
+                .confirmationQuestion,
+            buttons: [
+                translations.components.swal.dataDiscarding.stay,
+                translations.components.swal.dataDiscarding.leave,
+            ],
+        }).then((isLeaveConfirmed) => {
+            if (isLeaveConfirmed) {
+                switchStep(newStep);
+            }
+        });
+    };
+
+    const switchStep = (newStep) => {
         if (newStep === null) return;
         setSelectedStep(newStep);
+        setEdit(false);
         window.history.pushState({}, '', `${patientId}?stepKey=${newStep}`);
     };
 
+    const onStepChange = (newStep) => {
+        if (edit) {
+            displayUnsavedDataAlert(newStep);
+        } else {
+            switchStep(newStep);
+        }
+    };
+
     /**
      * This generates the main content of this screen.
      * Renders all of the fields in the selected step
@@ -148,6 +173,8 @@ const PatientDetail = () => {
                             )}
                             stepData={patientData[step.key] ?? {}}
                             loading={loading}
+                            edit={edit}
+                            setEdit={setEdit}
                         />
                     );
                 })}

frontend/src/translations.json

@@ -145,6 +145,11 @@
                 "discard": "Discard"
             },
             "swal": {
+                "dataDiscarding": {
+                    "stay": "Stay",
+                    "leave": "Leave",
+                    "confirmationQuestion": "You have unsaved changes. Do you want to leave this page?"
+                },
                 "createPatient": {
                     "title": "New Patient",
                     "firstName": "Name",
@@ -382,6 +387,11 @@
                 "discard": "تجاهل"
             },
             "swal": {
+                "dataDiscarding": {
+                    "stay": "البقاء",
+                    "leave": "يترك",
+                    "confirmationQuestion": "لم تحفظ التغييرات. هل تريد مغادرة هذه الصفحة؟"
+                },
                 "createPatient": {
                     "title": "\u0645\u0631\u064a\u0636 \u062c\u062f\u064a\u062f",
                     "firstName": "\u0627\u0633\u0645",