/
[issueNumber].tsx
68 lines (64 loc) · 1.99 KB
/
[issueNumber].tsx
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
import { Anchor, Button, Card, LoadingOverlay, Stack, Text, Textarea, Title } from "@mantine/core";
import { useForm } from "@mantine/form";
import Link from "next/link";
import { useRouter } from "next/router";
import { useCallback } from "react";
import { useIssue } from "@/hooks/useIssue";
const IssueNumber = () => {
const router = useRouter();
const { issueNumber } = router.query;
const { issue, comments, createComment, loading } = useIssue(issueNumber as string);
const form = useForm({
initialValues: { body: "" },
validate: {
body: (val) => (val ? null : "Required"),
},
});
const submit = useCallback(
async ({ body }: { body: string }) => {
await createComment(body);
form.reset();
},
[createComment, form]
);
return (
<Stack spacing={12} sx={{ width: 400 }}>
<Anchor component={Link} href="/">
< 戻る
</Anchor>
<Card withBorder shadow="sm" pos="relative" sx={{ minHeight: 80 }}>
{loading && <LoadingOverlay visible={true} />}
{issue && (
<>
<Text weight="bold">{issue.title}</Text>
<Text size="sm">{issue.bodyText}</Text>
<Text size="sm" align="right">
{new Date(issue.createdAt).toLocaleString()}
</Text>
</>
)}
</Card>
<Title order={2}>Comments</Title>
{comments.map((comment) => (
<Card key={comment.id} withBorder shadow="sm">
<Text size="sm">{comment.bodyText}</Text>
<Text size="sm" align="right">
{new Date(comment.createdAt).toLocaleString()}
</Text>
</Card>
))}
<form onSubmit={form.onSubmit((params) => submit(params))}>
<Textarea
withAsterisk
label="Comment"
placeholder="Content"
{...form.getInputProps("body")}
/>
<Button fullWidth mt={12} type="submit">
Post comment
</Button>
</form>
</Stack>
);
};
export default IssueNumber;