Render comments in client

app/api/comments/[slug]/route.ts

@@ -1,8 +1,10 @@
-import {createClient} from '@/lib/supabase/client'
 import {QueryData} from '@supabase/supabase-js'
-import type {Comment} from '@/types'
+import {createClient} from '@/lib/supabase/server'
+import {Comment} from '@/types'
+
+export async function GET(request: Request, {params}: { params: Promise<{ slug: string }> }) {
+    const {slug} = await params
 
-export async function getComments(slug: string) {
     try {
         const supabase = await createClient()
         const commentsQuery = supabase
@@ -30,7 +32,8 @@ export async function getComments(slug: string) {
             return acc
         }, {})
 
-        return comments?.reduce<Comment[]>((nested, comment) => {
+        // @ts-ignore
+        const nestedComments = comments?.reduce<Comment[]>((nested, comment) => {
             if (typeof commentMap !== 'undefined') {
                 if (comment.parent_id !== null) {
                     const parent: Comment = commentMap[comment.parent_id]
@@ -41,10 +44,13 @@ export async function getComments(slug: string) {
                 } else {
                     nested.push(commentMap[comment.id])
                 }
+                return nested
             }
-            return nested
         }, [])
+
+        return new Response(JSON.stringify(nestedComments), {status: 200})
     } catch (error) {
         console.error(error)
+        return new Response(JSON.stringify({status: 'Internal Server Error'}), {status: 500})
     }
 }

components/layouts/ArticleLayout.tsx

@@ -8,7 +8,6 @@ import ArticleNav from '@/components/ui/ArticleNav'
 import {Comments} from '@/components/ui/Comments'
 import {Subscribe} from '@/components/ui/Subscribe'
 import {getAllArticles} from '@/lib/getAllArticles'
-import {getComments} from '@/lib/getComments'
 import {format} from 'date-fns'
 
 type ArticleLayout = {
@@ -52,7 +51,6 @@ export async function ArticleLayout({
                                         slug,
                                         children
                                     }: ArticleLayout) {
-    const comments = await getComments(slug)
     const articles = await getAllArticles(false)
     const {prev, next} = findAdjacentArticles(articles, slug)
 
@@ -85,7 +83,7 @@ export async function ArticleLayout({
                         <Prose className="mt-8" data-mdx-content>{children}</Prose>
                     </article>
                     <Subscribe/>
-                    <Comments slug={slug} comments={comments}/>
+                    <Comments slug={slug}/>
                     <ArticleNav prev={prev} next={next}/>
                 </div>
             </div>

components/ui/Comments.tsx

@@ -11,7 +11,9 @@ import {GitHubIcon} from '@/components/icons/SocialIcons'
 import {ArrowLeftIcon} from '@/components/icons/ArrowLeftIcon'
 import {StatusMessage} from '@/components/ui/StatusMessage'
 import {getShortDurationFromNow, truncateDatetime} from '@/lib/dateFns'
+import fetcher from '@/lib/fetcher'
 import CommentFormProvider, {useCommentFormContext} from '@/app/context/CommentFormProvider'
+import useSWR from 'swr'
 
 import type {Comment} from '@/types'
 
@@ -19,7 +21,6 @@ type ReplyButton = {
     comment: Comment
 }
 
-
 Comments.ReplyButton = function ReplyButton({comment}: ReplyButton) {
     const commentFormContext = useCommentFormContext()
     const {data: session} = useSession()
@@ -209,15 +210,21 @@ Comments.Form = function Form({slug}: { slug: string }) {
 
 type CommentsProps = {
     slug: string
-    comments?: any
 }
 
-export function Comments({slug, comments}: CommentsProps) {
+export function Comments({slug}: CommentsProps) {
+    const {data: comments, error, isLoading} = useSWR(`/api/comments/${slug}`, fetcher) as {
+        data: Comment[],
+        error: Error,
+        isLoading: boolean
+    }
+
     return (
         <CommentFormProvider>
             <div className="mt-24">
-                {comments &&
+                {(comments && !error) ?
                     <Comments.List comments={comments}/>
+                    : null
                 }
                 <Comments.Form slug={slug}/>
             </div>