From e3c6d4c66c3b903b6d9c19540119d4899fccf114 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Thu, 7 Nov 2024 11:43:07 -0600
Subject: [PATCH] fix: JSON Mode Resets Page State (#4519)

---
 .../Domain/Recipe/RecipePage/RecipePage.vue           | 11 ++++++++++-
 .../RecipePageParts/RecipePageEditorToolbar.vue       |  8 ++------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
index 69dbd01c7..2a9468219 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
@@ -96,7 +96,13 @@ import RecipePageTitleContent from "./RecipePageParts/RecipePageTitleContent.vue
 import RecipePageComments from "./RecipePageParts/RecipePageComments.vue";
 import { useLoggedInState } from "~/composables/use-logged-in-state";
 import RecipePrintContainer from "~/components/Domain/Recipe/RecipePrintContainer.vue";
-import { EditorMode, PageMode, usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
+import {
+  clearPageState,
+  EditorMode,
+  PageMode,
+  usePageState,
+  usePageUser,
+} from "~/composables/recipe-page/shared-state";
 import { NoUndefinedField } from "~/lib/api/types/non-generated";
 import { Recipe } from "~/lib/api/types/recipe";
 import { useRouteQuery } from "~/composables/use-router";
@@ -170,6 +176,9 @@ export default defineComponent({
         }
       }
       deactivateNavigationWarning();
+
+      clearPageState(props.recipe.slug || "");
+      console.debug("reset RecipePage state during unmount");
     });
 
     /** =============================================================
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageEditorToolbar.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageEditorToolbar.vue
index f6c658648..a3508e434 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageEditorToolbar.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageEditorToolbar.vue
@@ -32,8 +32,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onUnmounted } from "@nuxtjs/composition-api";
-import { clearPageState, usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
+import { computed, defineComponent } from "@nuxtjs/composition-api";
+import { usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
 import { NoUndefinedField } from "~/lib/api/types/non-generated";
 import { Recipe } from "~/lib/api/types/recipe";
 import { useUserApi } from "~/composables/api";
@@ -75,10 +75,6 @@ export default defineComponent({
       return households.value.find((h) => h.id === owner.householdId);
     });
 
-    onUnmounted(() => {
-      clearPageState(props.recipe.slug);
-      console.debug("reset RecipePage state during unmount");
-    });
     async function uploadImage(fileObject: File) {
       if (!props.recipe || !props.recipe.slug) {
         return;