From 141856fd1fd15d3398b366a9dc17aadb263bb457 Mon Sep 17 00:00:00 2001 From: ingawei 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: { ) - // 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( 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} /> - +
+ +
{!isCreator && }