+
{children}
@@ -173,7 +157,7 @@ export function CommentClientWrapperWithToolbar({
}
/>
) : null}
-
+
);
}
diff --git a/packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/_lib/comment.tsx b/packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/_lib/comment.tsx
index d77a4822..fe8619ae 100644
--- a/packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/_lib/comment.tsx
+++ b/packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/_lib/comment.tsx
@@ -1,46 +1,79 @@
import { getUser, getVerifiedHandle } from "@/lib/data/user";
-import {
- CommentClientWrapperWithToolbar,
- CommentProps,
-} from "./comment-client";
-import { getCommentsForPost } from "@/lib/data/db/comment";
+import { CommentClientWrapperWithToolbar } from "./comment-client";
+import { CommentModel } from "@/lib/data/db/comment";
import { TimeAgo } from "@/lib/components/time-ago";
-import { UserAvatar } from "@/lib/components/user-avatar";
+import { AvatarFallback, UserAvatar } from "@/lib/components/user-avatar";
import Link from "next/link";
import { getDidFromHandleOrDid } from "@/lib/data/atproto/did";
import { UserHoverCard } from "@/lib/components/user-hover-card";
+import { VariantProps, cva } from "class-variance-authority";
+import { cn } from "@/lib/utils";
-type ServerCommentProps = Omit<
- CommentProps,
- // Client only props
- | "voteAction"
- | "unvoteAction"
- | "initialVoteState"
- | "hasAuthored"
- | "children"
- | "postAuthorDid"
-> & {
- // Server only props
- cid: string;
- isUpvoted: boolean;
- childComments: Awaited>;
- comment: string;
- createdAt: Date;
+const commentVariants = cva(undefined, {
+ variants: {
+ level: {
+ 0: "",
+ 1: "pl-8",
+ 2: "pl-16",
+ 3: "pl-24",
+ },
+ },
+ defaultVariants: {
+ level: 0,
+ },
+});
+
+type CommentProps = VariantProps & {
+ comment: CommentModel;
postAuthorParam: string;
+ postRkey: string;
};
-export async function Comment({
- authorDid,
- isUpvoted,
- childComments,
+export function Comment({ comment, level, ...props }: CommentProps) {
+ if (
+ comment.status !== "live" &&
+ comment.children &&
+ comment.children.length === 0
+ ) {
+ return null;
+ }
+
+ return (
+
+ {comment.status === "live" ? (
+
+ );
+}
+
+function NestComment({
+ children,
+ level,
+ className,
+}: {
+ children: React.ReactNode;
+ level: CommentProps["level"];
+ className?: string;
+}) {
+ return (
+
+ {children}
+
+ );
+}
+
+async function LiveComment({
comment,
- createdAt,
+ level,
postAuthorParam,
- ...props
-}: ServerCommentProps) {
+ postRkey,
+}: CommentProps) {
const [postAuthorDid, handle] = await Promise.all([
getDidFromHandleOrDid(postAuthorParam),
- getVerifiedHandle(authorDid),
+ getVerifiedHandle(comment.authorDid),
]);
if (!postAuthorDid) {
@@ -49,58 +82,93 @@ export async function Comment({
}
const user = await getUser();
- const hasAuthored = user?.did === authorDid;
+ const hasAuthored = user?.did === comment.authorDid;
+
+ const childCommentLevel = getChildCommentLevel(level);
return (
<>
- {childComments?.map((comment) => (
+ {comment.children?.map((comment) => (
+
+ );
+}
+
+function getChildCommentLevel(level: number | null | undefined) {
+ // TODO: Show deeper levels behind a parent permalink. For now we just show them all at the max level
+ return Math.min((level ?? 0) + 1, 3) as CommentProps["level"];
+}
diff --git a/packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/page.tsx b/packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/page.tsx
index 72c88a13..e49d0332 100644
--- a/packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/page.tsx
+++ b/packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/page.tsx
@@ -56,17 +56,11 @@ export default async function Post({ params }: { params: PostPageParams }) {
= {
- [K in keyof T]: T[K];
- // eslint-disable-next-line @typescript-eslint/ban-types
-} & {};
-
export function createAtUriParser(
collectionSchema: TCollection,
): z.ZodType<
diff --git a/packages/frontpage/lib/data/db/comment.ts b/packages/frontpage/lib/data/db/comment.ts
index 954cf225..c515d108 100644
--- a/packages/frontpage/lib/data/db/comment.ts
+++ b/packages/frontpage/lib/data/db/comment.ts
@@ -1,10 +1,57 @@
import "server-only";
import { cache } from "react";
import { db } from "@/lib/db";
-import { eq, sql, count, desc, and } from "drizzle-orm";
+import {
+ eq,
+ sql,
+ count,
+ desc,
+ and,
+ InferSelectModel,
+ isNotNull,
+} from "drizzle-orm";
import * as schema from "@/lib/schema";
import { getUser } from "../user";
import { DID } from "../atproto/did";
+import { Prettify } from "@/lib/utils";
+
+type CommentRow = InferSelectModel;
+
+type CommentExtras = {
+ children?: CommentModel[];
+ userHasVoted: boolean;
+ // These properties are returned from some methods but not others
+ rank?: number;
+ voteCount?: number;
+ postAuthorDid?: DID;
+ postRkey?: string;
+};
+
+type LiveComment = CommentRow & CommentExtras & { status: "live" };
+
+type HiddenComment = Omit &
+ CommentExtras & {
+ status: Exclude;
+ body: null;
+ };
+
+export type CommentModel = Prettify;
+
+const buildUserHasVotedQuery = cache(async () => {
+ const user = await getUser();
+
+ return db
+ .select({
+ commentId: schema.CommentVote.commentId,
+ // This is not entirely type safe but there isn't a better way to do this in drizzle right now
+ userHasVoted: sql`${isNotNull(schema.CommentVote.commentId)}`.as(
+ "userHasVoted",
+ ),
+ })
+ .from(schema.CommentVote)
+ .where(user ? eq(schema.CommentVote.authorDid, user.did) : sql`false`)
+ .as("hasVoted");
+});
export const getCommentsForPost = cache(async (postId: number) => {
const votes = db
@@ -27,15 +74,11 @@ export const getCommentsForPost = cache(async (postId: number) => {
) / 3600
) + 2
) ^ 1.8
- `.as("rank");
-
- const user = await getUser();
+ `
+ .mapWith(Number)
+ .as("rank");
- const hasVoted = db
- .select({ commentId: schema.CommentVote.commentId })
- .from(schema.CommentVote)
- .where(user ? eq(schema.CommentVote.authorDid, user.did) : sql`false`)
- .as("hasVoted");
+ const hasVoted = await buildUserHasVotedQuery();
const rows = await db
.select({
@@ -46,27 +89,21 @@ export const getCommentsForPost = cache(async (postId: number) => {
body: schema.Comment.body,
createdAt: schema.Comment.createdAt,
authorDid: schema.Comment.authorDid,
+ status: schema.Comment.status,
voteCount: sql`coalesce(${votes.voteCount}, 0) + 1`
.mapWith(Number)
.as("voteCount"),
rank: commentRank,
- userHasVoted: hasVoted.commentId,
+ userHasVoted: hasVoted.userHasVoted,
parentCommentId: schema.Comment.parentCommentId,
})
.from(schema.Comment)
- .where(
- and(eq(schema.Comment.postId, postId), eq(schema.Comment.status, "live")),
- )
+ .where(eq(schema.Comment.postId, postId))
.leftJoin(votes, eq(votes.commentId, schema.Comment.id))
.leftJoin(hasVoted, eq(hasVoted.commentId, schema.Comment.id))
.orderBy(desc(commentRank));
- return nestCommentRows(
- rows.map((row) => ({
- ...row,
- userHasVoted: row.userHasVoted !== null,
- })),
- );
+ return nestCommentRows(rows);
});
export const getCommentWithChildren = cache(
@@ -78,42 +115,61 @@ export const getCommentWithChildren = cache(
},
);
-type CommentRowWithChildren<
- T extends { id: number; parentCommentId: number | null },
-> = T & {
- children: CommentRowWithChildren[];
+const nestCommentRows = (
+ items: (CommentRow & {
+ userHasVoted: boolean;
+ voteCount?: number;
+ rank?: number;
+ })[],
+ id: number | null = null,
+): CommentModel[] => {
+ const comments: CommentModel[] = [];
+
+ for (const item of items) {
+ if (item.parentCommentId !== id) {
+ continue;
+ }
+
+ const children = nestCommentRows(items, item.id);
+ const transformed = {
+ userHasVoted: item.userHasVoted !== null,
+ voteCount: item.voteCount ?? 0,
+ };
+ if (item.status === "live") {
+ comments.push({
+ ...item,
+ ...transformed,
+ // Explicit copy is required to avoid TS error
+ status: item.status,
+ children,
+ });
+ } else {
+ comments.push({
+ ...item,
+ ...transformed,
+ // Explicit copy is required to avoid TS error
+ status: item.status,
+ body: null,
+ children,
+ });
+ }
+ }
+
+ return comments;
};
-const nestCommentRows = <
- T extends { id: number; parentCommentId: number | null },
->(
- items: T[],
- id: number | null = null,
-): CommentRowWithChildren[] =>
- items
- .filter((item) => item.parentCommentId === id)
- .map((item) => ({
- ...item,
- children: nestCommentRows(items, item.id),
- }));
-
-const findCommentSubtree = <
- T extends {
- id: number;
- parentCommentId: number | null;
- rkey: string;
- authorDid: DID;
- },
->(
- items: CommentRowWithChildren[],
+const findCommentSubtree = (
+ items: CommentModel[],
authorDid: DID,
rkey: string,
-): CommentRowWithChildren | null => {
+): CommentModel | null => {
for (const item of items) {
if (item.rkey === rkey && item.authorDid === authorDid) {
return item;
}
+ if (!item.children) return null;
+
const child = findCommentSubtree(item.children, authorDid, rkey);
if (child) {
return child;
@@ -144,7 +200,8 @@ export async function uncached_doesCommentExist(rkey: string) {
}
export const getUserComments = cache(async (userDid: DID) => {
- const posts = await db
+ const hasVoted = await buildUserHasVotedQuery();
+ const comments = await db
.select({
id: schema.Comment.id,
rkey: schema.Comment.rkey,
@@ -156,15 +213,26 @@ export const getUserComments = cache(async (userDid: DID) => {
status: schema.Comment.status,
postRkey: schema.Post.rkey,
postAuthorDid: schema.Post.authorDid,
+ parentCommentId: schema.Comment.parentCommentId,
+ userHasVoted: hasVoted.userHasVoted,
})
.from(schema.Comment)
- .leftJoin(schema.Post, eq(schema.Comment.postId, schema.Post.id))
.where(
and(
eq(schema.Comment.authorDid, userDid),
eq(schema.Comment.status, "live"),
),
- );
+ )
+ .leftJoin(schema.Post, eq(schema.Comment.postId, schema.Post.id))
+ .leftJoin(hasVoted, eq(hasVoted.commentId, schema.Comment.id));
- return posts;
+ return comments as LiveComment[];
});
+
+export function shouldHideComment(comment: CommentModel) {
+ return (
+ comment.status !== "live" &&
+ comment.children &&
+ comment.children.length === 0
+ );
+}
diff --git a/packages/frontpage/lib/utils.ts b/packages/frontpage/lib/utils.ts
index 365058ce..03384689 100644
--- a/packages/frontpage/lib/utils.ts
+++ b/packages/frontpage/lib/utils.ts
@@ -4,3 +4,8 @@ import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
+
+export type Prettify = {
+ [K in keyof T]: T[K];
+ // eslint-disable-next-line @typescript-eslint/ban-types
+} & {};
-
+
-
-
- {handle}
+ @{handle}
-
+ {comment}
-{comment.body}
+
+ {comment.children?.map((comment) => (
+
+
+
+ @deleted
+
+
+
+ Deleted comment
+
{comments.map((comment) => (
diff --git a/packages/frontpage/app/(app)/profile/[user]/page.tsx b/packages/frontpage/app/(app)/profile/[user]/page.tsx
index 54df6448..4ea2804a 100644
--- a/packages/frontpage/app/(app)/profile/[user]/page.tsx
+++ b/packages/frontpage/app/(app)/profile/[user]/page.tsx
@@ -78,18 +78,10 @@ export default async function Profile({ params }: { params: Params }) {
if (entity.type === "comment") {
return (