From ed5f5a82569927ca4d3d8f6698730fe9c591aadb Mon Sep 17 00:00:00 2001
From: Ryan Freeman <hello@ryanfreeman.dev>
Date: Wed, 14 May 2025 21:20:14 +0100
Subject: [PATCH] Update comment component

---
 components/ui/Code.tsx          |   7 +-
 components/ui/Comments.tsx      | 122 +++++++++++++++++---------------
 components/ui/StatusMessage.tsx |   2 +-
 next.config.mjs                 |   4 ++
 4 files changed, 71 insertions(+), 64 deletions(-)

diff --git a/components/ui/Code.tsx b/components/ui/Code.tsx
index d17060b..47624dd 100644
--- a/components/ui/Code.tsx
+++ b/components/ui/Code.tsx
@@ -8,22 +8,19 @@ import clsx from 'clsx'
 export function Code({children}: { children: ReactNode }) {
     const [copied, setCopied] = useState<boolean>(false)
     const preRef = useRef<HTMLPreElement>(null)
-    const buttonRef = useRef<HTMLButtonElement>(null)
 
     const handleCopy = async (e: React.MouseEvent<HTMLButtonElement>) => {
         e.preventDefault()
         await navigator.clipboard.writeText(preRef.current?.innerText ?? '')
         setCopied(true)
         setTimeout(() => setCopied(false), 1000)
-        buttonRef.current?.blur()
     }
 
     return (
         <pre className="relative group" ref={preRef}>
                 <button
-                    className="absolute top-0 right-0 m-5 text-zinc-400 hover:text-zinc-50"
-                    onClick={handleCopy} aria-label={`${!copied ? 'Copy this code' : 'Copied!'}`}
-                    ref={buttonRef}>
+                    className="absolute top-0 right-0 m-5 text-zinc-400"
+                    onClick={handleCopy} aria-label={`${!copied ? 'Copy this code' : 'Copied!'}`}>
                     <div className="relative size-6">
                         <CheckIcon
                             className={clsx('absolute text-green-500 ease-in transform transition', !copied ? 'scale-0' : 'scale-100')}/>
diff --git a/components/ui/Comments.tsx b/components/ui/Comments.tsx
index a8fe8dc..3660015 100644
--- a/components/ui/Comments.tsx
+++ b/components/ui/Comments.tsx
@@ -27,9 +27,6 @@ Comments.ReplyButton = function ReplyButton({comment}: ReplyButton) {
 
     const handleReplyButton = async (e: React.MouseEvent<HTMLButtonElement>) => {
         e.preventDefault()
-        if (!session) {
-            await loginWithGitHub()
-        }
         commentFormContext?.setCommentLength(0)
         commentFormContext?.commentFormRef?.current?.form?.reset()
         commentFormContext?.setReplyTo(comment);
@@ -52,6 +49,8 @@ Comments.Comment = function Comment({comment, isReply = false, className}: {
     isReply?: boolean
     className?: string
 }) {
+    const {data: session} = useSession()
+
     return (
         <>
             <article
@@ -70,7 +69,9 @@ Comments.Comment = function Comment({comment, isReply = false, className}: {
                         </p>
                     </div>
                     <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400 max-w-xl">{comment.content}</p>
-                    <Comments.ReplyButton comment={comment}/>
+                    {session &&
+                        <Comments.ReplyButton comment={comment}/>
+                    }
                 </div>
             </article>
         </>
@@ -82,27 +83,29 @@ type CommentsListProps = {
 }
 
 Comments.List = function List({comments}: CommentsListProps) {
+    const commentCount: number = comments.reduce((acc, comment) => {
+        if (!comment) return acc
+        const replyCount = comment.replies?.length || 0
+        return (acc + 1) + replyCount
+    }, 0)
+
     return (
-        <>
-            {comments.length > 0 &&
-                <section>
-                    <h3 className="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100 mb-4">
-                        Comments
-                    </h3>
-                    {comments.map((comment) => (
-                        <React.Fragment key={comment.id}>
-                            <Comments.Comment comment={comment}/>
-                            {(typeof comment.replies !== 'undefined' && comment.replies.length > 0) ?
-                                comment.replies.map((reply, i) => (
-                                    <Comments.Comment key={reply.id} comment={reply} isReply={true}
-                                                      className={`${i + 1 === comment.replies?.length ? 'mb-6' : ''}`}/>
-                                )) : null
-                            }
-                        </React.Fragment>
-                    ))}
-                </section>
-            }
-        </>
+        <section>
+            <h3 className="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100 mb-4">
+                {commentCount > 0 ? `${commentCount} comment${commentCount > 1 ? 's' : ''}` : 'No comments'}
+            </h3>
+            {comments.map((comment) => (
+                <React.Fragment key={comment.id}>
+                    <Comments.Comment comment={comment}/>
+                    {(typeof comment.replies !== 'undefined' && comment.replies.length > 0) ?
+                        comment.replies.map((reply, i) => (
+                            <Comments.Comment key={reply.id} comment={reply} isReply={true}
+                                              className={`${i + 1 === comment.replies?.length ? 'mb-6' : ''}`}/>
+                        )) : null
+                    }
+                </React.Fragment>
+            ))}
+        </section>
     )
 }
 
@@ -141,7 +144,11 @@ Comments.Form = function Form({slug}: { slug: string }) {
         }
     }
 
-    const handleSubmit = () => {
+    const handleSubmit = async (e: React.FormEvent) => {
+        if (!session) {
+            e.preventDefault()
+            await loginWithGitHub()
+        }
         commentFormContext?.setReplyTo(null)
         commentFormContext?.setCommentLength(0)
     }
@@ -154,20 +161,15 @@ Comments.Form = function Form({slug}: { slug: string }) {
 
     return (
         <div className="mt-16">
-            {!session ?
-                <form action={async () => await loginWithGitHub()}>
-                    <Button variant="secondary">
-                        <GitHubIcon className="w-6 h-6 dark:fill-white"/>Sign in to comment
-                    </Button>
-                </form> :
-                <form action={formAction} onSubmit={handleSubmit}>
-                    <div className="flex gap-x-4">
-                        {session?.user?.image !== null &&
-                            <Image className="size-12 rounded-full" src={session?.user?.image ?? ''}
-                                   alt={session?.user?.name ?? ''}
-                                   width={64} height={64}/>
-                        }
-                        <div className="flex-1">
+            <form action={formAction} onSubmit={handleSubmit}>
+                <div className="flex gap-x-4">
+                    {session?.user?.image !== null &&
+                        <Image className="size-12 rounded-full"
+                               src={session?.user?.image ?? 'https://github.com/identicons/unknown.png'}
+                               alt={session?.user?.name ?? 'Unknown user'}
+                               width={64} height={64}/>
+                    }
+                    <div className="flex-1">
                             <textarea
                                 id="comment"
                                 name="comment"
@@ -175,35 +177,39 @@ Comments.Form = function Form({slug}: { slug: string }) {
                                 className="resize-none block w-full rounded-md px-3 py-1.5 text-base text-zinc-600 dark:text-zinc-400 bg-[#fafafa] dark:bg-[#121212] border-[1px] dark:border-zinc-700/40 -outline-offset-1 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 focus:dark:outline-indigo-600"
                                 onKeyDown={handleKeyDown}
                                 onChange={(e) => commentFormContext?.setCommentLength(e.target.value.length ?? 0)}
-                                disabled={pending}
+                                disabled={pending || !session}
                                 defaultValue={''}
                                 maxLength={commentFormContext?.commentMaxLength}
                                 ref={commentFormRef}
-                                placeholder={`${commentFormContext?.replyTo ? `Reply to ${commentFormContext.replyTo.user.name}` : 'Add a comment'}`}
-                                required
+                                placeholder={`${!session ? 'Sign in to comment' : commentFormContext?.replyTo ? `Reply to ${commentFormContext.replyTo.user.name}` : 'Add a comment'}`}
+                                required={!!session}
                             />
-                            <input type="hidden" name="parent_id" value={parentId ?? ''}/>
-                            <input type="hidden" name="slug" value={slug}/>
-                            <div className="mt-2 flex justify-between items-center gap-x-4">
-                                <p className="text-sm text-zinc-600 dark:text-zinc-400">{`${commentFormContext?.commentLength} / ${commentFormContext?.commentMaxLength}`}</p>
-                                <div className="flex gap-x-4">
-                                    {commentFormContext?.replyTo &&
-                                        <button
-                                            className="text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 hover:dark:text-zinc-50"
-                                            onClick={handleCancel}>Cancel</button>
-                                    }
+                        <input type="hidden" name="parent_id" value={parentId ?? ''}/>
+                        <input type="hidden" name="slug" value={slug}/>
+                        <div className="mt-2 flex justify-between items-center gap-x-4">
+                            <p className="text-sm text-zinc-600 dark:text-zinc-400">{`${commentFormContext?.commentLength} / ${commentFormContext?.commentMaxLength}`}</p>
+                            <div className="flex gap-x-4">
+                                {commentFormContext?.replyTo &&
+                                    <button
+                                        className="text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 hover:dark:text-zinc-50"
+                                        onClick={handleCancel}>Cancel</button>
+                                }
+                                {session ?
                                     <Button variant="secondary" disabled={pending}>
                                         Comment
+                                    </Button> :
+                                    <Button variant="secondary">
+                                        <GitHubIcon className="w-6 h-6 dark:fill-white"/>Sign in with GitHub
                                     </Button>
-                                </div>
+                                }
                             </div>
-                            <StatusMessage className="mt-2">
-                                {state.message}
-                            </StatusMessage>
                         </div>
+                        <StatusMessage className="mt-2">
+                            {state.message}
+                        </StatusMessage>
                     </div>
-                </form>
-            }
+                </div>
+            </form>
         </div>
     )
 }
diff --git a/components/ui/StatusMessage.tsx b/components/ui/StatusMessage.tsx
index f429e45..af9cdc4 100644
--- a/components/ui/StatusMessage.tsx
+++ b/components/ui/StatusMessage.tsx
@@ -17,7 +17,7 @@ export function StatusMessage({children, className, errorConditions}: StatusMess
         <>
             {children &&
                 <div
-                    className={clsx(`flex items-start sm:items-center ${className ?? ''}, ${isError ? 'text-red-800 dark:text-red-600' : 'text-green-800 dark:text-green-600'}`)}>
+                    className={clsx(`flex items-start sm:items-center ${className ?? ''}, ${isError ? 'text-red-800 dark:text-red-500' : 'text-green-800 dark:text-green-500'}`)}>
                     {!isError ? <CheckIcon className="size-5 mt-0.5 sm:mt-0 mr-1"/>
                         : <CrossIcon className="size-5 mt-0.5 sm:mt-0 mr-1 "/>}
                     <p aria-live="polite" role="status"
diff --git a/next.config.mjs b/next.config.mjs
index e5fdf49..6d6240e 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -16,6 +16,10 @@ const nextConfig = {
             {
                 protocol: 'https',
                 hostname: 'avatars.githubusercontent.com'
+            },
+            {
+                protocol: 'https',
+                hostname: 'github.com'
             }
         ]
     },