Lucas/t 364 on comment drawer i can fetch all comment threads with (#193)
* Added prisma to suggested extension in container * Added comments and authors on drawer with proper resolving * Fix lint * Fix console log * Fixed generated front graphql from rebase
This commit is contained in:
@ -0,0 +1,27 @@
|
||||
import { CommentThreadForDrawer } from '@/comments/types/CommentThreadForDrawer';
|
||||
|
||||
import { CommentTextInput } from './CommentTextInput';
|
||||
|
||||
type OwnProps = {
|
||||
commentThread: CommentThreadForDrawer;
|
||||
};
|
||||
|
||||
export function CommentThread({ commentThread }: OwnProps) {
|
||||
function handleSendComment(text: string) {
|
||||
console.log(text);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{commentThread.comments?.map((comment) => (
|
||||
<div key={comment.id}>
|
||||
<div>
|
||||
{comment.author?.displayName} - {comment.createdAt}
|
||||
</div>
|
||||
<div>{comment.body}</div>
|
||||
</div>
|
||||
))}
|
||||
<CommentTextInput onSend={handleSendComment} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,30 +1,36 @@
|
||||
import { useRecoilState } from 'recoil';
|
||||
|
||||
import { CommentThreadForDrawer } from '@/comments/types/CommentThreadForDrawer';
|
||||
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 { useGetCommentThreadsByTargetsQuery } from '~/generated/graphql';
|
||||
|
||||
import { commentableEntityArrayState } from '../../states/commentableEntityArrayState';
|
||||
|
||||
import { CommentTextInput } from './CommentTextInput';
|
||||
import { CommentThread } from './CommentThread';
|
||||
|
||||
export function RightDrawerComments() {
|
||||
const [commentableEntityArray] = useRecoilState(commentableEntityArrayState);
|
||||
|
||||
function handleSendComment(text: string) {
|
||||
console.log(text);
|
||||
}
|
||||
const { data: queryResult } = useGetCommentThreadsByTargetsQuery({
|
||||
variables: {
|
||||
commentThreadTargetIds: commentableEntityArray.map(
|
||||
(commentableEntity) => commentableEntity.id,
|
||||
),
|
||||
},
|
||||
});
|
||||
|
||||
const commentThreads: CommentThreadForDrawer[] =
|
||||
queryResult?.findManyCommentThreads ?? [];
|
||||
|
||||
return (
|
||||
<RightDrawerPage>
|
||||
<RightDrawerTopBar title="Comments" />
|
||||
<RightDrawerBody>
|
||||
{commentableEntityArray.map((commentableEntity) => (
|
||||
<div key={commentableEntity.id}>
|
||||
{commentableEntity.type} - {commentableEntity.id}
|
||||
</div>
|
||||
{commentThreads.map((commentThread) => (
|
||||
<CommentThread commentThread={commentThread} />
|
||||
))}
|
||||
<CommentTextInput onSend={handleSendComment} />
|
||||
</RightDrawerBody>
|
||||
</RightDrawerPage>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user