status-im
/
dappconnect-sdks
mirror of https://github.com/status-im/dappconnect-sdks.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Refactor useMessenger and ChatInput (#65)

This commit is contained in:
Szymon Szlachtowicz 2021-10-12 10:16:11 +02:00 committed by GitHub
parent 125fea98c0
commit f7916f283f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
packages/react-chat/src/components/Chat/ChatInput.tsx
View File

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

18
packages/react-chat/src/hooks/useMessenger.ts
View File

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