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(() => {
+  const image = useMemo(
-    if (imageUint) {
+    () => (imageUint ? uintToImgUrl(imageUint) : ""),
-      return uintToImgUrl(imageUint);
+    [imageUint]
-    } else {
+  );
-      return "";
-    }
-  }, [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 onInputChange = useCallback(
-    const target = e.target;
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    target.style.height = "40px";
+      const target = e.target;
-    target.style.height = `${Math.min(target.scrollHeight, 438)}px`;
+      target.style.height = "40px";
-    setInputHeight(target.scrollHeight);
+      target.style.height = `${Math.min(target.scrollHeight, 438)}px`;
-    setContent(target.value);
+      setInputHeight(target.scrollHeight);
-  };
+      setContent(target.value);
+    },
+    []
+  );
 
-  const onInputKeyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+  const onInputKeyPress = useCallback(
-    if (e.key == "Enter" && !e.getModifierState("Shift")) {
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-      e.preventDefault();
+      if (e.key == "Enter" && !e.getModifierState("Shift")) {
-      (e.target as HTMLTextAreaElement).style.height = "40px";
+        e.preventDefault();
-      setInputHeight(40);
+        (e.target as HTMLTextAreaElement).style.height = "40px";
-      addMessage(content, imageUint);
+        setInputHeight(40);
-      setImageUint(undefined);
+        addMessage(content, imageUint);
-      setContent("");
+        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
+      if (messageText) {
-        ? {
+        await messenger?.sendMessage(chatId, {
-            image,
+          text: messageText,
-            imageType: 1,
+          contentType: 0,
-            contentType: 2,
+        });
-          }
+      }
-        : {
+      if (image) {
-            text: messageText,
+        await messenger?.sendMessage(chatId, {
-            contentType: 0,
+          image,
-          };
+          imageType: 1,
-      await messenger?.sendMessage(chatId, content);
+          contentType: 2,
+        });
+      }
     },
     [chatId, messenger]
   );