Function Comments

src/components/comment/Comments.tsx:39–323

({
  content,
  searchParams,
}: {
  content: {
    id: number;
    courseId: number;
    commentCount: number;
    possiblePath: string;
  };
  searchParams: QueryParams;
})

dayjs.extend(relativeTime);

const Comments = async ({
  content,
  searchParams,
}: {
  content: {
    id: number;
    courseId: number;
    commentCount: number;
    possiblePath: string;
  };
  searchParams: QueryParams;
}) => {
  const session = await getServerSession(authOptions);
  if (!session?.user) {
    return null;
  }
  const paginationInfo = paginationData(searchParams);
  const q = constructCommentPrismaQuery(
    searchParams,
    paginationInfo,
    content.id,
    session.user.id,
  );
  const data = await getComments(q, searchParams.parentId);

  if (!content.id) return null;
  const modifiedSearchParams = { ...searchParams };
  delete modifiedSearchParams.parentId;
  return (
    <div className="flex w-full flex-col gap-8">
      <div className="flex flex-col gap-4">
        {data.parentComment && (
          <Link
            href={getUpdatedUrl(
              `/courses/${content.courseId}/${content.possiblePath}`,
              modifiedSearchParams,
              {},
            )}
            scroll={false}
          >
            <Button className="flex gap-2">
              <ArrowLeft className="size-4" /> Go back
            </Button>
          </Link>
        )}
        <div className="flex flex-col justify-between gap-4 md:flex-row md:items-center">
          <h2
            className={`text-xl font-bold tracking-tighter text-primary md:text-2xl`}
          >
            {!data.parentComment
              ? `${content.commentCount} ${content.commentCount === 1 ? 'Comment' : 'Comments'}`
              : `${data.parentComment.repliesCount} ${data.parentComment.repliesCount === 1 ? 'Reply' : 'Replies'}`}
          </h2>
          <div className="flex gap-2">
            <DropdownMenu modal={false}>
              <DropdownMenuTrigger asChild>
                <Button>
                  {searchParams.tabtype || TabType.mu}