Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 199x 199x 199x 199x 199x 199x 3x 3x 3x 199x 41x 1x 1x 199x 39x | import Button from "components/Button";
import TextField from "components/TextField";
import { Empty } from "google-protobuf/google/protobuf/empty_pb";
import { RpcError } from "grpc-web";
import { useTranslation } from "i18n";
import { GLOBAL, MESSAGES } from "i18n/namespaces";
import { usePersistedState } from "platform/usePersistedState";
import React from "react";
import { useForm } from "react-hook-form";
import { UseMutationResult } from "react-query";
import useSendFieldStyles from "../useSendFieldStyles";
interface MessageFormData {
text: string;
}
export interface GroupChatSendFieldProps {
sendMutation: UseMutationResult<string | undefined | Empty, RpcError, string>;
chatId: number;
currentUserId: number;
}
export default function GroupChatSendField({
sendMutation,
chatId,
currentUserId,
}: GroupChatSendFieldProps) {
const { t } = useTranslation([GLOBAL, MESSAGES]);
const classes = useSendFieldStyles();
const { mutate: handleSend, isLoading } = sendMutation;
const { register, handleSubmit, reset } = useForm<MessageFormData>();
const [persistedMessage, setPersistedMessage, clearPersistedMessage] =
usePersistedState(
`messages.${currentUserId}.${chatId}`,
"",
"sessionStorage"
);
const onSubmit = handleSubmit(async (data: MessageFormData) => {
handleSend(data.text.trimRight());
clearPersistedMessage();
reset({ text: "" });
});
const handleKeyDown = (event: React.KeyboardEvent) => {
if (event.key === "Enter" && event.ctrlKey) {
event.preventDefault();
onSubmit();
}
};
return (
<form onSubmit={onSubmit} className={classes.container}>
<TextField
id="group-chat-message-field"
label={t("messages:chat_input.label")}
name="text"
defaultValue={persistedMessage ?? ""}
inputRef={register}
multiline
fullWidth
onKeyDown={handleKeyDown}
onChange={(event) => setPersistedMessage(event.target.value)}
maxRows={4}
size="small"
className={classes.textField}
/>
<Button
type="submit"
variant="contained"
color="primary"
onClick={onSubmit}
loading={isLoading}
className={classes.button}
>
{t("global:send")}
</Button>
</form>
);
}
|