forked from alan2207/bulletproof-react
-
Notifications
You must be signed in to change notification settings - Fork 0
/
discussion.tsx
71 lines (65 loc) · 2.22 KB
/
discussion.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
69
70
71
import { ErrorBoundary } from 'react-error-boundary';
import { useParams } from 'react-router-dom';
import { ContentLayout } from '@/components/layouts';
import { Head } from '@/components/seo';
import { MDPreview } from '@/components/ui/md-preview';
import { Spinner } from '@/components/ui/spinner';
import { Comments } from '@/features/comments';
import { formatDate } from '@/utils/format';
import { useDiscussion } from '../api/get-discussion';
import { UpdateDiscussion } from '../components/update-discussion';
export const DiscussionRoute = () => {
const params = useParams();
const discussionId = params.discussionId as string;
const discussionQuery = useDiscussion({
discussionId,
queryConfig: {
refetchInterval: 1000,
},
});
if (discussionQuery.isLoading) {
return (
<div className="flex h-48 w-full items-center justify-center">
<Spinner size="lg" />
</div>
);
}
if (!discussionQuery.data) return null;
return (
<>
<Head title={discussionQuery.data.title} />
<ContentLayout title={discussionQuery.data.title}>
<span className="text-xs font-bold">
{formatDate(discussionQuery.data.createdAt)}
</span>
{discussionQuery.data.author && (
<span className="ml-2 text-sm font-bold">
by {discussionQuery.data.author.firstName}{' '}
{discussionQuery.data.author.lastName}
</span>
)}
<div className="mt-6 flex flex-col space-y-16">
<div className="flex justify-end">
<UpdateDiscussion discussionId={discussionId} />
</div>
<div>
<div className="overflow-hidden bg-white shadow sm:rounded-lg">
<div className="px-4 py-5 sm:px-6">
<div className="mt-1 max-w-2xl text-sm text-gray-500">
<MDPreview value={discussionQuery.data.body} />
</div>
</div>
</div>
</div>
<ErrorBoundary
fallback={
<div>Failed to load comments. Try to refresh the page.</div>
}
>
<Comments discussionId={discussionId} />
</ErrorBoundary>
</div>
</ContentLayout>
</>
);
};