Show deleted comment trees (#105)

* Something working... * Fix link * Ensure we show replies to deleted comments on profile page
likeandscribe · Jul 8, 2024 · 9253c4e · 9253c4e
1 parent b8661af
commit 9253c4e
Show file tree

Hide file tree

Showing 11 changed files with 301 additions and 193 deletions.
diff --git a/...e/app/(app)/post/[postAuthor]/[postRkey]/[commentAuthor]/[commentRkey]/_lib/page-data.tsx b/...e/app/(app)/post/[postAuthor]/[postRkey]/[commentAuthor]/[commentRkey]/_lib/page-data.tsx
@@ -1,6 +1,9 @@
 import "server-only";
 import { getDidFromHandleOrDid } from "@/lib/data/atproto/did";
-import { getCommentWithChildren } from "@/lib/data/db/comment";
+import {
+  getCommentWithChildren,
+  shouldHideComment,
+} from "@/lib/data/db/comment";
 import { getPost } from "@/lib/data/db/post";
 import { notFound } from "next/navigation";
 
@@ -33,5 +36,9 @@ export async function getCommentPageData(params: CommentPageParams) {
     notFound();
   }
 
+  if (shouldHideComment(comment)) {
+    notFound();
+  }
+
   return { post, comment, postAuthorDid, commentAuthorDid };
 }
diff --git a/...e/app/(app)/post/[postAuthor]/[postRkey]/[commentAuthor]/[commentRkey]/og-image/route.tsx b/...e/app/(app)/post/[postAuthor]/[postRkey]/[commentAuthor]/[commentRkey]/og-image/route.tsx
@@ -10,6 +10,8 @@ import {
 } from "@/lib/og";
 import { CommentPageParams, getCommentPageData } from "../_lib/page-data";
 import { getBlueskyProfile } from "@/lib/data/user";
+import { shouldHideComment } from "@/lib/data/db/comment";
+import { notFound } from "next/navigation";
 
 export const dynamic = "force-static";
 export const revalidate = 60 * 60; // 1 hour
