CommentTree.tsx

import { CommentNode } from "@/app/comment/commentActions";
import { Comment } from "@/app/comment/Comment";
import classNames from "classnames";
import { VoteConfig } from "@/app/(ui)/vote/getVoteConfig";
import { memo } from "react";
import { MyUserInfo } from "lemmy-js-client";

export const CommentTree = memo(
  (props: {
    readonly node: CommentNode;
    readonly highlightRoot?: boolean;
    readonly voteConfig: VoteConfig;
    readonly loggedInUser?: MyUserInfo;
    readonly renderedDepth?: number;
  }) => {
    return (
      <div
        className={classNames("group mt-4 border-neutral-700", {
          "border-l": !!props.node.parent,
          "border-t pt-4": !props.node.parent,
        })}
      >
        <Comment
          commentView={props.node.commentView}
          highlight={props.highlightRoot}
          loggedInUser={props.loggedInUser}
          markdown={props.node.markdown}
          node={props.node}
          parentId={props.node.parent?.commentView.comment.id}
          renderedDepth={props.renderedDepth}
          voteConfig={props.voteConfig}
        />
      </div>
    );
  },
  (prevProps, newProps) =>
    prevProps.node.commentView.comment.id ===
      newProps.node.commentView.comment.id &&
    prevProps.node.commentView.counts.score ===
      newProps.node.commentView.counts.score,
);

CommentTree.displayName = "CommentTree";