Function Root

components/Commentable.tsx:56–313

({ className, blockId }: CommentableProps)

}

function Root({ className, blockId }: CommentableProps) {
  const pathname = usePathname()
  const { postId, comments, currentBlockId } = useSnapshot(blogPostState)
  const { user: me } = useUser()
  const [isCommenting, setIsCommenting] = React.useState(false)
  const currentComments = React.useMemo(
    () => comments.filter((c) => c.body.blockId === blockId),
    [comments, blockId]
  )
  const top3Users = React.useMemo(() => {
    if (currentComments.length === 0) {
      return []
    }

    const users = new Set<PostIDLessCommentDto['userId']>()
    const top3: PostIDLessCommentDto['userInfo'][] = []
    for (const comment of currentComments) {
      if (users.has(comment.userId)) {
        continue
      }

      if (comment.userInfo.imageUrl) {
        top3.push(comment.userInfo)
        users.add(comment.userId)
      }

      if (top3.length >= 3) {
        break
      }
    }

    return top3
  }, [currentComments])

  const formRef = React.useRef<HTMLFormElement>(null)
  const commentsRef = React.useRef<HTMLUListElement>(null)
  const scrollToComment = React.useCallback((id: string) => {
    setTimeout(() => {
      if (commentsRef.current) {
        commentsRef.current
          .querySelector(`[data-commentid="${id}"]`)
          ?.scrollIntoView({
            behavior: 'smooth',
          })
      }
    }, 300)
  }, [])

  const { mutate: createComment, isLoading } = useMutation(
    ['comment', postId],
    async (comment: string) => {
      const res = await fetch(`/api/comments/${postId}`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          body: {