diff --git a/components/post/PostComments.tsx b/components/post/PostComments.tsx index 7c137afbe994b679e2330cc2f00c0cf91b125e53..f65560d2f4940703652dca663dab2f7ea8bc7a76 100644 --- a/components/post/PostComments.tsx +++ b/components/post/PostComments.tsx @@ -1,28 +1,73 @@ +import React from "react"; +import { useRouter } from "next/router"; + import Hive from "@/types/Hive"; import PostContent from "./PostContent"; +import usePostContentReplies from "@/hooks/api/postPage/usePostContentReplies"; -interface PostCommentsProps { - comments: Hive.Content[]; +interface NestedCommentProps { + comment: Hive.Content; } -const PostComments: React.FC<PostCommentsProps> = ({ comments }) => { - if (!comments || !comments.length) return null; - - return comments.map((comment) => { - return ( - <div - className="flex mt-4 justify-center" - key={comment.id} - > - <div className="w-[70%]"> - <PostContent - active_votes={comment.active_votes} - data={comment} - /> - </div> +const NestedComment: React.FC<NestedCommentProps> = ({ comment }) => { + const shouldFetch = comment.children > 0; + + const { data: nestedReplies } = usePostContentReplies( + comment.author, + comment.permlink, + + { + enabled: shouldFetch, + } + ); + + return ( + <div + className="flex mt-4 justify-end" + key={comment.id} + > + <div className="w-[90%]"> + <PostContent + isComment={true} + active_votes={comment.active_votes} + data={comment} + /> + + {shouldFetch && nestedReplies && nestedReplies.length > 0 + ? nestedReplies.map((child) => ( + <NestedComment + key={child.id} + comment={child} + /> + )) + : null} </div> - ); - }); + </div> + ); +}; + +const PostComments = () => { + const router = useRouter(); + const { post } = router?.query; + let accountName = post?.[1] ?? ""; + let permlink = post?.[2] ?? ""; + + const { data: comments } = usePostContentReplies(accountName, permlink); + + if (!comments || !comments.length) { + return null; + } + + return ( + <> + {comments.map((comment) => ( + <NestedComment + key={comment.id} + comment={comment} + /> + ))} + </> + ); }; export default PostComments;