From ce62edbc8c57721debdbf3a001ecb59c747f1768 Mon Sep 17 00:00:00 2001 From: Ian Philips Date: Thu, 5 May 2022 16:25:54 -0400 Subject: [PATCH] Add user's collated comments onto profile --- web/components/comments-list.tsx | 69 +++++++++++++ web/components/user-page.tsx | 164 ++++++++++++++++++------------- web/lib/firebase/comments.ts | 7 +- 3 files changed, 168 insertions(+), 72 deletions(-) create mode 100644 web/components/comments-list.tsx diff --git a/web/components/comments-list.tsx b/web/components/comments-list.tsx new file mode 100644 index 00000000..56da0f6c --- /dev/null +++ b/web/components/comments-list.tsx @@ -0,0 +1,69 @@ +import { Comment } from '../../common/comment' +import { Contract } from '../../common/contract' +import { contractPath } from '../lib/firebase/contracts' +import { SiteLink } from './site-link' +import { Row } from './layout/row' +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' + +export function UserCommentsList(props: { + user: User + commentsByContractId: Dictionary + uniqueContracts: (Contract | undefined)[] +}) { + const { commentsByContractId, uniqueContracts } = props + + return ( + + {uniqueContracts.map( + (contract) => + contract && ( +
+
+ + {contract ? contract.question : '...'} + +
+ {commentsByContractId[contract.id].map((comment) => ( +
+
+ +
+
+ ))} +
+ ) + )} + + ) +} + +function ProfileComment(props: { comment: Comment }) { + const { comment } = props + const { text, userUsername, userName, userAvatarUrl, createdTime } = comment + // TODO: find and attach relevant bets by comment betId at some point + return ( +
+ + +
+
+

+ {' '} + +

+
+ {text} +
+
+
+ ) +} diff --git a/web/components/user-page.tsx b/web/components/user-page.tsx index 3e23a625..79d329f8 100644 --- a/web/components/user-page.tsx +++ b/web/components/user-page.tsx @@ -13,12 +13,14 @@ import { LinkIcon } from '@heroicons/react/solid' import { genHash } from '../../common/util/random' import { PencilIcon } from '@heroicons/react/outline' import { Tabs } from './layout/tabs' -import React, { useEffect, useState } from 'react' -import { Comment } from '../../common/comment' -import { getUsersComments } from '../lib/firebase/comments' -import { Bet } from '../../common/bet' -import { formatMoney } from '../../common/util/format' -import { RelativeTimestamp } from './relative-timestamp' +import { UserCommentsList } from './comments-list' +import { useEffect, useState } from 'react' +import { Comment, getUsersComments } from '../lib/firebase/comments' +import { Contract } from '../../common/contract' +import { getContractFromId, listContracts } from '../lib/firebase/contracts' +import { LoadingIndicator } from './loading-indicator' +import { useRouter } from 'next/router' +import _ from 'lodash' export function UserLink(props: { name: string @@ -36,24 +38,43 @@ export function UserLink(props: { ) } -export function UserPage(props: { user: User; currentUser?: User }) { - const { user, currentUser } = props +export function UserPage(props: { + user: User + currentUser?: User + defaultTabIndex?: number +}) { + const router = useRouter() + const { user, currentUser, defaultTabIndex } = props const isCurrentUser = user.id === currentUser?.id const bannerUrl = user.bannerUrl ?? defaultBannerUrl(user.id) - const [comments, setComments] = useState([] as Comment[]) + const [usersComments, setUsersComments] = useState([] as Comment[]) + const [usersContracts, setUsersContracts] = useState( + 'loading' + ) + const [uniqueContracts, setUniqueContracts] = useState< + (Contract | undefined)[] | 'loading' + >('loading') useEffect(() => { if (user) { - getUsersComments(user.id).then(setComments) + getUsersComments(user.id).then(setUsersComments) + listContracts(user.id).then(setUsersContracts) } }, [user]) - const items = comments - .sort((a, b) => b.createdTime - a.createdTime) - .map((comment) => ({ - comment, - bet: undefined, - })) + 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) + } + }, [usersComments]) + return ( - , - }, - { - title: 'Comments', - content: ( - <> - {items.map((item, activityItemIdx) => ( -
-
- -
-
- ))} - - ), - }, - ]} - /> + {usersContracts !== 'loading' && uniqueContracts != 'loading' ? ( + + router.push( + { + pathname: `/${user.username}`, + query: { tab: tabName }, + }, + undefined, + { shallow: true } + ) + } + tabs={[ + { + title: 'Markets', + content: , + tabIcon: ( +
9 ? 'px-1' : 'px-1.5', + 'items-center rounded-full border-2 border-current py-0.5 text-xs' + )} + > + {usersContracts.length} +
+ ), + }, + { + title: 'Comments', + content: ( + comment.contractId + )} + uniqueContracts={uniqueContracts} + /> + ), + tabIcon: ( +
9 ? 'px-1' : 'px-1.5', + 'items-center rounded-full border-2 border-current py-0.5 text-xs' + )} + > + {usersComments.length} +
+ ), + }, + ]} + /> + ) : ( + + )}
) @@ -197,35 +253,3 @@ export function defaultBannerUrl(userId: string) { ] return defaultBanner[genHash(userId)() % defaultBanner.length] } - -function ProfileComment(props: { comment: Comment; bet: Bet | undefined }) { - const { comment, bet } = props - let money: string | undefined - let outcome: string | undefined - let bought: string | undefined - if (bet) { - outcome = bet.outcome - bought = bet.amount >= 0 ? 'bought' : 'sold' - money = formatMoney(Math.abs(bet.amount)) - } - const { text, userUsername, userName, userAvatarUrl, createdTime } = comment - - return ( - <> - -
-
-

- {' '} - -

-
- {text} -
- - ) -} diff --git a/web/lib/firebase/comments.ts b/web/lib/firebase/comments.ts index fe9fe7e9..ce6fa4f2 100644 --- a/web/lib/firebase/comments.ts +++ b/web/lib/firebase/comments.ts @@ -126,10 +126,13 @@ export async function getDailyComments( return commentsByDay } -// TODO: add firebase index for comments - userid export async function getUsersComments(userId: string) { const getUsersCommentsQuery = (userId: string) => - query(collectionGroup(db, 'comments'), where('userId', '==', userId)) + query( + collectionGroup(db, 'comments'), + where('userId', '==', userId), + orderBy('createdTime', 'desc') + ) const comments = await getValues(getUsersCommentsQuery(userId)) return comments }