Use avatar of user that submitted answer and name instead of pencil icon. Spacing. Show up to 3 comments in asnwer group.

This commit is contained in:
James Grugett 2022-03-14 14:30:13 -05:00
parent 980f32e741
commit 6fd16e448e
2 changed files with 19 additions and 21 deletions

View File

@ -277,10 +277,8 @@ export function getRecentContractActivityItems(
let items: ActivityItem[] = []
if (contract.outcomeType === 'FREE_RESPONSE') {
// Keep last two comments.
comments = comments.slice(-2)
const lastBet = bets[bets.length - 1]
// Keep last three comments.
comments = comments.slice(-3)
const outcomeToComments = _.groupBy(comments, (c) => {
const bet = bets.find((bet) => bet.id === c.betId)
return bet?.outcome
@ -288,6 +286,7 @@ export function getRecentContractActivityItems(
delete outcomeToComments['undefined']
// Include up to 2 outcomes from comments and last bet.
const lastBet = bets[bets.length - 1]
const outcomes = filterDefined(
_.uniq([...Object.keys(outcomeToComments), lastBet?.outcome])
).slice(-2)

View File

@ -8,7 +8,6 @@ import {
LockClosedIcon,
UserIcon,
UsersIcon,
PencilAltIcon,
XIcon,
} from '@heroicons/react/solid'
import dayjs from 'dayjs'
@ -195,9 +194,12 @@ function FeedBet(props: {
<>
<div>
{isSelf ? (
<Avatar avatarUrl={user?.avatarUrl} />
<Avatar avatarUrl={user.avatarUrl} username={user.username} />
) : isCreator ? (
<Avatar avatarUrl={contract.creatorAvatarUrl} />
<Avatar
avatarUrl={contract.creatorAvatarUrl}
username={contract.creatorUsername}
/>
) : (
<div className="relative px-1">
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200">
@ -661,25 +663,22 @@ function FeedAnswerGroup(props: {
items: ActivityItem[]
}) {
const { answer, items } = props
const { username, avatarUrl, userId, name, text } = answer
return (
<Col className="gap-2">
<Row className="gap-2 mb-2">
<div>
<div className="relative px-1">
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200">
<PencilAltIcon
className="h-5 w-5 text-gray-500"
aria-hidden="true"
/>
</div>
<Col className="gap-2 flex-1">
<Row className="gap-3 mb-4">
<div className="px-1">
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200">
<Avatar username={username} avatarUrl={avatarUrl} />
</div>
</div>
<div className="min-w-0 flex-1 mt-1">
<div className="text-neutral" style={{ fontSize: 15 }}>
<Linkify text={answer.text} />
<Col className="min-w-0 flex-1 gap-2">
<div className="text-sm text-gray-500">
<UserLink username={userId} name={name} /> answered
</div>
</div>
<Linkify text={text} />
</Col>
</Row>
{items.map((item, index) => (