75 lines
2.3 KiB
TypeScript
75 lines
2.3 KiB
TypeScript
import { Comment } from 'common/comment'
|
|
import { Contract } from 'common/contract'
|
|
import { contractPath } from 'web/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 { Col } from './layout/col'
|
|
import { Linkify } from './linkify'
|
|
import { groupBy } from 'lodash'
|
|
|
|
export function UserCommentsList(props: {
|
|
user: User
|
|
comments: Comment[]
|
|
contractsById: { [id: string]: Contract }
|
|
}) {
|
|
const { comments, contractsById } = props
|
|
const commentsByContract = groupBy(comments, 'contractId')
|
|
|
|
const contractCommentPairs = Object.entries(commentsByContract)
|
|
.map(
|
|
([contractId, comments]) => [contractsById[contractId], comments] as const
|
|
)
|
|
.filter(([contract]) => contract)
|
|
|
|
return (
|
|
<Col className={'bg-white'}>
|
|
{contractCommentPairs.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>
|
|
</div>
|
|
))}
|
|
</div>
|
|
))}
|
|
</Col>
|
|
)
|
|
}
|
|
|
|
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 (
|
|
<div>
|
|
<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"
|
|
username={userUsername}
|
|
name={userName}
|
|
/>{' '}
|
|
<RelativeTimestamp time={createdTime} />
|
|
</p>
|
|
</div>
|
|
<Linkify text={text} />
|
|
</div>
|
|
</Row>
|
|
</div>
|
|
)
|
|
}
|