added scroll to comment

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

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 (
       <>

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'

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
+        <div ref={answerRef}>
-          contract={contract}
+          <ContractTabs
-          bets={bets}
+            contract={contract}
-          userBets={userBets}
+            bets={bets}
-          comments={comments}
+            userBets={userBets}
-          answerResponse={answerResponse}
+            comments={comments}
-          onCancelAnswerResponse={onCancelAnswerResponse}
+            answerResponse={answerResponse}
-        />
+            onCancelAnswerResponse={onCancelAnswerResponse}
+          />
+        </div>
       </Col>
       {!isCreator && <RecommendedContractsWidget contract={contract} />}
       <ScrollToTopButton className="fixed bottom-16 right-2 z-20 lg:bottom-2 xl:hidden" />