Files
bsky-social-app/src/components/PostControls/RepostButton.web.tsx
T
Samuel Newman 0c4b908020 Simplify post number formatting (#8978)
* revert number formatting change

* use formatPostStatCount in repost web
2025-09-05 09:29:10 -05:00

115 lines
3.5 KiB
TypeScript

import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useRequireAuth} from '#/state/session'
import {useSession} from '#/state/session'
import {EventStopper} from '#/view/com/util/EventStopper'
import {useTheme} from '#/alf'
import {CloseQuote_Stroke2_Corner1_Rounded as Quote} from '#/components/icons/Quote'
import {Repost_Stroke2_Corner2_Rounded as Repost} from '#/components/icons/Repost'
import * as Menu from '#/components/Menu'
import {
PostControlButton,
PostControlButtonIcon,
PostControlButtonText,
} from './PostControlButton'
import {useFormatPostStatCount} from './util'
interface Props {
isReposted: boolean
repostCount?: number
onRepost: () => void
onQuote: () => void
big?: boolean
embeddingDisabled: boolean
}
export const RepostButton = ({
isReposted,
repostCount,
onRepost,
onQuote,
big,
embeddingDisabled,
}: Props) => {
const t = useTheme()
const {_} = useLingui()
const {hasSession} = useSession()
const requireAuth = useRequireAuth()
const formatPostStatCount = useFormatPostStatCount()
return hasSession ? (
<EventStopper onKeyDown={false}>
<Menu.Root>
<Menu.Trigger label={_(msg`Repost or quote post`)}>
{({props}) => {
return (
<PostControlButton
testID="repostBtn"
active={isReposted}
activeColor={t.palette.positive_600}
label={props.accessibilityLabel}
big={big}
{...props}>
<PostControlButtonIcon icon={Repost} />
{typeof repostCount !== 'undefined' && repostCount > 0 && (
<PostControlButtonText testID="repostCount">
{formatPostStatCount(repostCount)}
</PostControlButtonText>
)}
</PostControlButton>
)
}}
</Menu.Trigger>
<Menu.Outer style={{minWidth: 170}}>
<Menu.Item
label={
isReposted
? _(msg`Undo repost`)
: _(msg({message: `Repost`, context: `action`}))
}
testID="repostDropdownRepostBtn"
onPress={onRepost}>
<Menu.ItemText>
{isReposted
? _(msg`Undo repost`)
: _(msg({message: `Repost`, context: `action`}))}
</Menu.ItemText>
<Menu.ItemIcon icon={Repost} position="right" />
</Menu.Item>
<Menu.Item
disabled={embeddingDisabled}
label={
embeddingDisabled
? _(msg`Quote posts disabled`)
: _(msg`Quote post`)
}
testID="repostDropdownQuoteBtn"
onPress={onQuote}>
<Menu.ItemText>
{embeddingDisabled
? _(msg`Quote posts disabled`)
: _(msg`Quote post`)}
</Menu.ItemText>
<Menu.ItemIcon icon={Quote} position="right" />
</Menu.Item>
</Menu.Outer>
</Menu.Root>
</EventStopper>
) : (
<PostControlButton
onPress={() => requireAuth(() => {})}
active={isReposted}
activeColor={t.palette.positive_600}
label={_(msg`Repost or quote post`)}
big={big}>
<PostControlButtonIcon icon={Repost} />
{typeof repostCount !== 'undefined' && repostCount > 0 && (
<PostControlButtonText testID="repostCount">
{formatPostStatCount(repostCount)}
</PostControlButtonText>
)}
</PostControlButton>
)
}