64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
import SendIcon from "@mui/icons-material/Send";
|
|
import { IconButton, TextField } from "@mui/material";
|
|
import React, { type FormEvent } from "react";
|
|
import { MatrixApiEvent } from "../../api/matrix/MatrixApiEvent";
|
|
import type { Room } from "../../api/matrix/MatrixApiRoom";
|
|
import { useAlert } from "../../hooks/contexts_provider/AlertDialogProvider";
|
|
import { useLoadingMessage } from "../../hooks/contexts_provider/LoadingMessageProvider";
|
|
|
|
export function SendMessageForm(p: { room: Room }): React.ReactElement {
|
|
const loadingMessage = useLoadingMessage();
|
|
const alert = useAlert();
|
|
|
|
const [text, setText] = React.useState("");
|
|
|
|
const handleTextSubmit = async (e: FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (text === "") return;
|
|
|
|
loadingMessage.show("Sending message...");
|
|
|
|
try {
|
|
await MatrixApiEvent.SendTextMessage(p.room, text);
|
|
|
|
setText("");
|
|
} catch (e) {
|
|
console.error(`Failed to send message! ${e}`);
|
|
alert(`Failed to send message! ${e}`);
|
|
} finally {
|
|
loadingMessage.hide();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={handleTextSubmit}>
|
|
<div
|
|
style={{
|
|
padding: "10px",
|
|
paddingLeft: "20px",
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
}}
|
|
>
|
|
<TextField
|
|
placeholder="Send a message..."
|
|
variant="standard"
|
|
fullWidth
|
|
style={{}}
|
|
slotProps={{ input: { disableUnderline: true } }}
|
|
value={text}
|
|
onChange={(e) => setText(e.target.value)}
|
|
/>
|
|
<IconButton
|
|
size="small"
|
|
style={{ visibility: text === "" ? "hidden" : "visible" }}
|
|
onClick={handleTextSubmit}
|
|
>
|
|
<SendIcon />
|
|
</IconButton>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|