From afbaba20205a71f268bfd904704eaad03b87c295 Mon Sep 17 00:00:00 2001 From: Ian Philips 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 - uniqueContracts: (Contract | undefined)[] + commentsByUniqueContracts: Map }) { - const { commentsByContractId, uniqueContracts } = props + const { commentsByUniqueContracts } = props return ( - {uniqueContracts.map( - (contract) => - contract && ( -
-
- - {contract.question} - + {Array.from(commentsByUniqueContracts).map(([contract, comments]) => ( +
+
+ + {contract.question} + +
+ {comments.map((comment) => ( +
+
+
- {commentsByContractId[contract.id].map((comment) => ( -
-
- -
-
- ))}
- ) - )} + ))} +
+ ))} ) } @@ -61,7 +57,7 @@ function ProfileComment(props: { comment: Comment }) {

- {text} +
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([] as Comment[]) const [usersContracts, setUsersContracts] = useState( 'loading' ) - const [uniqueContracts, setUniqueContracts] = useState< - (Contract | undefined)[] | 'loading' + const [commentsByContract, setCommentsByContract] = useState< + Map | '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() + 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: { - {usersContracts !== 'loading' && uniqueContracts != 'loading' ? ( + {usersContracts !== 'loading' && commentsByContract != 'loading' ? ( router.push( { @@ -213,11 +218,7 @@ export function UserPage(props: { content: ( 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(getUsersCommentsQuery(userId)) - return comments + return await getValues(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() { ) : (