revite/src/components/common/messaging/MessageBox.tsx

97 lines
2.8 KiB
TypeScript
Raw Normal View History

2021-06-20 15:30:42 -04:00
import { useContext } from "preact/hooks";
import { Channel } from "revolt.js";
import { ulid } from "ulid";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { takeError } from "../../../context/revoltjs/util";
import { defer } from "../../../lib/defer";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { SingletonMessageRenderer, SMOOTH_SCROLL_ON_RECEIVE } from "../../../lib/renderer/Singleton";
import { connectState } from "../../../redux/connector";
import { WithDispatcher } from "../../../redux/reducers";
2021-06-20 15:36:52 -04:00
import IconButton from "../../ui/IconButton";
2021-06-20 15:30:42 -04:00
import TextArea from "../../ui/TextArea";
2021-06-20 15:36:52 -04:00
import { Send } from '@styled-icons/feather';
2021-06-20 15:30:42 -04:00
type Props = WithDispatcher & {
channel: Channel;
draft?: string;
};
function MessageBox({ channel, draft, dispatcher }: Props) {
const client = useContext(AppContext);
function setMessage(content?: string) {
if (content) {
dispatcher({
type: "SET_DRAFT",
channel: channel._id,
content
});
} else {
dispatcher({
type: "CLEAR_DRAFT",
channel: channel._id
});
}
}
async function send() {
const nonce = ulid();
const content = draft?.trim() ?? '';
if (content.length === 0) return;
setMessage();
dispatcher({
type: "QUEUE_ADD",
nonce,
channel: channel._id,
message: {
_id: nonce,
channel: channel._id,
author: client.user!._id,
content
}
});
defer(() => SingletonMessageRenderer.jumpToBottom(channel._id, SMOOTH_SCROLL_ON_RECEIVE));
// Sounds.playOutbound();
try {
await client.channels.sendMessage(channel._id, {
content,
nonce
});
} catch (error) {
dispatcher({
type: "QUEUE_FAIL",
error: takeError(error),
nonce
});
}
}
return (
2021-06-20 15:36:52 -04:00
<div style={{ display: 'flex' }}>
<TextArea
value={draft}
onKeyDown={e => {
if (!e.shiftKey && e.key === "Enter" && !isTouchscreenDevice) {
e.preventDefault();
return send();
}
}}
onChange={e => setMessage(e.currentTarget.value)} />
<IconButton onClick={send}>
<Send size={20} />
</IconButton>
</div>
2021-06-20 15:30:42 -04:00
)
}
export default connectState<Omit<Props, "dispatcher" | "draft">>(MessageBox, (state, { channel }) => {
return {
draft: state.drafts[channel._id]
}
}, true)