Cutlery/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-09 03:04:54 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix: Comments Disappear After Edit (#3767)

Browse Source 
Co-authored-by: boc-the-git <3479092+boc-the-git@users.noreply.github.com>
This commit is contained in:
Michael Genson 2024-06-21 19:44:22 -05:00 committed by GitHub
parent 72aa1b2514
commit ba48e9414c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 8 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
View File

@ -72,7 +72,7 @@
</div> </div>
<RecipePageComments <RecipePageComments
v-if="isOwnGroup && !recipe.settings.disableComments && !isEditForm && !isCookMode" v-if="!recipe.settings.disableComments && !isEditForm && !isCookMode"
:recipe="recipe" :recipe="recipe"
class="px-1 my-4 d-print-none" class="px-1 my-4 d-print-none"
/> />

23
frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageComments.vue
View File

@ -30,7 +30,7 @@
</BaseButton> </BaseButton>
</div> </div>
</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" /> <UserAvatar size="40" :user-id="comment.userId" />
<v-card outlined class="flex-grow-1"> <v-card outlined class="flex-grow-1">
<v-card-text class="pa-3 pb-0"> <v-card-text class="pa-3 pb-0">
@ -54,9 +54,9 @@
</template> </template>
<script lang="ts"> <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 { 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 UserAvatar from "~/components/Domain/User/UserAvatar.vue";
import { NoUndefinedField } from "~/lib/api/types/non-generated"; import { NoUndefinedField } from "~/lib/api/types/non-generated";
import { usePageUser } from "~/composables/recipe-page/shared-state"; import { usePageUser } from "~/composables/recipe-page/shared-state";
@ -76,22 +76,12 @@ export default defineComponent({
setup(props) { setup(props) {
const api = useUserApi(); const api = useUserApi();
const comments = ref<RecipeCommentOut[]>([]);
const { user } = usePageUser(); const { user } = usePageUser();
const state = reactive({ const state = reactive({
comment: "", comment: "",
}); });
onMounted(async () => {
const { data } = await api.recipes.comments.byRecipe(props.recipe.slug);
if (data) {
comments.value = data;
}
});
async function submitComment() { async function submitComment() {
const { data } = await api.recipes.comments.createOne({ const { data } = await api.recipes.comments.createOne({
recipeId: props.recipe.id, recipeId: props.recipe.id,
@ -99,7 +89,8 @@ export default defineComponent({
}); });
if (data) { if (data) {
comments.value.push(data); // @ts-ignore username is always populated here
props.recipe.comments.push(data);
} }
state.comment = ""; state.comment = "";
@ -109,11 +100,11 @@ export default defineComponent({
const { response } = await api.recipes.comments.deleteOne(id); const { response } = await api.recipes.comments.deleteOne(id);
if (response?.status === 200) { 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> </script>