From a4ff0c3e38a71a97c1c2b2283cfef5b0fb0fda33 Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Wed, 21 Sep 2022 14:17:38 -0700
Subject: [PATCH] Scroll to comment on render if highlighted

---
 web/components/feed/feed-answer-comment-group.tsx | 10 +++++++++-
 web/components/feed/feed-comments.tsx             | 10 +++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/web/components/feed/feed-answer-comment-group.tsx b/web/components/feed/feed-answer-comment-group.tsx
index 740ff31c..e17ea578 100644
--- a/web/components/feed/feed-answer-comment-group.tsx
+++ b/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, { 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'
@@ -30,6 +30,13 @@ export function FeedAnswerCommentGroup(props: {
   const router = useRouter()
   const answerElementId = `answer-${answer.id}`
   const highlighted = router.asPath.endsWith(`#${answerElementId}`)
+  const answerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (highlighted && answerRef.current != null) {
+      answerRef.current.scrollIntoView(true)
+    }
+  }, [highlighted])
 
   return (
     <Col className="relative flex-1 items-stretch gap-3">
@@ -38,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} />
diff --git a/web/components/feed/feed-comments.tsx b/web/components/feed/feed-comments.tsx
index 2f335868..1b62690b 100644
--- a/web/components/feed/feed-comments.tsx
+++ b/web/components/feed/feed-comments.tsx
@@ -1,6 +1,6 @@
 import { ContractComment } from 'common/comment'
 import { Contract } from 'common/contract'
-import React, { 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'
@@ -96,9 +96,17 @@ export function FeedComment(props: {
 
   const router = useRouter()
   const highlighted = router.asPath.endsWith(`#${comment.id}`)
+  const commentRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (highlighted && commentRef.current != null) {
+      commentRef.current.scrollIntoView(true)
+    }
+  }, [highlighted])
 
   return (
     <Row
+      ref={commentRef}
       id={comment.id}
       className={clsx(
         'relative',