Refactor useMessenger and ChatInput (#65)

packages/react-chat/src/components/Chat/ChatInput.tsx

@@ -1,5 +1,5 @@
 import { Picker } from "emoji-mart";
-import React, { useMemo, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import styled from "styled-components";
 
 import { uintToImgUrl } from "../../helpers/uintToImgUrl";
@@ -21,40 +21,43 @@ export function ChatInput({ theme, addMessage }: ChatInputProps) {
   const [inputHeight, setInputHeight] = useState(40);
   const [imageUint, setImageUint] = useState<undefined | Uint8Array>(undefined);
 
-  const image = useMemo(() => {
-    if (imageUint) {
-      return uintToImgUrl(imageUint);
-    } else {
-      return "";
-    }
-  }, [imageUint]);
+  const image = useMemo(
+    () => (imageUint ? uintToImgUrl(imageUint) : ""),
+    [imageUint]
+  );
 
-  const addEmoji = (e: any) => {
+  const addEmoji = useCallback((e: any) => {
     const sym = e.unified.split("-");
     const codesArray: any[] = [];
     sym.forEach((el: string) => codesArray.push("0x" + el));
     const emoji = String.fromCodePoint(...codesArray);
-    setContent(content + emoji);
-  };
+    setContent((p) => p + emoji);
+  }, []);
 
-  const onInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const target = e.target;
-    target.style.height = "40px";
-    target.style.height = `${Math.min(target.scrollHeight, 438)}px`;
-    setInputHeight(target.scrollHeight);
-    setContent(target.value);
-  };
+  const onInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const target = e.target;
+      target.style.height = "40px";
+      target.style.height = `${Math.min(target.scrollHeight, 438)}px`;
+      setInputHeight(target.scrollHeight);
+      setContent(target.value);
+    },
+    []
+  );
 
-  const onInputKeyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key == "Enter" && !e.getModifierState("Shift")) {
-      e.preventDefault();
-      (e.target as HTMLTextAreaElement).style.height = "40px";
-      setInputHeight(40);
-      addMessage(content, imageUint);
-      setImageUint(undefined);
-      setContent("");
-    }
-  };
+  const onInputKeyPress = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key == "Enter" && !e.getModifierState("Shift")) {
+        e.preventDefault();
+        (e.target as HTMLTextAreaElement).style.height = "40px";
+        setInputHeight(40);
+        addMessage(content, imageUint);
+        setImageUint(undefined);
+        setContent("");
+      }
+    },
+    []
+  );
 
   return (
     <View>

packages/react-chat/src/hooks/useMessenger.ts

@@ -185,19 +185,21 @@ export function useMessenger(chatId: string, chatIdList: string[]) {
   }, [messenger]);
 
   const sendMessage = useCallback(
-    async (messageText: string, image?: Uint8Array) => {
+    async (messageText?: string, image?: Uint8Array) => {
       // TODO: A message can either contain text or media, not both.
-      const content = image
-        ? {
-            image,
-            imageType: 1,
-            contentType: 2,
-          }
-        : {
-            text: messageText,
-            contentType: 0,
-          };
-      await messenger?.sendMessage(chatId, content);
+      if (messageText) {
+        await messenger?.sendMessage(chatId, {
+          text: messageText,
+          contentType: 0,
+        });
+      }
+      if (image) {
+        await messenger?.sendMessage(chatId, {
+          image,
+          imageType: 1,
+          contentType: 2,
+        });
+      }
     },
     [chatId, messenger]
   );