chore: delivery receipt

Author: muke1908

backend/api/messaging/index.js

@@ -45,7 +45,7 @@ router.post(
     const { sid } = clients.getReceiverByChannel(channel, sender);
     socketEmit('chat-message', sid, dataToPublish);
 
-    return res.send({ message: 'message sent' });
+    return res.send({ message: 'message sent', id });
   })
 );
 

backend/socket.io/listeners.js

@@ -34,11 +34,13 @@ const connectionListener = (socket, io) => {
       receiverSocket.emit('on-alice-join', { publicKey });
     }
   });
+
   socket.on('received', ({ channel, sender, id }) => {
     const { sid } = clients.getSenderByChannel(channel, sender);
     const senderSocket = io.sockets.sockets[sid];
     senderSocket.emit('delivered', id);
   });
+
   socket.on('disconnect', () => {
     const { channelID, userID } = socket;
     if (!(channelID && userID)) {

client/src/components/Messaging/EmojiRow/index.js

@@ -3,30 +3,14 @@ import styles from './Style.module.css';
 import Emoji from '../Emoji';
 import '../Emoji/index.js';
 import { ThemeContext } from '../../../ThemeContext.js';
+const emojis = ['🙂', '😀', '😂', '😍', '😘', '😜', '🧐', '😎', '🤩', '😏', '😒', '😔', '😩', '😭'];
 
 const EmojiRow = ({ text, setText }) => {
   const [darkMode] = useContext(ThemeContext);
 
   const selectEmoji = (symbol) => {
     setText(text + symbol);
   };
-  const emojis = [
-    '🙂',
-    '😀',
-    '😂',
-    '😍',
-    '😘',
-    '😜',
-    '🧐',
-    '😎',
-    '🤩',
-    '🥳',
-    '😏',
-    '😒',
-    '😔',
-    '😩',
-    '😭'
-  ];
 
   return (
     <div className={`${styles.emojiRow} ${!darkMode && styles.lightEmojiRow}`}>

client/src/components/Messaging/Message.js

@@ -34,8 +34,7 @@ export const Message = ({
   }, []);
 
   const [darkMode] = useContext(ThemeContext);
-  // const regex = /\bdata:image\b/g;
-  // const isImg = body.match(regex);
+
   return (
     <div className={owner === true ? styles.messageRight : styles.messageLeft}>
       <div className={styles.messageInfo}>
@@ -52,8 +51,8 @@ export const Message = ({
             </div>
           </div>
         )}
-        {owner && deliveredID.includes(id) && !sending && !failed && (
-          <div className={styles.messageDelivered}>Delivered</div>
+        {deliveredID.includes(id) && (
+          <div className={styles.messageDelivered}>Delivered&nbsp;&#10004;</div>
         )}
       </div>
     </div>

client/src/components/Messaging/styles/Message.module.css

@@ -53,7 +53,7 @@
   font-size: 13px;
 }
 .messageDelivered {
-  color: #c8afaf;
+  color: #828282;
   font-size: 13px;
 }
 

client/src/pages/messaging/index.js

@@ -110,9 +110,7 @@ const Chat = () => {
         alicePublicKey: publicKeyRef.current
       });
 
-      // TODO: need to handle image
-
-      await sendMessage({
+      const { id } = await sendMessage({
         channelID,
         userId,
         image,
@@ -125,6 +123,7 @@ const Chat = () => {
       setMessages((prevMsg) => {
         const { ...message } = prevMsg[index];
         message.local = false;
+        message.id = id;
         prevMsg[index] = message;
         return [...prevMsg];
       });
@@ -148,25 +147,7 @@ const Chat = () => {
   };
 
   const initChat = async () => {
-    // TODO: handle error
-    // const messages = await fetchMessages(pubnub, channelID);
-    //
-    // const formatMessages = messages.map((msg) => {
-    //   const {
-    //     image,
-    //     sender,
-    //     body: { box, nonce }
-    //   } = msg;
-    //
-    //   return {
-    //     encrypted: true,
-    //     encryptionDetail: { box, nonce },
-    //     sender,
-    //     image,
-    //     body: btoa(strToTypedArr(box)) // let's just stringify the array, to decrypt later
-    //   };
-    // });
-    // setMessages(formatMessages);
+    // TODO: restore previous messages from local storage
   };
 
   useEffect(() => {
@@ -190,11 +171,6 @@ const Chat = () => {
     });
     socket.on('delivered', (id) => {
       setDeliveredID((prev) => [...prev, id]);
-      setMessages((prev) => {
-        const copy = [...prev];
-        copy[copy.length - 1].id = id;
-        return [...copy];
-      });
     });
     // an event to notify that the other person is joined.
     socket.on('on-alice-join', ({ publicKey }) => {
@@ -213,6 +189,7 @@ const Chat = () => {
       getSetUsers(channelID);
     });
 
+    //handle incoming message
     socket.on('chat-message', (msg) => {
       try {
         const box = strToTypedArr(msg.message.box);
@@ -245,6 +222,7 @@ const Chat = () => {
   }, [channelID]);
 
   const alice = usersInChannel.find((u) => u.uuid !== userId);
+  console.log(messages);
   const messagesFormatted = messages.map(({ body, sender, image, local, id }, i) => {
     return {
       owner: sender === userId,

client/src/service/sendMessage.js

@@ -1,7 +1,7 @@
 import makeRequest from '../utils/makeRequest';
 
-const sendMessage = async ({ channelID, userId, image, text }) => {
-  await makeRequest('chat/message', {
+const sendMessage = ({ channelID, userId, image, text }) => {
+  return makeRequest('chat/message', {
     method: 'POST',
     body: {
       channel: channelID,