From d57eecb0c09a13c53c88de89bce8dfa974d58189 Mon Sep 17 00:00:00 2001
From: Ian Philips <iansphilips@gmail.com>
Date: Tue, 3 May 2022 15:51:43 -0400
Subject: [PATCH] Simplify general comments logic, toggle comment boxes

---
 web/components/contract/contract-tabs.tsx |  41 ++++++---
 web/components/feed/activity-items.ts     |  37 ++++----
 web/components/feed/contract-activity.tsx |   4 +-
 web/components/feed/feed-items.tsx        | 104 +++++++++-------------
 4 files changed, 88 insertions(+), 98 deletions(-)

diff --git a/web/components/contract/contract-tabs.tsx b/web/components/contract/contract-tabs.tsx
index 9911adf1..ae1203cf 100644
--- 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 = (
diff --git a/web/components/feed/activity-items.ts b/web/components/feed/activity-items.ts
index db7340f4..71d42621 100644
--- 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>,
diff --git a/web/components/feed/contract-activity.tsx b/web/components/feed/contract-activity.tsx
index dea25fa3..a0e40916 100644
--- 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,
         })
diff --git a/web/components/feed/feed-items.tsx b/web/components/feed/feed-items.tsx
index 4d40765c..d334d06b 100644
--- 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