) : null ) : (

) ) : null} ) } type TimelineItem = | { type: "comment"; data: Comment; createdAt: number } | { type: "mention"; data: Mention; createdAt: number } export function CommentThread({ owner, repo, comments, mentions, authorsById, reactions, rootCommentId, commentNumbers, replyingToId, onReply, onCancelReply, askingOptions, }: { owner: string repo: string comments: Comment[] mentions: Mention[] authorsById: Record reactions: Reaction[] rootCommentId: string | null commentNumbers: Map replyingToId?: string | null onReply?: (commentId: string) => void onCancelReply?: () => void askingOptions: ComposerProps["options"]["asking"] }) { const reactionsByComment: Record = {} for (const reaction of reactions) { if (!reactionsByComment[reaction.commentId]) { reactionsByComment[reaction.commentId] = [] } reactionsByComment[reaction.commentId].push(reaction) } const topLevelComments = comments.filter((c) => c.threadCommentId === null) const timeline: TimelineItem[] = [ ...topLevelComments.map( (c) => ({ type: "comment", data: c, createdAt: c.createdAt }) as const ), ...mentions.map( (m) => ({ type: "mention", data: m, createdAt: m.createdAt }) as const ), ].sort((a, b) => a.createdAt - b.createdAt) const repliesByThread = new Map() for (const c of comments) { if (c.threadCommentId) { const existing = repliesByThread.get(c.threadCommentId) ?? [] existing.push(c) repliesByThread.set(c.threadCommentId, existing) } } return (

{timeline.map((item) => { if (item.type === "mention") { const author = authorsById[item.data.authorId] return ( ) } const comment = item.data const author = authorsById[comment.authorId] if (!author) { return null } const commentNumber = commentNumbers.get(comment.id) ?? "?" const isRootComment = comment.id === rootCommentId const replies = repliesByThread.get(comment.id) ?? [] const hasReplies = replies.length > 0 return ( {hasReplies && (

{replies.map((reply) => { const replyAuthor = authorsById[reply.authorId] if (!replyAuthor) { return null } const replyNumber = commentNumbers.get(reply.id) ?? "?" return ( ) })}

)} ) })}

) }