From 141856fd1fd15d3398b366a9dc17aadb263bb457 Mon Sep 17 00:00:00 2001
From: ingawei <ingawei@gmail.com>
Date: Tue, 11 Oct 2022 19:19:22 -0700
Subject: [PATCH] added scroll to comment

---
 web/components/comment-input.tsx          |  2 +-
 web/components/contract/contract-tabs.tsx | 11 -----------
 web/components/layout/tabs.tsx            |  2 +-
 web/pages/[username]/[contractSlug].tsx   | 24 ++++++++++++-----------
 4 files changed, 15 insertions(+), 24 deletions(-)

diff --git a/web/components/comment-input.tsx b/web/components/comment-input.tsx
index 43768a12..ac24db6e 100644
--- a/web/components/comment-input.tsx
+++ b/web/components/comment-input.tsx
@@ -158,7 +158,7 @@ export function CommentInputTextArea(props: {
           attrs: { label: replyTo.username, id: replyTo.id },
         })
         .insertContent(' ')
-        .focus()
+        .focus(undefined, { scrollIntoView: false })
         .run()
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/web/components/contract/contract-tabs.tsx b/web/components/contract/contract-tabs.tsx
index b30c36aa..0e0fdb71 100644
--- a/web/components/contract/contract-tabs.tsx
+++ b/web/components/contract/contract-tabs.tsx
@@ -107,7 +107,6 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
   onCancelAnswerResponse?: () => void
 }) {
   const { contract, answerResponse, onCancelAnswerResponse } = props
-  console.log(answerResponse)
   const tips = useTipTxns({ contractId: contract.id })
   const comments = useComments(contract.id) ?? props.comments
   const [sort, setSort] = usePersistentState<'Newest' | 'Best'>('Newest', {
@@ -175,16 +174,6 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
     </Row>
   )
 
-  // console.log('answer response:: ', answerResponse)
-  // sortedComments.map((comment, index) =>
-  //   console.log(
-  //     index,
-  //     ',',
-  //     comment.content.content[0].content[0].text,
-  //     ':',
-  //     dayjs(comment.createdTime).format('MM/DD/YY H:mm')
-  //   )
-  // )
   if (contract.outcomeType === 'FREE_RESPONSE') {
     return (
       <>
diff --git a/web/components/layout/tabs.tsx b/web/components/layout/tabs.tsx
index deff2203..4f39306f 100644
--- a/web/components/layout/tabs.tsx
+++ b/web/components/layout/tabs.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx'
 import { useRouter, NextRouter } from 'next/router'
-import { ReactNode, useState } from 'react'
+import { ReactNode, useEffect, useState } from 'react'
 import { track } from '@amplitude/analytics-browser'
 import { Col } from './col'
 import { Tooltip } from 'web/components/tooltip'
diff --git a/web/pages/[username]/[contractSlug].tsx b/web/pages/[username]/[contractSlug].tsx
index 26bd6d1e..680c3c14 100644
--- a/web/pages/[username]/[contractSlug].tsx
+++ b/web/pages/[username]/[contractSlug].tsx
@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useMemo, useState } from 'react'
+import React, { memo, useEffect, useMemo, useRef, useState } from 'react'
 import { ArrowLeftIcon } from '@heroicons/react/outline'
 import dayjs from 'dayjs'
 
@@ -209,11 +209,11 @@ export function ContractPageContent(
   const [answerResponse, setAnswerResponse] = useState<Answer | undefined>(
     undefined
   )
-
   const onAnswerCommentClick = useEvent((answer: Answer) => {
     setAnswerResponse(answer)
+    answerRef.current.scrollIntoView({ behavior: 'smooth' })
   })
-
+  const answerRef = useRef(null)
   const onCancelAnswerResponse = useEvent(() => setAnswerResponse(undefined))
 
   return (
@@ -293,14 +293,16 @@ export function ContractPageContent(
           userBets={userBets}
         />
 
-        <ContractTabs
-          contract={contract}
-          bets={bets}
-          userBets={userBets}
-          comments={comments}
-          answerResponse={answerResponse}
-          onCancelAnswerResponse={onCancelAnswerResponse}
-        />
+        <div ref={answerRef}>
+          <ContractTabs
+            contract={contract}
+            bets={bets}
+            userBets={userBets}
+            comments={comments}
+            answerResponse={answerResponse}
+            onCancelAnswerResponse={onCancelAnswerResponse}
+          />
+        </div>
       </Col>
       {!isCreator && <RecommendedContractsWidget contract={contract} />}
       <ScrollToTopButton className="fixed bottom-16 right-2 z-20 lg:bottom-2 xl:hidden" />