Clean up a bunch of crufty stuff on user comments list (#693)

web/components/comments-list.tsx

@@ -17,58 +17,55 @@ export function UserCommentsList(props: {
   contractsById: { [id: string]: Contract }
 }) {
   const { comments, contractsById } = props
-  const commentsByContract = groupBy(comments, 'contractId')
 
-  const contractCommentPairs = Object.entries(commentsByContract)
+  // we don't show comments in groups here atm, just comments on contracts
-    .map(
+  const contractComments = comments.filter((c) => c.contractId)
-      ([contractId, comments]) => [contractsById[contractId], comments] as const
+  const commentsByContract = groupBy(contractComments, 'contractId')
-    )
-    .filter(([contract]) => contract)
 
   return (
     <Col className={'bg-white'}>
-      {contractCommentPairs.map(([contract, comments]) => (
+      {Object.entries(commentsByContract).map(([contractId, comments]) => {
-        <div key={contract.id} className={'border-width-1 border-b p-5'}>
+        const contract = contractsById[contractId]
-          <div className={'mb-2 text-sm text-indigo-700'}>
+        return (
-            <SiteLink href={contractPath(contract)}>
+          <div key={contractId} className={'border-width-1 border-b p-5'}>
+            <SiteLink
+              className={'mb-2 block text-sm text-indigo-700'}
+              href={contractPath(contract)}
+            >
               {contract.question}
             </SiteLink>
+            {comments.map((comment) => (
+              <ProfileComment
+                key={comment.id}
+                comment={comment}
+                className="relative flex items-start space-x-3 pb-6"
+              />
+            ))}
           </div>
-          {comments.map((comment) => (
+        )
-            <div key={comment.id} className={'relative pb-6'}>
+      })}
-              <div className="relative flex items-start space-x-3">
-                <ProfileComment comment={comment} />
-              </div>
-            </div>
-          ))}
-        </div>
-      ))}
     </Col>
   )
 }
 
-function ProfileComment(props: { comment: Comment }) {
+function ProfileComment(props: { comment: Comment; className?: string }) {
-  const { comment } = props
+  const { comment, className } = props
   const { text, userUsername, userName, userAvatarUrl, createdTime } = comment
   // TODO: find and attach relevant bets by comment betId at some point
   return (
-    <div>
+    <Row className={className}>
-      <Row className={'gap-4'}>
+      <Avatar username={userUsername} avatarUrl={userAvatarUrl} />
-        <Avatar username={userUsername} avatarUrl={userAvatarUrl} />
+      <div className="min-w-0 flex-1">
-        <div className="min-w-0 flex-1">
+        <p className="mt-0.5 text-sm text-gray-500">
-          <div>
+          <UserLink
-            <p className="mt-0.5 text-sm text-gray-500">
+            className="text-gray-500"
-              <UserLink
+            username={userUsername}
-                className="text-gray-500"
+            name={userName}
-                username={userUsername}
+          />{' '}
-                name={userName}
+          <RelativeTimestamp time={createdTime} />
-              />{' '}
+        </p>
-              <RelativeTimestamp time={createdTime} />
+        <Linkify text={text} />
-            </p>
+      </div>
-          </div>
+    </Row>
-          <Linkify text={text} />
-        </div>
-      </Row>
-    </div>
   )
 }