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 92 93 94 95 96 97 98 99 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import { useMediaQuery, useTheme } from "@mui/material";
import Alert from "components/Alert";
import Button from "components/Button";
import TextBody from "components/TextBody";
import TextField from "components/TextField";
import { useProfileUser } from "features/profile/hooks/useProfileUser";
import ReferenceStepHeader from "features/profile/view/leaveReference/formSteps/ReferenceStepHeader";
import {
ReferenceContextFormData,
ReferenceStepProps,
useReferenceStyles,
} from "features/profile/view/leaveReference/ReferenceForm";
import { useTranslation } from "i18n";
import { GLOBAL, PROFILE } from "i18n/namespaces";
import { useRouter } from "next/router";
import { ReferenceType } from "proto/references_pb";
import { Controller, useForm } from "react-hook-form";
import {
leaveReferenceBaseRoute,
referenceStepStrings,
referenceTypeRoute,
} from "routes";
export default function Text({
referenceData,
setReferenceValues,
referenceType,
hostRequestId,
}: ReferenceStepProps) {
const { t } = useTranslation([GLOBAL, PROFILE]);
const user = useProfileUser();
const router = useRouter();
const classes = useReferenceStyles();
const theme = useTheme();
const isSmOrWider = useMediaQuery(theme.breakpoints.up("sm"));
const {
control,
handleSubmit,
formState: { errors },
} = useForm<ReferenceContextFormData>({
defaultValues: {
text: referenceData.text,
},
});
const onSubmit = handleSubmit((values) => {
setReferenceValues(values);
referenceType === referenceTypeRoute[ReferenceType.REFERENCE_TYPE_FRIEND]
? router.push(
`${leaveReferenceBaseRoute}/${referenceType}/${user.userId}/${referenceStepStrings[3]}`
)
: router.push(
`${leaveReferenceBaseRoute}/${referenceType}/${user.userId}/${hostRequestId}/${referenceStepStrings[3]}`
);
});
return (
<form className={classes.form} onSubmit={onSubmit}>
<ReferenceStepHeader name={user.name} referenceType={referenceType} />
<TextBody className={classes.text}>
{t("profile:leave_reference.text_explanation")}
</TextBody>
<TextBody className={classes.text}>
{t("profile:leave_reference.public_answer")}
</TextBody>
{errors.text?.message && (
<Alert className={classes.alert} severity="error">
{errors.text.message}
</Alert>
)}
<div className={classes.card}>
<Controller
render={({ field }) => (
<TextField
{...field}
className="multiline"
fullWidth={true}
multiline={true}
minRows={15}
id="reference-text-input"
onChange={(event) => field.onChange(event.target.value)}
value={field.value}
/>
)}
name="text"
control={control}
rules={{ required: t("profile:leave_reference.required") }}
/>
</div>
<div className={classes.buttonContainer}>
<Button fullWidth={!isSmOrWider} type="submit">
{t("profile:leave_reference.next_step_label")}
</Button>
</div>
</form>
);
}
|