delete message

app/controllers/chat.js

@@ -115,6 +115,12 @@ export default class ChatController extends SiteController {
       this.getRoomView.bind(this),
     );
 
+    router.delete(
+      '/message/:messageId',
+      // limiterService.create(limiterService.config.chat.deleteChatMessage),
+      this.deleteChatMessage.bind(this),
+    );
+
     router.delete(
       '/room/:roomId',
       // limiterService.create(limiterService.config.chat.deleteRoom),
@@ -258,6 +264,20 @@ export default class ChatController extends SiteController {
     }
   }
 
+  async deleteChatMessage (req, res) {
+    const { chat: chatService } = this.dtp.services;
+    try {
+      await chatService.removeMessage(res.locals.message);
+      res.status(200).json({ success: true });
+    } catch (error) {
+      this.log.error('failed to destroy chat room', { error });
+      res.status(error.statusCode || 500).json({
+        success: false,
+        message: error.message,
+      });
+    }
+  }
+
   async deleteRoom (req, res) {
     const { chat: chatService } = this.dtp.services;
     try {

app/services/chat.js

@@ -550,5 +550,15 @@ export default class ChatService extends SiteService {
 
     this.log.debug('removing chat message', { messageId: message._id });
     await ChatMessage.deleteOne({ _id: message._id });
+
+    const displayList = this.createDisplayList('remove-chat-message');
+    displayList.removeElement(`.chat-message[data-message-id="${message._id}"]`);
+
+    this.dtp.emitter
+    .to(message.channel._id.toString())
+    .emit('chat-control', {
+      displayList,
+      audio: { playSound: 'message-remove' },
+    });
   }
 }

app/views/chat/components/message.pug

@@ -57,7 +57,7 @@ mixin renderChatMessage (message)
         +renderReactionBar(message)
 
     .message-menu
-      div(uk-grid).uk-grid-small.uk-flex-middle
+      .uk-flex.uk-flex-middle
         .uk-width-auto
           button(
             type="button",
@@ -82,6 +82,14 @@ mixin renderChatMessage (message)
             uk-tooltip="React with smiley"
             onclick="return dtp.app.toggleMessageReaction(event);",
           ).message-menu-button 😃
+        .uk-width-auto
+          button(
+            type="button",
+            data-message-id= message._id,
+            data-emoji="🤣",
+            uk-tooltip="React with laugh"
+            onclick="return dtp.app.toggleMessageReaction(event);",
+          ).message-menu-button 🤣
         .uk-width-auto
           button(
             type="button",
@@ -112,4 +120,8 @@ mixin renderChatMessage (message)
                 li
                   a(href="") Edit
                 li
-                  a(href="") Delete
+                  a(
+                    href="",
+                    data-message-id= message._id,
+                    onclick="return dtp.app.deleteChatMessage(event);",
+                  ) Delete

client/js/chat-client.js

@@ -25,6 +25,7 @@ export class ChatApp extends DtpApp {
   static get SFX_CHAT_MESSAGE ( ) { return 'chat-message'; }
   static get SFX_CHAT_REACTION ( ) { return 'reaction'; }
   static get SFX_CHAT_REACTION_REMOVE ( ) { return 'reaction-remove'; }
+  static get SFX_CHAT_MESSAGE_REMOVE ( ) { return 'message-remove'; }
 
   constructor (user) {
     super(DTP_COMPONENT_NAME, user);
@@ -75,6 +76,7 @@ export class ChatApp extends DtpApp {
         this.audio.loadSound(ChatApp.SFX_CHAT_MESSAGE, '/static/sfx/chat-message.mp3'),
         this.audio.loadSound(ChatApp.SFX_CHAT_REACTION, '/static/sfx/reaction.mp3'),
         this.audio.loadSound(ChatApp.SFX_CHAT_REACTION_REMOVE, '/static/sfx/reaction-remove.mp3'),
+        this.audio.loadSound(ChatApp.SFX_CHAT_MESSAGE_REMOVE, '/static/sfx/message-deleted.mp3'),
       ]);
     } catch (error) {
       this.log.error('startAudio', 'failed to load sound', { error });
@@ -262,6 +264,22 @@ export class ChatApp extends DtpApp {
     return true;
   }
 
+  async deleteChatMessage (event) {
+    const target = event.currentTarget || event.target;
+    const messageId = target.getAttribute('data-message-id');
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    try {
+      const response = await fetch(`/chat/message/${messageId}`, { method: 'DELETE' });
+      await this.processResponse(response);
+    } catch (error) {
+      this.log.error('deleteChatMessage', 'failed to delete chat message', { error });
+      UIkit.modal.alert(`Failed to delete chat message: ${error.message}`);
+    }
+  }
+
   async toggleMessageReaction (event) {
     const target = event.currentTarget || event.target;
     const messageId = target.getAttribute('data-message-id');