From ba48e9414c63dcbff94b27bd2b3ad8803adcee80 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Fri, 21 Jun 2024 19:44:22 -0500
Subject: [PATCH] fix: Comments Disappear After Edit (#3767)

Co-authored-by: boc-the-git <3479092+boc-the-git@users.noreply.github.com>
---
 .../Domain/Recipe/RecipePage/RecipePage.vue   |  2 +-
 .../RecipePageParts/RecipePageComments.vue    | 23 ++++++-------------
 2 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
index 914de7f030c..0afc5126e3b 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
@@ -72,7 +72,7 @@
     </div>
 
     <RecipePageComments
-      v-if="isOwnGroup && !recipe.settings.disableComments && !isEditForm && !isCookMode"
+      v-if="!recipe.settings.disableComments && !isEditForm && !isCookMode"
       :recipe="recipe"
       class="px-1 my-4 d-print-none"
     />
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageComments.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageComments.vue
index 352fc821906..67075eb218f 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageComments.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageComments.vue
@@ -30,7 +30,7 @@
         </BaseButton>
       </div>
     </div>
-    <div v-for="comment in comments" :key="comment.id" class="d-flex my-2" style="gap: 10px">
+    <div v-for="comment in recipe.comments" :key="comment.id" class="d-flex my-2" style="gap: 10px">
       <UserAvatar size="40" :user-id="comment.userId" />
       <v-card outlined class="flex-grow-1">
         <v-card-text class="pa-3 pb-0">
@@ -54,9 +54,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, toRefs, onMounted, reactive } from "@nuxtjs/composition-api";
+import { defineComponent, toRefs, reactive } from "@nuxtjs/composition-api";
 import { useUserApi } from "~/composables/api";
-import { Recipe, RecipeCommentOut } from "~/lib/api/types/recipe";
+import { Recipe } from "~/lib/api/types/recipe";
 import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
 import { NoUndefinedField } from "~/lib/api/types/non-generated";
 import { usePageUser } from "~/composables/recipe-page/shared-state";
@@ -76,22 +76,12 @@ export default defineComponent({
   setup(props) {
     const api = useUserApi();
 
-    const comments = ref<RecipeCommentOut[]>([]);
-
     const { user } = usePageUser();
 
     const state = reactive({
       comment: "",
     });
 
-    onMounted(async () => {
-      const { data } = await api.recipes.comments.byRecipe(props.recipe.slug);
-
-      if (data) {
-        comments.value = data;
-      }
-    });
-
     async function submitComment() {
       const { data } = await api.recipes.comments.createOne({
         recipeId: props.recipe.id,
@@ -99,7 +89,8 @@ export default defineComponent({
       });
 
       if (data) {
-        comments.value.push(data);
+        // @ts-ignore username is always populated here
+        props.recipe.comments.push(data);
       }
 
       state.comment = "";
@@ -109,11 +100,11 @@ export default defineComponent({
       const { response } = await api.recipes.comments.deleteOne(id);
 
       if (response?.status === 200) {
-        comments.value = comments.value.filter((comment) => comment.id !== id);
+        props.recipe.comments = props.recipe.comments.filter((comment) => comment.id !== id);
       }
     }
 
-    return { api, comments, ...toRefs(state), submitComment, deleteComment, user };
+    return { api, ...toRefs(state), submitComment, deleteComment, user };
   },
 });
 </script>