@@ -19,6 +21,10 @@ export async function GET(
   { params }: { params: CommentPageParams },
 ) {
   const { comment } = await getCommentPageData(params);
+  if (shouldHideComment(comment) || comment.status !== "live") {
+    notFound();
+  }
+
   const { avatar, handle } = await getBlueskyProfile(comment.authorDid);
 
   return frontpageOgImageResponse(
@@ -72,8 +78,8 @@ export async function GET(
         <OgBox style={{ alignItems: "center", gap: 12 }}>
           <OgCommentIcon />
           <OgBox>
-            {comment.children.length}{" "}
-            {comment.children.length === 1 ? "reply" : "replies"}
+            {comment.children!.length}{" "}
+            {comment.children!.length === 1 ? "reply" : "replies"}
           </OgBox>
         </OgBox>
       </OgBottomBar>

diff --git a/...s/frontpage/app/(app)/post/[postAuthor]/[postRkey]/[commentAuthor]/[commentRkey]/page.tsx b/...s/frontpage/app/(app)/post/[postAuthor]/[postRkey]/[commentAuthor]/[commentRkey]/page.tsx
@@ -22,23 +22,26 @@ export async function generateMetadata({
   const path = `/post/${params.postAuthor}/${params.postRkey}/${params.commentAuthor}/${params.commentRkey}`;
 
   return {
-    title: `${post.title} - @${handle}: "${truncateText(comment.body, 15)}..."`,
+    title: `${post.title} - ${comment.status === "live" ? `@${handle}: "${truncateText(comment.body, 15)}..."` : "Deleted comment"}`,
     alternates: {
       canonical: `https://frontpage.fyi${path}`,
     },
-    openGraph: {
-      title: `@${handle}'s comment on Frontpage`,
-      description: truncateText(comment.body, 47),
-      type: "article",
-      publishedTime: comment.createdAt.toISOString(),
-      authors: [`@${handle}`],
-      url: `https://frontpage.fyi${path}`,
-      images: [
-        {
-          url: `${path}/og-image`,
-        },
-      ],
-    },
+    openGraph:
+      comment.status === "live"
+        ? {
+            title: `@${handle}'s comment on Frontpage`,
+            description: truncateText(comment.body, 47),
+            type: "article",
+            publishedTime: comment.createdAt.toISOString(),
+            authors: [`@${handle}`],
+            url: `https://frontpage.fyi${path}`,
+            images: [
+              {
+                url: `${path}/og-image`,
+              },
+            ],
+          }
+        : undefined,
   };
 }
 
@@ -53,24 +56,16 @@ export default async function CommentPage({
     <>
       <div className="flex justify-end">
         <Link
-          href={`/post/${params.postRkey}`}
+          href={`/post/${params.postAuthor}/${params.postRkey}`}
           className="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
         >
           See all comments
         </Link>
       </div>
       <Comment
-        isUpvoted={false}
-        key={comment.id}
-        cid={comment.cid}
-        rkey={comment.rkey}
+        comment={comment}
         postAuthorParam={params.postAuthor}
         postRkey={post.rkey}
-        authorDid={comment.authorDid}
-        createdAt={comment.createdAt}
-        id={comment.id}
-        comment={comment.body}
-        childComments={comment.children}
       />
     </>
   );

diff --git a/packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/_lib/comment-client.tsx b/packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/_lib/comment-client.tsx
@@ -21,7 +21,6 @@ import {
   deleteCommentAction,
 } from "./actions";
 import { ChatBubbleIcon, TrashIcon } from "@radix-ui/react-icons";
-import { VariantProps, cva } from "class-variance-authority";
 import {
   useActionState,
   useRef,
@@ -37,27 +36,13 @@ import { Spinner } from "@/lib/components/ui/spinner";
 import { DID } from "@/lib/data/atproto/did";
 import { InputLengthIndicator } from "@/lib/components/input-length-indicator";
 import { MAX_COMMENT_LENGTH } from "@/lib/data/db/constants";
+import type { CommentModel } from "@/lib/data/db/comment";
 
-const commentVariants = cva(undefined, {
-  variants: {
-    level: {
-      0: "",
-      1: "pl-8",
-      2: "pl-16",
-      3: "pl-24",
-    },
-  },
-  defaultVariants: {
-    level: 0,
-  },
-});
-
-export type CommentProps = VariantProps<typeof commentVariants> & {
-  rkey: string;
-  cid: string;
-  id: number;
+export type CommentClientProps = Pick<
+  CommentModel,
+  "rkey" | "cid" | "id" | "authorDid"
+> & {
   postRkey: string;
-  authorDid: DID;
   postAuthorDid: DID;
   initialVoteState: VoteButtonState;
   hasAuthored: boolean;
@@ -71,19 +56,18 @@ export function CommentClientWrapperWithToolbar({
   postRkey,
   authorDid,
   postAuthorDid,
-  level,
   initialVoteState,
   hasAuthored,
   children,
-}: CommentProps) {
+}: CommentClientProps) {
   const [showNewComment, setShowNewComment] = useState(false);
   const commentRef = useRef<HTMLDivElement>(null);
   const newCommentTextAreaRef = useRef<HTMLTextAreaElement>(null);
   const { toast } = useToast();
   return (
-    <article className={commentVariants({ level })}>
+    <>
       {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
-      <div className="grid gap-2 flex-1 p-1" tabIndex={0} ref={commentRef}>
+      <div className="flex flex-col gap-2 p-1" tabIndex={0} ref={commentRef}>
         {children}
         <div className="flex items-center gap-4">
           <SimpleTooltip content="Vote" side="bottom">
@@ -173,7 +157,7 @@ export function CommentClientWrapperWithToolbar({
           }
         />
       ) : null}
-    </article>
+    </>
   );
 }