From 33870dc845d33c063d4e1102aedcb7f6fa7da159 Mon Sep 17 00:00:00 2001
From: Elijah Mock <28277163+ekcom@users.noreply.github.com>
Date: Sat, 6 Jan 2024 21:52:56 +0000
Subject: [PATCH] Set up navigation warning while editing recipe

---
 frontend/composables/recipe-page/shared-state.ts | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/composables/recipe-page/shared-state.ts b/frontend/composables/recipe-page/shared-state.ts
index bbc040dfb368..5e981fcdb891 100644
--- a/frontend/composables/recipe-page/shared-state.ts
+++ b/frontend/composables/recipe-page/shared-state.ts
@@ -1,5 +1,6 @@
 import { computed, ComputedRef, ref, Ref, useContext } from "@nuxtjs/composition-api";
 import { UserOut } from "~/lib/api/types/user";
+import { useNavigationWarning } from "~/composables/use-navigation-warning";
 
 export enum PageMode {
   EDIT = "EDIT",
@@ -65,6 +66,8 @@ function pageRefs(slug: string) {
 }
 
 function pageState({ slugRef, pageModeRef, editModeRef, imageKey }: PageRefs): PageState {
+  const { activateNavigationWarning, deactivateNavigationWarning } = useNavigationWarning();
+
   const toggleEditMode = () => {
     if (editModeRef.value === EditorMode.FORM) {
       editModeRef.value = EditorMode.JSON;
@@ -88,8 +91,13 @@ function pageState({ slugRef, pageModeRef, editModeRef, imageKey }: PageRefs): P
   const setMode = (toMode: PageMode) => {
     const fromMode = pageModeRef.value;
 
-    if (fromMode === PageMode.EDIT && toMode === PageMode.VIEW) {
-      setEditMode(EditorMode.FORM);
+    if (fromMode === PageMode.EDIT) {
+      if (toMode === PageMode.VIEW) {
+        setEditMode(EditorMode.FORM);
+      }
+      deactivateNavigationWarning();
+    } else if (toMode === PageMode.EDIT) {
+      activateNavigationWarning();
     }
 
     pageModeRef.value = toMode;