Extract providers for comment component

app/context/CommentFormProvider.tsx

@@ -0,0 +1,24 @@
+import {createContext, ReactNode, RefObject, useContext, useRef} from 'react'
+
+type CommentFormContext = {
+    commentFormRef?: RefObject<HTMLTextAreaElement | null>
+    focusCommentForm: () => void
+}
+
+export const CommentFormContext = createContext<CommentFormContext | null>(null)
+
+export const useCommentFormContext = () => useContext(CommentFormContext)
+
+export default function CommentFormProvider({children}: { children: ReactNode }) {
+    const commentFormRef = useRef<HTMLTextAreaElement>(null)
+
+    const focusCommentForm = () => {
+        commentFormRef.current?.focus()
+    }
+
+    return (
+        <CommentFormContext.Provider value={{commentFormRef, focusCommentForm}}>
+            {children}
+        </CommentFormContext.Provider>
+    )
+}

app/context/ReplyProvider.tsx

@@ -0,0 +1,19 @@
+import {createContext, ReactNode, useContext, useState} from 'react'
+import type {Comment} from '@/types'
+
+type ReplyContext = {
+    replyTo: Comment | null
+    setReplyTo: (replyTo: Comment | null) => void
+}
+
+export const ReplyContext = createContext<ReplyContext | null>(null)
+
+export const useReplyContext = () => useContext(ReplyContext)
+
+export default function ReplyProvider({children}: { children: ReactNode }) {
+    const [replyTo, setReplyTo] = useState<Comment | null>(null)
+
+    return (
+        <ReplyContext.Provider value={{replyTo, setReplyTo}}>{children}</ReplyContext.Provider>
+    )
+}

components/layouts/ArticleLayout.tsx

@@ -10,6 +10,8 @@ import {getAllArticles} from '@/lib/getAllArticles'
 import {getComments} from '@/lib/getComments'
 import {format} from 'date-fns'
 
+import type {Comment} from '@/types'
+
 type ArticleLayout = {
     title: string
     date: string

components/ui/Comments.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, {createContext, ReactNode, RefObject, useActionState, useContext, useEffect, useRef, useState} from 'react'
+import React, {ReactNode, useActionState, useEffect, useState} from 'react'
 import {useSession} from 'next-auth/react'
 import Image from 'next/image'
 import clsx from 'clsx'
@@ -9,27 +9,18 @@ import {Button} from '@/components/ui/Button'
 import {GitHubIcon} from '@/components/icons/SocialIcons'
 import {ArrowLeftIcon} from '@/components/icons/ArrowLeftIcon'
 import {getShortDurationFromNow} from '@/lib/dateFns'
+import ReplyProvider, {useReplyContext} from '@/app/context/ReplyProvider'
+import CommentFormProvider, {useCommentFormContext} from '@/app/context/CommentFormProvider'
 
-type Comment = {
+import type {Comment} from '@/types'
-    id: number
-    content: string
-    created_at: string
-    parent_id: number | null
-    user: {
-        id: number
-        name: string
-        image: string
-    }
-    replies?: Comment[]
-}
 
 type ReplyButton = {
     comment: Comment
 }
 
 Comments.ReplyButton = function ReplyButton({comment}: ReplyButton) {
-    const replyContext = useContext(ReplyContext)
+    const replyContext = useReplyContext()
-    const commentFormContext = useContext(CommentFormContext)
+    const commentFormContext = useCommentFormContext()
     const {data: session} = useSession()
 
     const handleReplyButton = async (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -132,18 +123,13 @@ const initialState: InitialState = {
     message: ''
 }
 
-const CommentFormContext = createContext<{ focusCommentForm: () => void } | null>(null)
+Comments.Form = function Form({slug}: { slug: string }) {
-
-type CommentsFormsProps = {
-    slug: string
-    commentFormRef?: RefObject<HTMLTextAreaElement | null>
-}
-
-Comments.Form = function Form({slug, commentFormRef}: CommentsFormsProps) {
     const [parentId, setParentId] = useState<string | number | null>('')
     const [state, formAction, pending] = useActionState(addComment, initialState)
     const {data: session} = useSession()
-    const replyContext = useContext(ReplyContext)
+    const replyContext = useReplyContext()
+    const commentFormContext = useCommentFormContext()
+    const commentFormRef = commentFormContext?.commentFormRef
 
     useEffect(() => {
         if (replyContext?.replyTo?.parent_id !== null) {
@@ -214,37 +200,22 @@ Comments.Form = function Form({slug, commentFormRef}: CommentsFormsProps) {
     )
 }
 
-
-type ReplyContextType = {
-    replyTo: Comment | null
-    setReplyTo: (replyTo: Comment | null) => void
-}
-
-const ReplyContext = createContext<ReplyContextType | null>(null)
-
 type CommentsProps = {
     slug: string
-    comments?: Comment[]
+    comments?: any
 }
 
 export default function Comments({slug, comments}: CommentsProps) {
-    const [replyTo, setReplyTo] = useState<Comment | null>(null)
-    const commentFormRef = useRef<HTMLTextAreaElement>(null)
-
-    const focusCommentForm = () => {
-        commentFormRef.current?.focus()
-    }
-
     return (
-        <ReplyContext.Provider value={{replyTo, setReplyTo}}>
+        <CommentFormProvider>
-            <CommentFormContext.Provider value={{focusCommentForm}}>
+            <ReplyProvider>
                 <div className="mt-24">
                     {comments &&
                         <Comments.List comments={comments}/>
                     }
-                    <Comments.Form slug={slug} commentFormRef={commentFormRef}/>
+                    <Comments.Form slug={slug}/>
                 </div>
-            </CommentFormContext.Provider>
+            </ReplyProvider>
-        </ReplyContext.Provider>
+        </CommentFormProvider>
     )
 }

types/index.ts

@@ -23,3 +23,16 @@ export type Repo = {
         color: string
     }
 }
+
+export type Comment = {
+    id: number
+    content: string
+    created_at: string
+    parent_id: number | null
+    user: {
+        id: number
+        name: string
+        image: string
+    }
+    replies?: Comment[]
+}