From 8806e326b2dd211882e9d6130909deb247283e41 Mon Sep 17 00:00:00 2001
From: Craig Yu <craig.yu93@gmail.com>
Date: Tue, 24 Sep 2024 10:47:44 -0700
Subject: [PATCH 1/2] fix: block navigation while in edit mode

---
 .../SeedlotReview/SeedlotReviewContent.tsx    | 23 ++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/Seedlot/SeedlotReview/SeedlotReviewContent.tsx b/frontend/src/views/Seedlot/SeedlotReview/SeedlotReviewContent.tsx
index 05ad27019..324fab346 100644
--- a/frontend/src/views/Seedlot/SeedlotReview/SeedlotReviewContent.tsx
+++ b/frontend/src/views/Seedlot/SeedlotReview/SeedlotReviewContent.tsx
@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams, useBlocker } from 'react-router-dom';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 import {
@@ -327,10 +327,10 @@ const SeedlotReviewContent = () => {
     onSuccess: async (_data, variables) => {
       await queryClient.invalidateQueries({ queryKey: ['seedlots', seedlotNumber] });
       await queryClient.invalidateQueries({ queryKey: ['seedlot-full-form', seedlotNumber] });
+      setIsReadMode(true);
       if (variables.statusOnSave !== 'SUB') {
         navigate(`/seedlots/details/${seedlotNumber}/?statusOnSave=${variables.statusOnSave}`);
       }
-      setIsReadMode(true);
     }
   });
 
@@ -350,10 +350,10 @@ const SeedlotReviewContent = () => {
     onSuccess: async (_data, variables) => {
       await queryClient.invalidateQueries({ queryKey: ['seedlots', seedlotNumber] });
       await queryClient.invalidateQueries({ queryKey: ['seedlot-full-form', seedlotNumber] });
+      setIsReadMode(true);
       if (variables.statusOnSave !== 'SUB') {
         navigate(`/seedlots/details/${seedlotNumber}/?statusOnSave=${variables.statusOnSave}`);
       }
-      setIsReadMode(true);
     }
   });
 
@@ -502,6 +502,23 @@ const SeedlotReviewContent = () => {
     closeCancelModal();
   };
 
+  /**
+   * Custom blocker function to prevent navigation with unsaved changes.
+   */
+  const blockerFunction = () => {
+    if (
+      !isReadMode
+      && !tscSeedlotMutation.isLoading
+      && !statusOnlyMutaion.isLoading
+    ) {
+      setIsCancelModalOpen(true); // Show modal if there are unsaved changes
+      return true; // Block navigation
+    }
+    return false; // Allow navigation
+  };
+
+  useBlocker(blockerFunction);
+
   return (
     <FlexGrid className="seedlot-review-grid">
       <Loading

From ffc44d5fe3098cbdd5611bb6fa3bf7d1b7e89c31 Mon Sep 17 00:00:00 2001
From: Craig Yu <craig.yu93@gmail.com>
Date: Tue, 24 Sep 2024 10:58:01 -0700
Subject: [PATCH 2/2] fix: typo

---
 .../src/views/Seedlot/SeedlotReview/SeedlotReviewContent.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/Seedlot/SeedlotReview/SeedlotReviewContent.tsx b/frontend/src/views/Seedlot/SeedlotReview/SeedlotReviewContent.tsx
index e61ff6d09..185ec2eb0 100644
--- a/frontend/src/views/Seedlot/SeedlotReview/SeedlotReviewContent.tsx
+++ b/frontend/src/views/Seedlot/SeedlotReview/SeedlotReviewContent.tsx
@@ -520,7 +520,7 @@ const SeedlotReviewContent = () => {
     if (
       !isReadMode
       && !tscSeedlotMutation.isLoading
-      && !statusOnlyMutaion.isLoading
+      && !statusOnlyMutation.isLoading
     ) {
       setIsCancelModalOpen(true); // Show modal if there are unsaved changes
       return true; // Block navigation