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 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 33x 33x 33x 33x 1x 1x 1x 33x 1x 1x 1x 33x 2x 33x | import { Card, Typography } from "@material-ui/core";
import Alert from "components/Alert";
import Button from "components/Button";
import MarkdownInput from "components/MarkdownInput";
import TextField from "components/TextField";
import { useTranslation } from "i18n";
import { COMMUNITIES, GLOBAL } from "i18n/namespaces";
import { useForm } from "react-hook-form";
import makeStyles from "utils/makeStyles";
import { CreateDiscussionInput, useNewDiscussionMutation } from "../hooks";
const useStyles = makeStyles((theme) => ({
root: {
"& > :not(:last-child)": {
marginBlockEnd: theme.spacing(3),
},
marginBlockEnd: theme.spacing(5),
padding: theme.spacing(3),
},
title: {
marginTop: 0,
},
form: {
"& > * + *": {
marginBlockStart: theme.spacing(3),
},
},
actionButtonsContainer: {
"& > * + *": {
marginInlineStart: theme.spacing(3),
},
display: "flex",
justifyContent: "flex-end",
},
}));
export interface CreateDiscussionFormProps {
communityId: number;
onCancel?(): void;
onPostSuccess?(): void;
}
type CreateDiscussionData = Omit<CreateDiscussionInput, "ownerCommunityId">;
export default function CreateDiscussionForm({
communityId,
onCancel,
onPostSuccess,
}: CreateDiscussionFormProps) {
const { t } = useTranslation([GLOBAL, COMMUNITIES]);
const classes = useStyles();
const {
control,
handleSubmit,
reset: resetForm,
register,
} = useForm<CreateDiscussionData>({
mode: "onBlur",
});
const {
error,
isLoading,
mutate: createDiscussion,
reset: resetMutation,
} = useNewDiscussionMutation(handleSuccess);
function handleSuccess() {
resetForm();
resetMutation();
onPostSuccess?.();
}
const handleCancel = () => {
onCancel?.();
resetForm();
resetMutation();
};
const onSubmit = handleSubmit((data) => {
createDiscussion({ ...data, ownerCommunityId: communityId });
});
return (
<Card className={classes.root}>
<Typography className={classes.title} variant="h2">
{t("communities:create_new_discussion_title")}
</Typography>
{error && <Alert severity="error">{error.message}</Alert>}
<form className={classes.form} onSubmit={onSubmit}>
<TextField
fullWidth
id="title"
name="title"
inputRef={register({ required: true })}
label={t("communities:new_discussion_title")}
/>
<Typography id="content-label" variant="h3">
{t("communities:new_discussion_topic")}
</Typography>
<MarkdownInput
control={control}
id="content"
labelId="content-label"
name="content"
/>
<div className={classes.actionButtonsContainer}>
<Button loading={isLoading} type="submit">
{t("communities:post")}
</Button>
<Button onClick={handleCancel}>{t("global:cancel")}</Button>
</div>
</form>
</Card>
);
}
|