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 86 87 88 89 90 91 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 90x 10x 90x 90x 90x 90x 90x 90x 90x 3x 3x 90x 90x 69x 1x 1x | import { styled } from "@mui/material";
import { UseMutationResult } from "@tanstack/react-query";
import TextField from "components/TextField";
import { useAuthContext } from "features/auth/AuthProvider";
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 { HostRequest } from "proto/requests_pb";
import React from "react";
import { useForm } from "react-hook-form";
import FieldButton from "./FieldButton";
import HostRequestGuideLinks from "./HostRequestGuideLinks";
interface MessageFormData {
text: string;
}
interface HostRequestSendFieldProps {
hostRequest: HostRequest.AsObject;
sendMutation: UseMutationResult<string | undefined | Empty, RpcError, string>;
}
const StyledContainer = styled("div")(({ theme }) => ({
alignItems: "center",
display: "flex",
gap: theme.spacing(1),
marginTop: theme.spacing(3),
}));
export default function HostRequestSendField({
hostRequest,
sendMutation,
}: HostRequestSendFieldProps) {
const { t } = useTranslation([MESSAGES, GLOBAL]);
const { authState } = useAuthContext();
const isHost = hostRequest.hostUserId === authState.userId;
const { mutate: handleSend, isPending } = sendMutation;
const { register, handleSubmit, reset, watch } = useForm<MessageFormData>();
const messageText = watch("text", "");
const onSubmit = handleSubmit(async (data: MessageFormData) => {
handleSend(data.text);
reset();
});
const isPast = hostRequest.toDate < new Date().toISOString().split("T")[0];
const handleKeyDown = (event: React.KeyboardEvent) => {
if (event.key === "Enter" && event.ctrlKey) {
event.preventDefault();
onSubmit();
}
};
return (
<form onSubmit={onSubmit}>
<HostRequestGuideLinks
isPast={isPast}
isHost={isHost}
status={hostRequest.status}
/>
<StyledContainer>
<TextField
{...register("text")}
fullWidth
aria-label={t("messages:chat_input.label")}
label={t("messages:chat_input.label")}
id="host-request-message"
multiline
onKeyDown={handleKeyDown}
maxRows={6}
size="small"
sx={{ background: "var(--mui-palette-background-paper)" }}
/>
<FieldButton
callback={onSubmit}
disabled={!messageText.trim()}
isLoading={isPending}
isSubmit
>
{t("global:send")}
</FieldButton>
</StyledContainer>
</form>
);
}
|