Refactor to use useImperativeHandle for Reply

stackernews · Sep 27, 2023 · 9f14021 · 9f14021
1 parent 8ae0d9a
commit 9f14021
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 24 deletions.
diff --git a/components/comment.js b/components/comment.js
@@ -213,7 +213,7 @@ export default function Comment ({
           : (
             <div className={styles.children}>
               {!noReply &&
-                <Reply depth={depth + 1} item={item} replyOpen={replyOpen} innerRef={replyRef}>
+                <Reply depth={depth + 1} item={item} replyOpen={replyOpen} ref={replyRef}>
                   {root.bounty && !bountyPaid && <PayBounty item={item} />}
                 </Reply>}
               {children}

diff --git a/components/item-full.js b/components/item-full.js
@@ -158,7 +158,7 @@ function TopLevelItem ({ item, noReply, ...props }) {
       </div>
       {!noReply &&
         <>
-          <Reply item={item} replyOpen placeholder={item.ncomments ? undefined : 'start the conversation ...'} innerRef={replyRef} />
+          <Reply item={item} replyOpen placeholder={item.ncomments ? undefined : 'start the conversation ...'} ref={replyRef} />
           {!item.position && !item.isJob && !item.parentId && !item.bounty > 0 && <Related title={item.title} itemId={item.id} />}
           {item.bounty > 0 && <PastBounties item={item} />}
         </>}

diff --git a/components/reply.js b/components/reply.js
@@ -3,7 +3,7 @@ import { gql, useMutation } from '@apollo/client'
 import styles from './reply.module.css'
 import { COMMENTS } from '../fragments/comments'
 import { useMe } from './me'
-import { useEffect, useState, useRef, useCallback } from 'react'
+import { forwardRef, useCallback, useEffect, useState, useRef, useImperativeHandle } from 'react'
 import Link from 'next/link'
 import FeeButton from './fee-button'
 import { commentsViewedAfterComment } from '../lib/new-comments'
@@ -34,32 +34,31 @@ function FreebieDialog () {
   )
 }
 
-export default function Reply ({ item, onSuccess, replyOpen, children, placeholder, innerRef }) {
+export default forwardRef(function Reply ({ item, onSuccess, replyOpen, children, placeholder }, ref) {
   const [reply, setReply] = useState(replyOpen)
   const me = useMe()
   const parentId = item.id
   const replyInput = useRef(null)
   const formInnerRef = useRef()
-  const quoteReply = useCallback(() => {
-    if (!reply) {
-      setReply(true)
-    }
-    let updatedValue
-    if (formInnerRef.current && formInnerRef.current.values && !formInnerRef.current.values.text) {
-      updatedValue = quote(item.text)
-    } else if (formInnerRef.current?.values?.text) {
-      // append quote reply text if the input already has content
-      updatedValue = `${replyInput.current.value}\n${quote(item.text)}`
-    }
-    if (updatedValue) {
-      replyInput.current.value = updatedValue
-      formInnerRef.current.setValues({ text: updatedValue })
-      window.localStorage.setItem(`reply-${parentId}-text`, updatedValue)
+  useImperativeHandle(ref, () => ({
+    quoteReply: () => {
+      if (!reply) {
+        setReply(true)
+      }
+      let updatedValue
+      if (formInnerRef.current && formInnerRef.current.values && !formInnerRef.current.values.text) {
+        updatedValue = quote(item.text)
+      } else if (formInnerRef.current?.values?.text) {
+        // append quote reply text if the input already has content
+        updatedValue = `${replyInput.current.value}\n${quote(item.text)}`
+      }
+      if (updatedValue) {
+        replyInput.current.value = updatedValue
+        formInnerRef.current.setValues({ text: updatedValue })
+        window.localStorage.setItem(`reply-${parentId}-text`, updatedValue)
+      }
     }
-  }, [reply, item])
-  if (innerRef) {
-    innerRef.current = { quoteReply }
-  }
+  }), [reply, item])
 
   useEffect(() => {
     setReply(replyOpen || !!window.localStorage.getItem('reply-' + parentId + '-' + 'text'))
@@ -168,7 +167,7 @@ export default function Reply ({ item, onSuccess, replyOpen, children, placehold
       </div>
     </div>
   )
-}
+})
 
 export function ReplySkeleton () {
   return (