[FIX] Re-rendering of InAppChat (#93)

Fix problem with re-rendering causing major lag.
RocketChat · Mar 18, 2022 · 2a31cab · 2a31cab
1 parent 140f0ad
commit 2a31cab
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 46 deletions.
diff --git a/app/components/inappchat/inappchat.js b/app/components/inappchat/inappchat.js
@@ -2,12 +2,11 @@ import { useEffect, useState } from "react";
 import { Rocketchat } from "@rocket.chat/sdk";
 import { getMessages, sendMessage } from "./lib/api";
 import styles from "../../styles/Inappchat.module.css";
-import { emojify, emojis, messagesSortedByDate, rcURL, useSsl } from "./helpers";
+import { emojify, messagesSortedByDate, rcURL, useSsl } from "./helpers";
 import {
   Message,
   MessageBody,
   MessageContainer,
-  TextInput,
   Icon,
   Box,
   MessageHeader,
@@ -19,12 +18,11 @@ import {
   MessageUsername,
 } from "./lib/fuselage";
 import MDPreview from "../mdpreview";
+import InappchatTextInput from "./inappchattextinput";
 
 const rcClient = new Rocketchat({ logger: console, protocol: "ddp" });
 
 const InAppChat = ({ closeChat, cookies, rid }) => {
-  const [message, setMessage] = useState("");
-  const [emojiClicked, setEmojiClicked] = useState(false);
   const [messages, setMessages] = useState([]);
 
   useEffect(() => {
@@ -51,7 +49,6 @@ const InAppChat = ({ closeChat, cookies, rid }) => {
       return;
     }
     const msg = await sendMessage(rid, message, cookies);
-    setMessage("");
     setMessages([...messages, msg.message]);
   };
 
@@ -97,47 +94,7 @@ const InAppChat = ({ closeChat, cookies, rid }) => {
           )}
         </Box>
       </div>
-      {emojiClicked && (
-        <div className={styles.emojisHolder}>
-          {emojis.map((e) => (
-            <div
-              key={e.id}
-              className={styles.animatedEmoji}
-              dangerouslySetInnerHTML={{ __html: emojify(e.value) }}
-              onClick={() => {
-                setEmojiClicked((prevState) => !prevState);
-                sendMsg(e.value);
-              }}
-            />
-          ))}
-        </div>
-      )}
-      <TextInput
-        placeholder="Message"
-        value={message}
-        onChange={(e) => {
-          setMessage(e.target.value);
-        }}
-        onKeyDown={(e) => {
-          if (e.keyCode === 13) {
-            sendMsg(message);
-          }
-        }}
-        addon={
-          <>
-            {message.trim() !== "" ? (
-              <Icon onClick={() => sendMsg(message)} name="send" size="x20" />
-            ) : (
-              <Icon
-                name="emoji"
-                size="x20"
-                onClick={(e) => setEmojiClicked((prevState) => !prevState)}
-              />
-            )}
-          </>
-        }
-        w={"400px"}
-      />
+      <InappchatTextInput sendMsg={sendMsg} />
     </div>
   );
 };

diff --git a/app/components/inappchat/inappchattextinput.js b/app/components/inappchat/inappchattextinput.js
@@ -0,0 +1,64 @@
+import { useState } from "react";
+import { TextInput, Icon } from "./lib/fuselage";
+import { emojify, emojis } from "./helpers";
+import styles from "../../styles/Inappchat.module.css";
+
+const InappchatTextInput = ({ sendMsg }) => {
+  const [emojiClicked, setEmojiClicked] = useState(false);
+  const [message, setMessage] = useState("");
+  return (
+    <>
+    {emojiClicked && (
+      <div className={styles.emojisHolder}>
+        {emojis.map((e) => (
+          <div
+            key={e.id}
+            className={styles.animatedEmoji}
+            dangerouslySetInnerHTML={{ __html: emojify(e.value) }}
+            onClick={() => {
+              setEmojiClicked((prevState) => !prevState);
+              sendMsg(e.value);
+            }}
+          />
+        ))}
+      </div>
+    )}
+    <TextInput
+      placeholder="Message"
+      value={message}
+      onChange={(e) => {
+        setMessage(e.target.value);
+      }}
+      onKeyDown={(e) => {
+        if (e.keyCode === 13) {
+          sendMsg(message);
+          setMessage("");
+        }
+      }}
+      addon={
+        <>
+          {message.trim() !== "" ? (
+            <Icon
+              onClick={() => {
+                sendMsg(message);
+                setMessage("");
+              }}
+              name="send"
+              size="x20"
+            />
+          ) : (
+            <Icon
+              name="emoji"
+              size="x20"
+              onClick={(e) => setEmojiClicked((prevState) => !prevState)}
+            />
+          )}
+        </>
+      }
+      w={"400px"}
+    />
+    </>
+  );
+};
+
+export default InappchatTextInput;