diff --git a/components/cowboy-hat.js b/components/cowboy-hat.js index d368f821..fda60d27 100644 --- a/components/cowboy-hat.js +++ b/components/cowboy-hat.js @@ -2,6 +2,7 @@ import Badge from 'react-bootstrap/Badge' import OverlayTrigger from 'react-bootstrap/OverlayTrigger' import Tooltip from 'react-bootstrap/Tooltip' import CowboyHatIcon from '../svgs/cowboy.svg' +import { numWithUnits } from '../lib/format' export default function CowboyHat ({ user, badge, className = 'ms-1', height = 16, width = 16 }) { if (user?.streak === null || user.hideCowboyHat) { @@ -10,7 +11,10 @@ export default function CowboyHat ({ user, badge, className = 'ms-1', height = 1 const streak = user.streak return ( - + {badge ? ( diff --git a/components/item-info.js b/components/item-info.js index 8dfe7516..b0f19283 100644 --- a/components/item-info.js +++ b/components/item-info.js @@ -17,7 +17,10 @@ import BookmarkDropdownItem from './bookmark' import SubscribeDropdownItem from './subscribe' import { CopyLinkDropdownItem } from './share' -export default function ItemInfo ({ item, pendingSats, full, commentsText, commentTextSingular, className, embellishUser, extraInfo, onEdit, editText }) { +export default function ItemInfo ({ + item, pendingSats, full, commentsText = 'comments', + commentTextSingular = 'comment', className, embellishUser, extraInfo, onEdit, editText +}) { const editThreshold = new Date(item.createdAt).getTime() + 10 * 60000 const me = useMe() const router = useRouter() @@ -34,7 +37,11 @@ export default function ItemInfo ({ item, pendingSats, full, commentsText, comme
{!item.position && <> - @@ -58,7 +65,11 @@ export default function ItemInfo ({ item, pendingSats, full, commentsText, comme } }} title={numWithUnits(item.commentSats)} className='text-reset position-relative' > - {item.ncomments} {item.ncomments === 1 ? commentTextSingular || 'comment' : commentsText || 'comments'} + {numWithUnits(item.ncomments, { + abbreviate: false, + unitPlural: commentsText, + unitSingular: commentTextSingular + })} {hasNewComments && {' '} diff --git a/components/notifications.js b/components/notifications.js index 593a570a..103c87ce 100644 --- a/components/notifications.js +++ b/components/notifications.js @@ -133,7 +133,11 @@ function Streak ({ n }) { ] if (n.days) { - return `After ${n.days} days, ` + LOST_BLURBS[index] + return `After ${numWithUnits(n.days, { + abbreviate: false, + unitSingular: 'day', + unitPlural: 'days' + })}, ` + LOST_BLURBS[index] } return FOUND_BLURBS[index] @@ -177,7 +181,12 @@ function Invitification ({ n }) { return ( <> - your invite has been redeemed by {n.invite.invitees.length} stackers + your invite has been redeemed by + {numWithUnits(n.invite.invitees.length, { + abbreviate: false, + unitSingular: 'stacker', + unitPlural: 'stackers' + })}
- {n.earnedSats} sats zap from + {numWithUnits(n.earnedSats)} zap from {npub.slice(0, 10)}... diff --git a/components/poll.js b/components/poll.js index 4add69cf..696720d0 100644 --- a/components/poll.js +++ b/components/poll.js @@ -1,6 +1,6 @@ import { gql, useMutation } from '@apollo/client' import Button from 'react-bootstrap/Button' -import { fixedDecimal } from '../lib/format' +import { fixedDecimal, numWithUnits } from '../lib/format' import { timeLeft } from '../lib/time' import { useMe } from './me' import styles from './poll.module.css' @@ -86,7 +86,7 @@ export default function Poll ({ item }) { key={v.id} v={v} progress={item.poll.count ? fixedDecimal(v.count * 100 / item.poll.count, 1) : 0} />)} -
{item.poll.count} votes \ {expiresIn ? `${expiresIn} left` : 'poll ended'}
+
{numWithUnits(item.poll.count, { unitSingular: 'vote', unitPlural: 'votes' })} \ {expiresIn ? `${expiresIn} left` : 'poll ended'}
) } diff --git a/components/seo.js b/components/seo.js index 839da65c..df46f794 100644 --- a/components/seo.js +++ b/components/seo.js @@ -59,7 +59,7 @@ export default function Seo ({ sub, item, user }) { desc = `@${item.user.name} stacked ${numWithUnits(item.sats)} ${item.url ? `posting ${item.url}` : 'with this discussion'}` } if (item.ncomments) { - desc += ` [${item.ncomments} comments` + desc += ` [${numWithUnits(item.ncomments, { unitSingular: 'comment', unitPlural: 'comments' })}` if (item.boost) { desc += `, ${item.boost} boost` } @@ -69,7 +69,7 @@ export default function Seo ({ sub, item, user }) { } } if (user) { - desc = `@${user.name} has [${user.stacked} stacked, ${user.nposts} posts, ${user.ncomments} comments]` + desc = `@${user.name} has [${user.stacked} stacked, ${numWithUnits(user.nitems, { unitSingular: 'item', unitPlural: 'items' })}]` } return ( diff --git a/components/user-header.js b/components/user-header.js index 98d80510..a53f4df2 100644 --- a/components/user-header.js +++ b/components/user-header.js @@ -17,6 +17,7 @@ import Avatar from './avatar' import CowboyHat from './cowboy-hat' import { userSchema } from '../lib/validate' import { useShowModal } from './modal' +import { numWithUnits } from '../lib/format' export default function UserHeader ({ user }) { const router = useRouter() @@ -35,7 +36,13 @@ export default function UserHeader ({ user }) { - {user.nitems} items + + {numWithUnits(user.nitems, { + abbreviate: false, + unitSingular: 'item', + unitPlural: 'items' + })} +