52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
import { useRecoilState } from 'recoil';
|
|
|
|
import { CommentThreadForDrawer } from '@/comments/types/CommentThreadForDrawer';
|
|
import { useHotkeysScopeOnMountOnly } from '@/hotkeys/hooks/useHotkeysScopeOnMountOnly';
|
|
import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
|
|
import { RightDrawerBody } from '@/ui/layout/right-drawer/components/RightDrawerBody';
|
|
import { RightDrawerPage } from '@/ui/layout/right-drawer/components/RightDrawerPage';
|
|
import { RightDrawerTopBar } from '@/ui/layout/right-drawer/components/RightDrawerTopBar';
|
|
import {
|
|
SortOrder,
|
|
useGetCommentThreadsByTargetsQuery,
|
|
} from '~/generated/graphql';
|
|
|
|
import { commentableEntityArrayState } from '../states/commentableEntityArrayState';
|
|
|
|
import { CommentThread } from './CommentThread';
|
|
|
|
export function RightDrawerComments() {
|
|
const [commentableEntityArray] = useRecoilState(commentableEntityArrayState);
|
|
useHotkeysScopeOnMountOnly({
|
|
scope: InternalHotkeysScope.RightDrawer,
|
|
customScopes: { goto: false, 'command-menu': true },
|
|
});
|
|
|
|
const { data: queryResult } = useGetCommentThreadsByTargetsQuery({
|
|
variables: {
|
|
commentThreadTargetIds: commentableEntityArray.map(
|
|
(commentableEntity) => commentableEntity.id,
|
|
),
|
|
orderBy: [
|
|
{
|
|
createdAt: SortOrder.Desc,
|
|
},
|
|
],
|
|
},
|
|
});
|
|
|
|
const commentThreads: CommentThreadForDrawer[] =
|
|
queryResult?.findManyCommentThreads ?? [];
|
|
|
|
return (
|
|
<RightDrawerPage>
|
|
<RightDrawerTopBar title="Comments" />
|
|
<RightDrawerBody>
|
|
{commentThreads.map((commentThread) => (
|
|
<CommentThread key={commentThread.id} commentThread={commentThread} />
|
|
))}
|
|
</RightDrawerBody>
|
|
</RightDrawerPage>
|
|
);
|
|
}
|