fix: Comments Disappear After Edit (mealie-recipes#3767)

Co-authored-by: boc-the-git <[email protected]>
michael-genson · Jun 22, 2024 · ba48e94 · ba48e94
1 parent 72aa1b2
commit ba48e94
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 17 deletions.
diff --git 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
@@ -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,30 +76,21 @@ 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,
         text: state.comment,
       });
 
       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>