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,31 +21,32 @@ 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 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>) => {
+  const onInputKeyPress = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
       if (e.key == "Enter" && !e.getModifierState("Shift")) {
         e.preventDefault();
         (e.target as HTMLTextAreaElement).style.height = "40px";
@@ -54,7 +55,9 @@ export function ChatInput({ theme, addMessage }: ChatInputProps) {
         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, {
+          text: messageText,
+          contentType: 0,
+        });
+      }
+      if (image) {
+        await messenger?.sendMessage(chatId, {
           image,
           imageType: 1,
           contentType: 2,
+        });
       }
-        : {
-            text: messageText,
-            contentType: 0,
-          };
-      await messenger?.sendMessage(chatId, content);
     },
     [chatId, messenger]
   );