Simplify general comments logic, toggle comment boxes

2022-05-03 15:51:43 -04:00 · 2022-05-03 15:51:43 -04:00 · d57eecb0c0
commit d57eecb0c0
parent 4f54225e16
4 changed files with 88 additions and 98 deletions
--- a/web/components/contract/contract-tabs.tsx
+++ b/web/components/contract/contract-tabs.tsx
@ -7,6 +7,7 @@ import { ContractActivity } from '../feed/contract-activity'
 import { ContractBetsTable, MyBetsSummary } from '../bets-list'
 import { Spacer } from '../layout/spacer'
 import { Tabs } from '../layout/tabs'
+import { Col } from '../layout/col'

 export function ContractTabs(props: {
  contract: Contract
@ -33,18 +34,34 @@ export function ContractTabs(props: {
  )

  const commentActivity = (
-    <ContractActivity
-      contract={contract}
-      bets={bets}
-      comments={comments}
-      user={user}
-      mode={
-        contract.outcomeType === 'FREE_RESPONSE'
-          ? 'free-response-comments'
-          : 'comments'
-      }
-      betRowClassName="!mt-0 xl:hidden"
-    />
+    <>
+      <ContractActivity
+        contract={contract}
+        bets={bets}
+        comments={comments}
+        user={user}
+        mode={
+          contract.outcomeType === 'FREE_RESPONSE'
+            ? 'free-response-comment-answer-groups'
+            : 'comments'
+        }
+        betRowClassName="!mt-0 xl:hidden"
+      />
+      {contract.outcomeType === 'FREE_RESPONSE' && (
+        <Col className={'mt-8 flex w-full '}>
+          <div className={'text-md mt-8 mb-2 text-left'}>General Comments</div>
+          <div className={'mb-4 w-full border-b border-gray-200'} />
+          <ContractActivity
+            contract={contract}
+            bets={bets}
+            comments={comments}
+            user={user}
+            mode={'comments'}
+            betRowClassName="!mt-0 xl:hidden"
+          />
+        </Col>
+      )}
+    </>
  )

  const yourTrades = (
--- a/web/components/feed/activity-items.ts
+++ b/web/components/feed/activity-items.ts
@ -23,7 +23,6 @@ export type ActivityItem =
  | CloseItem
  | ResolveItem
  | CommentInputItem
-  | GeneralCommentsItem

 type BaseActivityItem = {
  id: string
@ -76,11 +75,6 @@ export type AnswerGroupItem = BaseActivityItem & {
  items: ActivityItem[]
 }

-export type GeneralCommentsItem = BaseActivityItem & {
-  type: 'generalcomments'
-  items: ActivityItem[]
-}
-
 export type CloseItem = BaseActivityItem & {
  type: 'close'
 }
@ -330,16 +324,6 @@ function getAnswerAndCommentInputGroups(
      }
    })
    .filter((group) => group.answer) as ActivityItem[]
-
-  const outcome = GENERAL_COMMENTS_OUTCOME_ID
-  const items = collateCommentsSectionForOutcome(outcome)
-  answerGroups.unshift({
-    id: outcome,
-    type: 'generalcomments' as const,
-    contract,
-    items,
-  })
-
  return answerGroups
 }

@ -559,7 +543,7 @@ export function getSpecificContractActivityItems(
  comments: Comment[],
  user: User | null | undefined,
  options: {
-    mode: 'comments' | 'bets' | 'free-response-comments'
+    mode: 'comments' | 'bets' | 'free-response-comment-answer-groups'
  }
 ) {
  const { mode } = options
@ -581,19 +565,30 @@ export function getSpecificContractActivityItems(
      break

    case 'comments':
-      items.push(...getCommentsWithPositions(bets, comments, contract))
+      const nonFreeResponseComments = comments.filter(
+        (comment) => comment.answerOutcome === undefined
+      )
+      const nonFreeResponseBets =
+        contract.outcomeType === 'FREE_RESPONSE' ? [] : bets
+      items.push(
+        ...getCommentsWithPositions(
+          nonFreeResponseBets,
+          nonFreeResponseComments,
+          contract
+        )
+      )

      items.push({
        type: 'commentInput',
        id: 'commentInput',
        contract,
        betsByCurrentUser: user
-          ? bets.filter((bet) => bet.userId === user.id)
+          ? nonFreeResponseBets.filter((bet) => bet.userId === user.id)
          : [],
-        comments: comments,
+        comments: nonFreeResponseComments,
      })
      break
-    case 'free-response-comments':
+    case 'free-response-comment-answer-groups':
      items.push(
        ...getAnswerAndCommentInputGroups(
          contract as FullContract<DPM, FreeResponse>,
--- a/web/components/feed/contract-activity.tsx
+++ b/web/components/feed/contract-activity.tsx
@ -22,7 +22,7 @@ export function ContractActivity(props: {
    | 'all'
    | 'comments'
    | 'bets'
-    | 'free-response-comments'
+    | 'free-response-comment-answer-groups'
  contractPath?: string
  className?: string
  betRowClassName?: string
@ -46,7 +46,7 @@ export function ContractActivity(props: {
        })
      : mode === 'comments' ||
        mode === 'bets' ||
-        mode === 'free-response-comments'
+        mode === 'free-response-comment-answer-groups'
      ? getSpecificContractActivityItems(contract, bets, comments, user, {
          mode,
        })
--- a/web/components/feed/feed-items.tsx
+++ b/web/components/feed/feed-items.tsx
@ -123,8 +123,6 @@ function FeedItem(props: { item: ActivityItem }) {
      return <FeedResolve {...item} />
    case 'commentInput':
      return <CommentInput {...item} />
-    case 'generalcomments':
-      return <FeedGeneralComments {...item} />
  }
 }

@ -268,11 +266,11 @@ export function CommentInput(props: {

  return (
    <>
-      <Row className={'flex w-full gap-2 pt-3'}>
+      <Row className={'flex w-full gap-2'}>
        <div>
          <Avatar avatarUrl={user?.avatarUrl} username={user?.username} />
        </div>
-        <div className={'min-w-0 flex-1 py-1.5'}>
+        <div className={'min-w-0 flex-1'}>
          <div className="text-sm text-gray-500">
            {mostRecentCommentableBet && (
              <BetStatusText
@ -294,35 +292,46 @@ export function CommentInput(props: {
                </>
              </>
            )}
-            <div className="mt-2">
-              <Textarea
-                value={comment}
-                onChange={(e) => setComment(e.target.value)}
-                className="textarea textarea-bordered w-full resize-none"
-                placeholder="Add a comment..."
-                rows={answerOutcome == undefined || focused ? 3 : 1}
-                onFocus={() => setFocused(true)}
-                onBlur={() => !comment && setFocused(false)}
-                maxLength={MAX_COMMENT_LENGTH}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
-                    submitComment(id)
-                  }
-                }}
-              />
-              <button
-                className={
-                  'btn btn-outline btn-sm text-transform: mt-1 capitalize'
-                }
-                onClick={() => {
-                  submitComment(id)
-                  setFocused(false)
-                }}
-              >
-                {user ? 'Comment' : 'Sign in to comment'}
-              </button>
-            </div>
+            {(answerOutcome === undefined || focused) && (
+              <div className="mt-2">
+                <Textarea
+                  value={comment}
+                  onChange={(e) => setComment(e.target.value)}
+                  className="textarea textarea-bordered w-full resize-none"
+                  placeholder="Add a comment..."
+                  autoFocus={true}
+                  rows={answerOutcome == undefined || focused ? 3 : 1}
+                  onFocus={() => setFocused(true)}
+                  onBlur={() => !comment && setFocused(false)}
+                  maxLength={MAX_COMMENT_LENGTH}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+                      submitComment(id)
+                    }
+                  }}
+                />
+              </div>
+            )}
          </div>
+          <button
+            className={'btn btn-outline btn-sm text-transform: mt-1 capitalize'}
+            onClick={() => {
+              if (answerOutcome === undefined) {
+                submitComment(id)
+              } else if (!focused) {
+                setFocused(true)
+              } else {
+                submitComment(id)
+                setFocused(false)
+              }
+            }}
+          >
+            {user
+              ? !focused && answerOutcome !== undefined
+                ? 'Add Comment'
+                : 'Comment'
+              : 'Sign in to comment'}
+          </button>
        </div>
      </Row>
    </>
@ -853,37 +862,6 @@ function FeedAnswerGroup(props: {
  )
 }

-function FeedGeneralComments(props: {
-  contract: FullContract<any, FreeResponse>
-  items: ActivityItem[]
-  type: string
-}) {
-  const { items } = props
-
-  return (
-    <Col className={'mt-8 flex w-full '}>
-      <div className={'text-md mt-8 mb-2 text-left'}>General Comments</div>
-      <div className={'w-full border-b border-gray-200'} />
-      {items.map((item, index) => (
-        <div
-          key={item.id}
-          className={clsx('relative', index !== items.length - 1 && 'pb-4')}
-        >
-          {index !== items.length - 1 ? (
-            <span
-              className="absolute top-5 left-5 -ml-px h-[calc(100%-1rem)] w-0.5 bg-gray-200"
-              aria-hidden="true"
-            />
-          ) : null}
-          <div className="relative flex items-start space-x-3">
-            <FeedItem item={item} />
-          </div>
-        </div>
-      ))}
-    </Col>
-  )
-}
-
 // TODO: Should highlight the entire Feed segment
 function FeedExpand(props: { setExpanded: (expanded: boolean) => void }) {
  const { setExpanded } = props