From afbaba20205a71f268bfd904704eaad03b87c295 Mon Sep 17 00:00:00 2001
From: Ian Philips <iansphilips@gmail.com>
Date: Thu, 5 May 2022 18:27:44 -0400
Subject: [PATCH] Small code improvements

---
 web/components/comments-list.tsx | 40 +++++++++++--------------
 web/components/user-page.tsx     | 51 ++++++++++++++++----------------
 web/lib/firebase/comments.ts     | 24 +++++++--------
 web/pages/[username]/index.tsx   |  2 +-
 4 files changed, 57 insertions(+), 60 deletions(-)

diff --git a/web/components/comments-list.tsx b/web/components/comments-list.tsx
index 2cd670b3..7461c6f1 100644
--- a/web/components/comments-list.tsx
+++ b/web/components/comments-list.tsx
@@ -7,37 +7,33 @@ import { Avatar } from './avatar'
 import { RelativeTimestamp } from './relative-timestamp'
 import { UserLink } from './user-page'
 import { User } from '../../common/user'
-import _, { Dictionary } from 'lodash'
 import { Col } from './layout/col'
+import { Linkify } from './linkify'
 
 export function UserCommentsList(props: {
   user: User
-  commentsByContractId: Dictionary<Comment[]>
-  uniqueContracts: (Contract | undefined)[]
+  commentsByUniqueContracts: Map<Contract, Comment[]>
 }) {
-  const { commentsByContractId, uniqueContracts } = props
+  const { commentsByUniqueContracts } = props
 
   return (
     <Col className={'bg-white'}>
-      {uniqueContracts.map(
-        (contract) =>
-          contract && (
-            <div key={contract.id} className={'border-width-1 border-b p-5'}>
-              <div className={'mb-2 text-sm text-indigo-700'}>
-                <SiteLink href={contractPath(contract)}>
-                  {contract.question}
-                </SiteLink>
+      {Array.from(commentsByUniqueContracts).map(([contract, comments]) => (
+        <div key={contract.id} className={'border-width-1 border-b p-5'}>
+          <div className={'mb-2 text-sm text-indigo-700'}>
+            <SiteLink href={contractPath(contract)}>
+              {contract.question}
+            </SiteLink>
+          </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>
-              {commentsByContractId[contract.id].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>
-          )
-      )}
+          ))}
+        </div>
+      ))}
     </Col>
   )
 }
