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:
Lucas Bordeau
2023-06-05 15:23:29 +02:00
committed by GitHub
parent 6de90024ef
commit fe70f30a29
9 changed files with 208 additions and 12 deletions

View File

@ -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>
);
}

View File

@ -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>
);