Make functions in Room component pure

This commit is contained in:
Franck Royer 2021-04-27 13:36:25 +10:00
parent f0c0adf226
commit 5635ca028b
No known key found for this signature in database
GPG Key ID: A82ED75A8DFC50A4
2 changed files with 39 additions and 29 deletions

View File

@ -4,16 +4,18 @@ import { useWaku } from './WakuContext';
interface Props {
messageHandler: (msg: string) => void;
sendMessage: () => void;
sendMessage: (() => Promise<void>) | undefined;
}
export default function MessageInput(props: Props) {
const [inputText, setInputText] = useState<string>('');
const { waku } = useWaku();
const sendMessage = () => {
props.sendMessage();
setInputText('');
const sendMessage = async () => {
if (props.sendMessage) {
await props.sendMessage();
setInputText('');
}
};
const messageHandler = (event: ChangeEvent<HTMLInputElement>) => {
@ -21,9 +23,9 @@ export default function MessageInput(props: Props) {
props.messageHandler(event.target.value);
};
const keyPressHandler = (event: KeyboardEvent<HTMLInputElement>) => {
const keyPressHandler = async (event: KeyboardEvent<HTMLInputElement>) => {
if (event.key === 'Enter') {
sendMessage();
await sendMessage();
}
};

View File

@ -16,27 +16,6 @@ export default function Room(props: Props) {
let [messageToSend, setMessageToSend] = useState<string>('');
const { waku } = useWaku();
const messageHandler = (msg: string) => {
setMessageToSend(msg);
};
const sendMessage = async () => {
if (messageToSend.startsWith('/')) {
props.commandHandler(messageToSend);
} else {
const chatMessage = new ChatMessage(
new Date(),
props.nick,
messageToSend
);
const wakuMsg = WakuMessage.fromBytes(
chatMessage.encode(),
ChatContentTopic
);
await waku!.relay.send(wakuMsg);
}
};
return (
<div
className="chat-container"
@ -47,14 +26,43 @@ export default function Room(props: Props) {
</div>
<div className="chat-input" style={{ flexGrow: 0, height: '120px' }}>
<MessageInput
messageHandler={messageHandler}
sendMessage={sendMessage}
messageHandler={setMessageToSend}
sendMessage={
waku
? async () => {
return handleMessage(
messageToSend,
props.nick,
props.commandHandler,
waku.relay.send.bind(waku.relay)
);
}
: undefined
}
/>
</div>
</div>
);
}
async function handleMessage(
message: string,
nick: string,
commandHandler: (cmd: string) => void,
messageSender: (msg: WakuMessage) => Promise<void>
) {
if (message.startsWith('/')) {
commandHandler(message);
} else {
const chatMessage = new ChatMessage(new Date(), nick, message);
const wakuMsg = WakuMessage.fromBytes(
chatMessage.encode(),
ChatContentTopic
);
return messageSender(wakuMsg);
}
}
interface LinesProps {
messages: ChatMessage[];
}