fix(history): fix multiple adding of messages

ph1p · Aug 29, 2019 · 98ac876 · 98ac876
1 parent f724766
commit 98ac876
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 13 deletions.
diff --git a/src/code.ts b/src/code.ts
@@ -9,6 +9,7 @@ figma.showUI(__html__, {
 async function main() {
   // random user id for current user
   let instanceId = await figma.clientStorage.getAsync('id');
+  // figma.root.setPluginData('history', '');
   let history = figma.root.getPluginData('history');
   let roomName = figma.root.getPluginData('roomName');
   let secret = figma.root.getPluginData('secret');

diff --git a/src/components/message.tsx b/src/components/message.tsx
@@ -6,8 +6,14 @@ export default function Message({ data, instanceId }) {
   const colorClass = colors[data.user.color] || 'blue';
 
   return (
-    <div className={`message ${data.id === instanceId ? 'me' : colorClass}`}>
-      {username ? <div className="user">{username}</div> : ''}
+    <div
+      className={`message ${
+        data.id === instanceId
+          ? 'me'
+          : colorClass
+      }`}
+    >
+      {data.id !== instanceId ? <div className="user">{username}</div> : ''}
       {data.message.selection ? (
         <span
           onClick={() =>

diff --git a/src/ui.tsx b/src/ui.tsx
@@ -95,7 +95,12 @@ const init = (SERVER_URL = 'https://figma-chat.ph1p.dev/') => {
         }
 
         if (isMainReady && pmessage.type === 'root-data') {
-          const { roomName: dataRoomName = '', secret: dataSecret = '', history = [], instanceId = '' } = {
+          const {
+            roomName: dataRoomName = '',
+            secret: dataSecret = '',
+            history = [],
+            instanceId = ''
+          } = {
             ...pmessage.payload,
             ...(!IS_PROD
               ? {
@@ -119,7 +124,7 @@ const init = (SERVER_URL = 'https://figma-chat.ph1p.dev/') => {
      * Append message
      * @param data
      */
-    function appendMessage({ message, user = {}, id }) {
+    function appendMessage({ message, user = {}, id }, sender = false) {
       const decryptedMessage = encryptor.decrypt(message);
 
       // silent on error
@@ -129,14 +134,15 @@ const init = (SERVER_URL = 'https://figma-chat.ph1p.dev/') => {
         const newMessage = {
           id,
           user,
-          instanceId,
           message: {
             ...data
           }
         };
 
         setMessages(messages.concat(newMessage));
-        sendMainMessage('add-message-to-history', newMessage);
+        if (sender) {
+          sendMainMessage('add-message-to-history', newMessage);
+        }
       } catch (e) {}
     }
 
@@ -180,10 +186,19 @@ const init = (SERVER_URL = 'https://figma-chat.ph1p.dev/') => {
             message
           });
 
-          appendMessage({
-            id: instanceId,
-            message
-          });
+          appendMessage(
+            {
+              id: instanceId,
+              message,
+              user: {
+                id: socketId,
+                color: userSettings.color,
+                name: userSettings.name,
+                room: roomName
+              }
+            },
+            true
+          );
 
           setTextMessage('');
         }
@@ -224,10 +239,15 @@ const init = (SERVER_URL = 'https://figma-chat.ph1p.dev/') => {
 
     // join room
     useEffect(() => {
-      if (isMainReady && connection === ConnectionEnum.CONNECTED && roomName) {
+      if (
+        isMainReady &&
+        connection === ConnectionEnum.CONNECTED &&
+        roomName &&
+        instanceId
+      ) {
         socket.emit('join room', roomName);
       }
-    }, [isMainReady, roomName, connection]);
+    }, [isMainReady, roomName, connection, instanceId]);
 
     if (isSettingsView) {
       return (
@@ -320,7 +340,7 @@ const init = (SERVER_URL = 'https://figma-chat.ph1p.dev/') => {
               type="input"
               className="input"
               value={textMessage}
-              onChange={e => setTextMessage(e.target.value.substr(0,1000))}
+              onChange={e => setTextMessage(e.target.value.substr(0, 1000))}
               placeholder="Write something ..."
             />