I've merged and now it's a mess

2022-10-11 20:29:17 -07:00 · 2022-10-11 20:29:17 -07:00 · 015e3ef24c
commit 015e3ef24c
parent 89fcbaeb07
2 changed files with 87 additions and 139 deletions
--- a/web/components/feed/feed-answer-comment-group.tsx
+++ b/web/components/feed/feed-answer-comment-group.tsx
@ -13,6 +13,7 @@ import { useUser } from 'web/hooks/use-user'
 import { useEvent } from 'web/hooks/use-event'
 import { CommentTipMap } from 'web/hooks/use-tip-txns'
 import { UserLink } from 'web/components/user-link'
+import { ReplyTo } from './feed-comments'

 export function CommentsAnswer(props: { answer: Answer; contract: Contract }) {
  const { answer, contract } = props
@ -21,15 +22,9 @@ export function CommentsAnswer(props: { answer: Answer; contract: Contract }) {
  const [replyTo, setReplyTo] = useState<ReplyTo>()
  const user = useUser()
  const router = useRouter()
-  const answerElementId = `answer-${answer.id}`
  const highlighted = router.asPath.endsWith(`#${answerElementId}`)
  const answerRef = useRef<HTMLDivElement>(null)

-  const onSubmitComment = useEvent(() => setReplyTo(undefined))
-  const onReplyClick = useEvent((comment: ContractComment) => {
-    setReplyTo({ id: comment.id, username: comment.userUsername })
-  })
-
  useEffect(() => {
    if (highlighted && answerRef.current != null) {
      answerRef.current.scrollIntoView(true)
@ -37,12 +32,9 @@ export function CommentsAnswer(props: { answer: Answer; contract: Contract }) {
  }, [highlighted])

  return (
-    <Row className="bg-greyscale-2 w-fit gap-1 rounded-t-xl rounded-bl-xl px-2 py-2">
-      <div className="ml-2">
+    <Col className="bg-greyscale-2 w-fit gap-1 rounded-t-xl rounded-bl-xl py-2 px-4">
+      <Row className="gap-2">
        <Avatar username={username} avatarUrl={avatarUrl} size="xxs" />
-      </div>
-      <Col>
-        <Row className="gap-1">
        <div className="text-greyscale-6 text-xs">
          <UserLink username={username} name={name} /> answered
          <CopyLinkDateTimeComponent
@ -52,62 +44,8 @@ export function CommentsAnswer(props: { answer: Answer; contract: Contract }) {
            elementId={answerElementId}
          />
        </div>
-
-          <Col className="align-items justify-between gap-2 sm:flex-row">
-            <span className="whitespace-pre-line text-lg">
-              <Linkify text={text} />
-            </span>
-            <div className="sm:hidden">
-              <button
-                className="text-xs font-bold text-gray-500 hover:underline"
-                onClick={() =>
-                  setReplyTo({ id: answer.id, username: answer.username })
-                }
-              >
-                Reply
-              </button>
-            </div>
-          </Col>
-          <div className="justify-initial hidden sm:block">
-            <button
-              className="text-xs font-bold text-gray-500 hover:underline"
-              onClick={() =>
-                setReplyTo({ id: answer.id, username: answer.username })
-              }
-            >
-              Reply
-            </button>
-          </div>
-        </Col>
      </Row>
-      <Col className="gap-3 pl-1">
-        {answerComments.map((comment) => (
-          <FeedComment
-            key={comment.id}
-            indent={true}
-            contract={contract}
-            comment={comment}
-            myTip={user ? tips[comment.id]?.[user.id] : undefined}
-            totalTip={sum(Object.values(tips[comment.id] ?? {}))}
-            showTip={true}
-            onReplyClick={onReplyClick}
-          />
-        ))}
-      </Col>
-      {replyTo && (
-        <div className="relative ml-7">
-          <span
-            className="absolute -left-1 -ml-[1px] mt-[1.25rem] h-2 w-0.5 rotate-90 bg-gray-200"
-            aria-hidden="true"
-          />
-          <ContractCommentInput
-            contract={contract}
-            parentAnswerOutcome={answer.number.toString()}
-            replyTo={replyTo}
-            onSubmitComment={onSubmitComment}
-          />
-        </div>
-      )}
+      <div className="text-sm">{answer.text}</div>
    </Col>
  )
 }
--- a/web/components/feed/feed-comments.tsx
+++ b/web/components/feed/feed-comments.tsx
@ -6,8 +6,6 @@ import clsx from 'clsx'

 import { ContractComment } from 'common/comment'
 import { AnyContractType, Contract } from 'common/contract'
-import React, { useEffect, useRef, useState } from 'react'
-import { Contract } from 'common/contract'
 import { useUser } from 'web/hooks/use-user'
 import { formatMoney } from 'common/util/format'
 import { Row } from 'web/components/layout/row'
@ -49,14 +47,13 @@ export function FeedCommentThread(props: {

  return (
    <Col className="relative w-full items-stretch gap-3 pb-4">
-      <Col>
      <ParentFeedComment
        key={parentComment.id}
        contract={contract}
        comment={parentComment}
        myTip={user ? tips[parentComment.id]?.[user.id] : undefined}
-          showTip={true}
        totalTip={sum(Object.values(tips[parentComment.id] ?? {}))}
+        showTip={true}
        seeReplies={seeReplies}
        numComments={threadComments.length}
        onSeeReplyClick={() => setSeeReplies(!seeReplies)}
@ -67,17 +64,16 @@ export function FeedCommentThread(props: {
          })
        }
      />
-      </Col>
      {seeReplies &&
        threadComments.map((comment, _commentIdx) => (
          <FeedComment
            key={comment.id}
            contract={contract}
            comment={comment}
-            tips={tips[comment.id] ?? {}}
-            onReplyClick={() =>
-              setReplyTo({ id: comment.id, username: comment.userUsername })
-            }
+            myTip={user ? tips[comment.id]?.[user.id] : undefined}
+            totalTip={sum(Object.values(tips[comment.id] ?? {}))}
+            showTip={true}
+            onReplyClick={onReplyClick}
          />
        ))}
      {replyTo && (
@ -97,19 +93,24 @@ export function FeedCommentThread(props: {
    </Col>
  )
 }
+
 export function ParentFeedComment(props: {
  contract: Contract
  comment: ContractComment
-  tips?: CommentTips
+  showTip?: boolean
+  myTip?: number
+  totalTip?: number
  seeReplies: boolean
  numComments: number
-  onReplyClick?: () => void
+  onReplyClick?: (comment: ContractComment) => void
  onSeeReplyClick: () => void
 }) {
  const {
    contract,
    comment,
-    tips,
+    myTip,
+    totalTip,
+    showTip,
    onReplyClick,
    onSeeReplyClick,
    seeReplies,
@ -154,12 +155,24 @@ export function ParentFeedComment(props: {
            onClick={onSeeReplyClick}
          />
          <Row className="grow justify-end">
-            <CommentActions
-              onReplyClick={onReplyClick}
-              tips={tips}
+            {onReplyClick && (
+              <button
+                className="font-bold hover:underline"
+                onClick={() => onReplyClick(comment)}
+              >
+                Reply
+              </button>
+            )}
+            {showTip && (
+              <Tipper
                comment={comment}
-              contract={contract}
+                myTip={myTip ?? 0}
+                totalTip={totalTip ?? 0}
              />
+            )}
+            {(contract.openCommentBounties ?? 0) > 0 && (
+              <AwardBountyButton comment={comment} contract={contract} />
+            )}
          </Row>
        </Row>
      </Col>
@ -173,11 +186,9 @@ export const FeedComment = memo(function FeedComment(props: {
  showTip?: boolean
  myTip?: number
  totalTip?: number
-  indent?: boolean
  onReplyClick?: (comment: ContractComment) => void
 }) {
-  const { contract, comment, myTip, totalTip, showTip, indent, onReplyClick } =
-    props
+  const { contract, comment, myTip, totalTip, showTip, onReplyClick } = props
  const {
    text,
    content,
@ -233,7 +244,6 @@ export const FeedComment = memo(function FeedComment(props: {
      </Col>
      <Col className="w-full">
        <FeedCommentHeader comment={comment} contract={contract} />
-        {/* TODO: bug where if this is iFrame, it does not scroll */}
        <Content
          className="text-greyscale-7 mt-2 grow text-[14px]"
          content={content || text}
@ -262,35 +272,35 @@ export const FeedComment = memo(function FeedComment(props: {
      </Col>
    </Row>
  )
-}
-
-export function CommentActions(props: {
-  onReplyClick?: () => void
-  tips?: CommentTips | undefined
-  comment: ContractComment
-  contract: Contract<AnyContractType>
-}) {
-  const { onReplyClick, tips, comment, contract } = props
-  return (
-    <Row className={clsx('ml-2 items-center gap-2 text-xs text-gray-500')}>
-      {onReplyClick && (
-        <Button
-          className="font-bold hover:underline"
-          onClick={onReplyClick}
-          size="2xs"
-          color="gray-white"
-        >
-          <ReplyIcon className="h-5 w-5" />
-        </Button>
-      )}
-      {tips && <Tipper comment={comment} tips={tips} />}
-      {(contract.openCommentBounties ?? 0) > 0 && (
-        <AwardBountyButton comment={comment} contract={contract} />
-      )}
-    </Row>
-  )
 })

+// export function CommentActions(props: {
+//   onReplyClick?: () => void
+//   tips?: CommentTips | undefined
+//   comment: ContractComment
+//   contract: Contract<AnyContractType>
+// }) {
+//   const { onReplyClick, tips, comment, contract } = props
+//   return (
+//     <Row className={clsx('ml-2 items-center gap-2 text-xs text-gray-500')}>
+//       {onReplyClick && (
+//         <Button
+//           className="font-bold hover:underline"
+//           onClick={onReplyClick}
+//           size="2xs"
+//           color="gray-white"
+//         >
+//           <ReplyIcon className="h-5 w-5" />
+//         </Button>
+//       )}
+//       {tips && <Tipper comment={comment} tips={tips} />}
+//       {(contract.openCommentBounties ?? 0) > 0 && (
+//         <AwardBountyButton comment={comment} contract={contract} />
+//       )}
+//     </Row>
+//   )
+// })
+
 function CommentStatus(props: {
  contract: Contract
  outcome: string