thiigy dissappears after submit

web/components/comment-input.tsx

@@ -1,12 +1,18 @@
-import { PaperAirplaneIcon } from '@heroicons/react/solid'
+import { PaperAirplaneIcon, XIcon } from '@heroicons/react/solid'
 import { Editor } from '@tiptap/react'
 import clsx from 'clsx'
+import { Answer } from 'common/answer'
+import { AnyContractType, Contract } from 'common/contract'
 import { User } from 'common/user'
 import { useEffect, useState } from 'react'
+import { useEvent } from 'web/hooks/use-event'
 import { useUser } from 'web/hooks/use-user'
 import { MAX_COMMENT_LENGTH } from 'web/lib/firebase/comments'
+import Curve from 'web/public/custom-components/curve'
 import { Avatar } from './avatar'
 import { TextEditor, useTextEditor } from './editor'
+import { CommentsAnswer } from './feed/feed-answer-comment-group'
+import { ContractCommentInput, ReplyTo } from './feed/feed-comments'
 import { Row } from './layout/row'
 import { LoadingIndicator } from './loading-indicator'
 
@@ -151,3 +157,42 @@ export function CommentInputTextArea(props: {
     </>
   )
 }
+
+export function AnswerCommentInput(props: {
+  contract: Contract<AnyContractType>
+  answerResponse: Answer
+  onCancelAnswerResponse?: () => void
+}) {
+  const { contract, answerResponse, onCancelAnswerResponse } = props
+  // const [replyTo, setReplyTo] = useState<ReplyTo | undefined>({
+  //   id: answerResponse.id,
+  //   username: answerResponse.username,
+  // })
+
+  return (
+    <>
+      <Row className="gap-2">
+        <CommentsAnswer answer={answerResponse} contract={contract} />
+      </Row>
+      <Row>
+        <div className="ml-1">
+          <Curve size={28} strokeWidth={1} color="#D8D8EB" />
+        </div>
+        <div className="w-full pt-1">
+          <ContractCommentInput
+            contract={contract}
+            parentAnswerOutcome={answerResponse.number.toString()}
+            replyTo={{
+              id: answerResponse.id,
+              username: answerResponse.username,
+            }}
+            onSubmitComment={onCancelAnswerResponse}
+          />
+        </div>
+        <button onClick={onCancelAnswerResponse}>
+          <XIcon className="h-5 w-5" />
+        </button>
+      </Row>
+    </>
+  )
+}

web/components/contract/contract-tabs.tsx

@@ -4,12 +4,7 @@ import { Pagination } from 'web/components/pagination'
 import { FeedBet } from '../feed/feed-bets'
 import { FeedLiquidity } from '../feed/feed-liquidity'
 import { CommentsAnswer } from '../feed/feed-answer-comment-group'
-import {
+import { FeedCommentThread, ContractCommentInput } from '../feed/feed-comments'
-  FeedCommentThread,
-  ContractCommentInput,
-  CommentActions,
-  AnswerCommentInput,
-} from '../feed/feed-comments'
 import { groupBy, sortBy, sum } from 'lodash'
 import { Bet } from 'common/bet'
 import { Contract } from 'common/contract'
@@ -51,6 +46,7 @@ import { ArrowRightIcon, ReplyIcon, XIcon } from '@heroicons/react/solid'
 import Curve from 'web/public/custom-components/curve'
 import { Answer } from 'common/answer'
 import dayjs from 'dayjs'
+import { AnswerCommentInput } from '../comment-input'
 
 export function ContractTabs(props: {
   contract: Contract
@@ -111,6 +107,7 @@ 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', {