@@ -61,7 +57,7 @@ function ProfileComment(props: { comment: Comment }) {
               <RelativeTimestamp time={createdTime} />
             </p>
           </div>
-          {text}
+          <Linkify text={text} />
         </div>
       </Row>
     </div>
diff --git a/web/components/user-page.tsx b/web/components/user-page.tsx
index 79d329f8..0f033ce3 100644
--- a/web/components/user-page.tsx
+++ b/web/components/user-page.tsx
@@ -41,38 +41,43 @@ export function UserLink(props: {
 export function UserPage(props: {
   user: User
   currentUser?: User
-  defaultTabIndex?: number
+  defaultTabTitle?: string
 }) {
   const router = useRouter()
-  const { user, currentUser, defaultTabIndex } = props
+  const { user, currentUser, defaultTabTitle } = props
   const isCurrentUser = user.id === currentUser?.id
   const bannerUrl = user.bannerUrl ?? defaultBannerUrl(user.id)
   const [usersComments, setUsersComments] = useState<Comment[]>([] as Comment[])
   const [usersContracts, setUsersContracts] = useState<Contract[] | 'loading'>(
     'loading'
   )
-  const [uniqueContracts, setUniqueContracts] = useState<
-    (Contract | undefined)[] | 'loading'
+  const [commentsByContract, setCommentsByContract] = useState<
+    Map<Contract, Comment[]> | 'loading'
   >('loading')
 
   useEffect(() => {
-    if (user) {
-      getUsersComments(user.id).then(setUsersComments)
-      listContracts(user.id).then(setUsersContracts)
-    }
+    if (!user) return
+    getUsersComments(user.id).then(setUsersComments)
+    listContracts(user.id).then(setUsersContracts)
   }, [user])
 
   useEffect(() => {
-    // get all unique contracts for the comments and group each comments array to a contract
-    if (usersComments) {
-      const uniqueContractIds = _.uniq(
-        usersComments.map((comment) => comment.contractId)
-      )
-      const uniqueContracts = Array.from(uniqueContractIds).map((id) =>
-        getContractFromId(id)
-      )
-      Promise.all(uniqueContracts).then(setUniqueContracts)
-    }
+    const uniqueContractIds = _.uniq(
+      usersComments.map((comment) => comment.contractId)
+    )
+    Promise.all(
+      uniqueContractIds.map((contractId) => getContractFromId(contractId))
+    ).then((contracts) => {
+      const commentsByContract = new Map<Contract, Comment[]>()
+      contracts.forEach((contract) => {
+        if (!contract) return
+        commentsByContract.set(
+          contract,
+          usersComments.filter((comment) => comment.contractId === contract.id)
+        )
+      })
+      setCommentsByContract(commentsByContract)
+    })
   }, [usersComments])
 
   return (
@@ -179,10 +184,10 @@ export function UserPage(props: {
         </Col>
 
         <Spacer h={10} />
-        {usersContracts !== 'loading' && uniqueContracts != 'loading' ? (
+        {usersContracts !== 'loading' && commentsByContract != 'loading' ? (
           <Tabs
             className={'pb-2 pt-1 '}
-            defaultIndex={defaultTabIndex}
+            defaultIndex={defaultTabTitle === 'Comments' ? 1 : 0}
             onClick={(tabName) =>
               router.push(
                 {
@@ -213,11 +218,7 @@ export function UserPage(props: {
                 content: (
                   <UserCommentsList
                     user={user}
-                    commentsByContractId={_.groupBy(
-                      usersComments,
-                      (comment) => comment.contractId
-                    )}
-                    uniqueContracts={uniqueContracts}
+                    commentsByUniqueContracts={commentsByContract}
                   />
                 ),
                 tabIcon: (
diff --git a/web/lib/firebase/comments.ts b/web/lib/firebase/comments.ts
index ce6fa4f2..e97e6f99 100644
--- a/web/lib/firebase/comments.ts
+++ b/web/lib/firebase/comments.ts
@@ -1,11 +1,11 @@
 import {
-  doc,
   collection,
-  setDoc,
-  query,
   collectionGroup,
-  where,
+  doc,
   orderBy,
+  query,
+  setDoc,
+  where,
 } from 'firebase/firestore'
 import _ from 'lodash'
 
@@ -13,6 +13,7 @@ import { getValues, listenForValues } from './utils'
 import { db } from './init'
 import { User } from '../../../common/user'
 import { Comment } from '../../../common/comment'
+
 export type { Comment }
 
 export const MAX_COMMENT_LENGTH = 10000
@@ -126,13 +127,12 @@ export async function getDailyComments(
   return commentsByDay
 }
 
+const getUsersCommentsQuery = (userId: string) =>
+  query(
+    collectionGroup(db, 'comments'),
+    where('userId', '==', userId),
+    orderBy('createdTime', 'desc')
+  )
 export async function getUsersComments(userId: string) {
-  const getUsersCommentsQuery = (userId: string) =>
-    query(
-      collectionGroup(db, 'comments'),
-      where('userId', '==', userId),
-      orderBy('createdTime', 'desc')
-    )
-  const comments = await getValues<Comment>(getUsersCommentsQuery(userId))
-  return comments
+  return await getValues<Comment>(getUsersCommentsQuery(userId))
 }
diff --git a/web/pages/[username]/index.tsx b/web/pages/[username]/index.tsx
index 6dcd700e..e1e63260 100644
--- a/web/pages/[username]/index.tsx
+++ b/web/pages/[username]/index.tsx
@@ -24,7 +24,7 @@ export default function UserProfile() {
     <UserPage
       user={user}
       currentUser={currentUser || undefined}
-      defaultTabIndex={tab === 'Comments' || tab === 'comments' ? 1 : 0}
+      defaultTabTitle={tab}
     />
   ) : (
     <Custom404 />