Fix up comment permalink stuff (#915)

* Eliminate needless state/effects to highlight comments

* Scroll to comment on render if highlighted

web/components/feed/feed-answer-comment-group.tsx

@@ -1,7 +1,7 @@
 import { Answer } from 'common/answer'
 import { FreeResponseContract } from 'common/contract'
 import { ContractComment } from 'common/comment'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { Col } from 'web/components/layout/col'
 import { Row } from 'web/components/layout/row'
 import { Avatar } from 'web/components/avatar'
@@ -27,15 +27,16 @@ export function FeedAnswerCommentGroup(props: {
   const { username, avatarUrl, name, text } = answer
 
   const [replyTo, setReplyTo] = useState<ReplyTo>()
-  const [highlighted, setHighlighted] = useState(false)
   const router = useRouter()
   const answerElementId = `answer-${answer.id}`
+  const highlighted = router.asPath.endsWith(`#${answerElementId}`)
+  const answerRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    if (router.asPath.endsWith(`#${answerElementId}`)) {
+    if (highlighted && answerRef.current != null) {
-      setHighlighted(true)
+      answerRef.current.scrollIntoView(true)
     }
-  }, [answerElementId, router.asPath])
+  }, [highlighted])
 
   return (
     <Col className="relative flex-1 items-stretch gap-3">
@@ -44,6 +45,7 @@ export function FeedAnswerCommentGroup(props: {
           'gap-3 space-x-3 pt-4 transition-all duration-1000',
           highlighted ? `-m-2 my-3 rounded bg-indigo-500/[0.2] p-2` : ''
         )}
+        ref={answerRef}
         id={answerElementId}
       >
         <Avatar username={username} avatarUrl={avatarUrl} />

web/components/feed/feed-comments.tsx

@@ -1,6 +1,6 @@
 import { ContractComment } from 'common/comment'
 import { Contract } from 'common/contract'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { useUser } from 'web/hooks/use-user'
 import { formatMoney } from 'common/util/format'
 import { useRouter } from 'next/router'
@@ -94,16 +94,19 @@ export function FeedComment(props: {
     money = formatMoney(Math.abs(comment.betAmount))
   }
 
-  const [highlighted, setHighlighted] = useState(false)
   const router = useRouter()
+  const highlighted = router.asPath.endsWith(`#${comment.id}`)
+  const commentRef = useRef<HTMLDivElement>(null)
+
   useEffect(() => {
-    if (router.asPath.endsWith(`#${comment.id}`)) {
+    if (highlighted && commentRef.current != null) {
-      setHighlighted(true)
+      commentRef.current.scrollIntoView(true)
     }
-  }, [comment.id, router.asPath])
+  }, [highlighted])
 
   return (
     <Row
+      ref={commentRef}
       id={comment.id}
       className={clsx(
         'relative',