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

web/components/comments-list.tsx

@@ -17,46 +17,45 @@ 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>
-          </div>
             {comments.map((comment) => (
-            <div key={comment.id} className={'relative pb-6'}>
+              <ProfileComment
-              <div className="relative flex items-start space-x-3">
+                key={comment.id}
-                <ProfileComment comment={comment} />
+                comment={comment}
-              </div>
+                className="relative flex items-start space-x-3 pb-6"
-            </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} />
       <div className="min-w-0 flex-1">
-          <div>
         <p className="mt-0.5 text-sm text-gray-500">
           <UserLink
             className="text-gray-500"
@@ -65,10 +64,8 @@ function ProfileComment(props: { comment: Comment }) {
           />{' '}
           <RelativeTimestamp time={createdTime} />
         </p>
-          </div>
         <Linkify text={text} />
       </div>
     </Row>
-    </div>
   )
 }