From 311bc05d251887ec8094ab73ec92f53d60a1a6bc Mon Sep 17 00:00:00 2001 From: Severino Date: Fri, 13 Dec 2024 16:25:41 +0100 Subject: [PATCH] reworked handleComment and fixed duplicate add comment --- resources/js/bootstrap/stores/entity.js | 78 +++++++++++------------- resources/js/bootstrap/websocket.js | 2 + resources/js/components/EntityDetail.vue | 2 +- resources/js/handlers/entity.js | 12 +++- resources/js/helpers/comment.js | 12 ++++ 5 files changed, 58 insertions(+), 48 deletions(-) create mode 100644 resources/js/helpers/comment.js diff --git a/resources/js/bootstrap/stores/entity.js b/resources/js/bootstrap/stores/entity.js index e1e1f877d..cd5bd8381 100644 --- a/resources/js/bootstrap/stores/entity.js +++ b/resources/js/bootstrap/stores/entity.js @@ -21,6 +21,8 @@ import { only, } from '@/helpers/helpers.js'; +import { getEditedComment } from '@/helpers/comment.js'; + import { addEntity, addEntityType, @@ -60,7 +62,7 @@ function updateSelectionTypeIdList(selection) { const handleAddEntityType = (context, typeData, attributes = []) => { context.entityTypeAttributes[typeData.id] = attributes.slice(); context.entityTypes[typeData.id] = typeData; -} +}; const handlePostDelete = (context, entityId) => { const currentRoute = router.currentRoute.value; @@ -87,7 +89,7 @@ const handlePostDelete = (context, entityId) => { } } } -} +}; export const useEntityStore = defineStore('entity', { state: _ => ({ @@ -180,7 +182,7 @@ export const useEntityStore = defineStore('entity', { colors = state.entityTypeColors[id]; } return colors; - } + }; }, getEntityTypeName(state) { return id => { @@ -584,60 +586,48 @@ export const useEntityStore = defineStore('entity', { }, async removeReference(id, entityId, attributeUrl) { return deleteReferenceFromEntity(id).then(_ => { - this.handleReference(entityId, attributeUrl, 'delete', {id: id}); + this.handleReference(entityId, attributeUrl, 'delete', { id: id }); }); }, - handleComment(entityId, comment, action, data) { - const replyTo = data.replyTo; + async addComment(entityId, comment, { replyTo = null } = {}) { const entity = this.getEntity(entityId); - if(action == 'add') { - if(replyTo) { - const op = entity.comments.find(c => c.id == replyTo); - if(op.replies) { - op.replies.push(comment); - } - op.replies_count++; - } else { - if(!entity.comments) { - entity.comments = []; - } - entity.comments.push(comment); - entity.comments_count++; + if(replyTo) { + const op = entity.comments.find(c => c.id == replyTo); + if(op.replies) { + op.replies.push(comment); } - } else if(action == 'update' || action == 'delete') { - let editedComment = null; - if(replyTo) { - const op = entity.comments.find(c => c.id == replyTo); - if(op.replies) { - editedComment = op.replies.find(reply => reply.id == comment.id); - } - } else { - editedComment = entity.comments.find(c => c.id == comment.id); - } - if(editedComment) { - if(action == 'update') { - editedComment.content = comment.content; - editedComment.updated_at = comment.updated_at; - } else if(action == 'delete') { - editedComment.content = null; - editedComment.updated_at = Date(); - editedComment.deleted_at = Date(); - } + op.replies_count++; + } else { + if(!entity.comments) { + entity.comments = []; } + // We dont need to add the comment manually + // as it is broadcasted via websocket + entity.comments.push(comment); + entity.comments_count++; } if(this.selectedEntity) { this.selectedEntity.comments = entity.comments; } }, - async addComment() { + async updateComment(entityId, comment, { replyTo = null } = {}) { + const entity = this.getEntity(entityId); + let editedComment = getEditedComment(entity, comment, replyTo); + if(editedComment) { + editedComment.content = comment.content; + editedComment.updated_at = comment.updated_at; + } }, - async editComment() { - // TODO - }, - async deleteComment() { - // TODO + async deleteComment(entityId, comment, { replyTo = null } = {}) { + const entity = this.getEntity(entityId); + let editedComment = getEditedComment(entity, comment, replyTo); + if(editedComment) { + editedComment.content = null; + editedComment.updated_at = Date(); + editedComment.deleted_at = Date(); + } }, async setById(entityId) { let entity = this.entities[entityId]; diff --git a/resources/js/bootstrap/websocket.js b/resources/js/bootstrap/websocket.js index 8eb92b6ac..cc3959738 100644 --- a/resources/js/bootstrap/websocket.js +++ b/resources/js/bootstrap/websocket.js @@ -2,6 +2,8 @@ import Echo from 'laravel-echo'; import Pusher from 'pusher-js'; +// Why do we handle this as window objects and not with +// import/export syntax and pollute the window object? [SO] window.Pusher = Pusher; window.Echo = new Echo({ diff --git a/resources/js/components/EntityDetail.vue b/resources/js/components/EntityDetail.vue index 07d85ba57..61d7473b9 100644 --- a/resources/js/components/EntityDetail.vue +++ b/resources/js/components/EntityDetail.vue @@ -877,7 +877,7 @@ }; const addComment = event => { - entityStore.handleComment(state.entity.id, event.comment, 'add', { + entityStore.addComment(state.entity.id, event.comment, { replyTo: event.replyTo, }); }; diff --git a/resources/js/handlers/entity.js b/resources/js/handlers/entity.js index 37530951d..68c834731 100644 --- a/resources/js/handlers/entity.js +++ b/resources/js/handlers/entity.js @@ -119,8 +119,10 @@ export const handleEntityReferenceDeleted = { export const handleEntityCommentAdded = { 'CommentAdded': e => { + if(e.user.id == useUserStore().getCurrentUserId) return; + const entityStore = useEntityStore(); - entityStore.handleComment(e.comment.commentable_id, e.comment, 'add', { + entityStore.addComment(e.comment.commentable_id, e.comment, { replyTo: e.replyTo, }); @@ -138,8 +140,10 @@ export const handleEntityCommentAdded = { export const handleEntityCommentUpdated = { 'CommentUpdated': e => { + if(e.user.id == useUserStore().getCurrentUserId) return; + const entityStore = useEntityStore(); - entityStore.handleComment(e.comment.commentable_id, e.comment, 'update', { + entityStore.updateComment(e.comment.commentable_id, e.comment, { replyTo: e.replyTo, }); @@ -157,8 +161,10 @@ export const handleEntityCommentUpdated = { export const handleEntityCommentDeleted = { 'CommentDeleted': e => { + if(e.user.id == useUserStore().getCurrentUserId) return; + const entityStore = useEntityStore(); - entityStore.handleComment(e.comment.commentable_id, e.comment, 'delete', { + entityStore.deleteComment(e.comment.commentable_id, e.comment, { replyTo: e.replyTo, }); diff --git a/resources/js/helpers/comment.js b/resources/js/helpers/comment.js new file mode 100644 index 000000000..f024d1e9d --- /dev/null +++ b/resources/js/helpers/comment.js @@ -0,0 +1,12 @@ +export function getEditedComment(entity, comment, replyTo) { + let editedComment = null; + if(replyTo) { + const op = entity.comments.find(c => c.id == replyTo); + if(op.replies) { + editedComment = op.replies.find(reply => reply.id == comment.id); + } + } else { + editedComment = entity.comments.find(c => c.id == comment.id); + } + return editedComment; +} \ No newline at end of file