added delete message socket, message deletion is now done by socket not api

client/src/components/chat/ContactsList.tsx

@@ -99,9 +99,7 @@ function ContactsList({
         updateContactStatus(contact, true);
       }}
     >
-      <span className="flex-shrink-0">
-        {contact.user_id} {contact.username}
-      </span>
+      <span className="flex-shrink-0">{contact.username}</span>
       {contact.type === 'group' ? (
         <img src={GroupIcon} alt="Group icon" className="ml-2 invert w-5" />
       ) : null}

client/src/components/chat/MessagesArea.tsx

@@ -37,6 +37,8 @@ function MessagesArea({
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [shouldScrollToBottom, setShouldScrollToBottom] = useState(true);
   const previousMessagesLength = useRef(messages.length);
+  const [deleteMessageLoading, setDeleteMessageLoading] =
+    useState<boolean>(false);
 
   const scrollToBottom = () => {
     const container = containerRef.current;
@@ -73,12 +75,22 @@ function MessagesArea({
 
   const deleteMessage = async (message_id: number) => {
     try {
-      const response = await axiosClient.delete(
-        `/api/chat/messages/${message_id}`,
-      );
-      console.log('Delete message response: ', response.data);
-      setMessages((prevMessages) =>
-        prevMessages.filter((message) => message.message_id !== message_id),
+      setDeleteMessageLoading(true);
+      console.log('delete message: ', message_id);
+      socket?.emit(
+        'delete message',
+        {
+          message_id,
+          conversation_id: currentContact?.conversation_id,
+        },
+        (response: { status: string; message: string }) => {
+          if (response.status == 'ok') {
+            setDeleteMessageLoading(false);
+          } else {
+            setDeleteMessageLoading(false);
+            console.error('Failed to delete message: ', response.message);
+          }
+        },
       );
     } catch (e) {
       if (e instanceof Error) {
@@ -186,6 +198,18 @@ function MessagesArea({
       }
     });
 
+    socket.on(
+      'delete message',
+      (msg: { conversation_id: number; message_id: number }) => {
+        console.log('deleted message from state');
+        setMessages((prevMessages) =>
+          prevMessages.filter(
+            (message) => message.message_id !== msg.message_id,
+          ),
+        );
+      },
+    );
+
     return () => {
       if (!socket) {
         console.error('Socket not initialized');

client/src/components/chat/UserProfile.tsx

@@ -9,6 +9,7 @@ function UserProfile() {
 
   function logout() {
     Cookies.remove('token');
+    localStorage.removeItem('contact');
     window.location.reload();
   }
   return (

server/db/db.js

@@ -720,6 +720,7 @@ async function deleteMessage(user_id, message_id) {
       console.log("Message deleted successfully");
     } else {
       console.log("Failed to delete message");
+      return { message: "Failed to delete message" };
     }
   } catch (e) {
     console.error("Failed to delete message ", e);

server/socket/socket.js

@@ -1,7 +1,13 @@
-const { insertMessage, getConversationsForUser } = require("../db/db");
+const {
+  insertMessage,
+  getConversationsForUser,
+  deleteContact,
+  deleteMessage,
+} = require("../db/db");
 const { isValidUsername } = require("../utils/filter");
 const { verifyJwtToken } = require("../auth/jwt");
 const console = require("node:console");
+const { call } = require("express");
 
 function initializeSocket(io) {
   io.use((socket, next) => {
@@ -147,6 +153,34 @@ function initializeSocket(io) {
       }
     });
 
+    socket.on("delete message", async (msg, callback) => {
+      console.log("(socket) delete message for message_id: ", msg);
+      const { conversation_id, message_id } = msg;
+      if (!message_id) {
+        return callback({ status: "error", message: "No message id provided" });
+      }
+      if (!conversation_id) {
+        return callback({
+          status: "error",
+          message: "No conversation id provided",
+        });
+      }
+
+      const result = await deleteMessage(socket.user_id, message_id);
+      if (result?.message !== undefined) {
+        return callback({ status: "error", message: result.message });
+      } else {
+        io.to(conversation_id).emit("delete message", {
+          conversation_id,
+          message_id,
+        });
+        return callback({
+          status: "ok",
+          message: "Successfully deleted message",
+        });
+      }
+    });
+
     socket.on("disconnect", (reason) => {
       console.log("(socket)", socket.id, " disconnected due to: ", reason);
     });