mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
1import React from 'react'
2import {Pressable, View} from 'react-native'
3import {msg} from '@lingui/macro'
4import {useLingui} from '@lingui/react'
5
6import {useRequireAuth} from '#/state/session'
7import {useSession} from '#/state/session'
8import {atoms as a, useTheme} from '#/alf'
9import {Button} from '#/components/Button'
10import {CloseQuote_Stroke2_Corner1_Rounded as Quote} from '#/components/icons/Quote'
11import {Repost_Stroke2_Corner2_Rounded as Repost} from '#/components/icons/Repost'
12import * as Menu from '#/components/Menu'
13import {Text} from '#/components/Typography'
14import {EventStopper} from '../EventStopper'
15import {formatCount} from '../numeric/format'
16
17interface Props {
18 isReposted: boolean
19 repostCount?: number
20 onRepost: () => void
21 onQuote: () => void
22 big?: boolean
23 embeddingDisabled: boolean
24}
25
26export const RepostButton = ({
27 isReposted,
28 repostCount,
29 onRepost,
30 onQuote,
31 big,
32 embeddingDisabled,
33}: Props) => {
34 const t = useTheme()
35 const {_} = useLingui()
36 const {hasSession} = useSession()
37 const requireAuth = useRequireAuth()
38
39 const color = React.useMemo(
40 () => ({
41 color: isReposted ? t.palette.positive_600 : t.palette.contrast_500,
42 }),
43 [t, isReposted],
44 )
45
46 return hasSession ? (
47 <EventStopper onKeyDown={false}>
48 <Menu.Root>
49 <Menu.Trigger label={_(msg`Repost or quote post`)}>
50 {({props, state}) => {
51 return (
52 <Pressable
53 {...props}
54 style={[
55 a.rounded_full,
56 (state.hovered || state.pressed) && {
57 backgroundColor: t.palette.contrast_25,
58 },
59 ]}>
60 <RepostInner
61 isReposted={isReposted}
62 color={color}
63 repostCount={repostCount}
64 big={big}
65 />
66 </Pressable>
67 )
68 }}
69 </Menu.Trigger>
70 <Menu.Outer style={{minWidth: 170}}>
71 <Menu.Item
72 label={isReposted ? _(msg`Undo repost`) : _(msg`Repost`)}
73 testID="repostDropdownRepostBtn"
74 onPress={onRepost}>
75 <Menu.ItemText>
76 {isReposted ? _(msg`Undo repost`) : _(msg`Repost`)}
77 </Menu.ItemText>
78 <Menu.ItemIcon icon={Repost} position="right" />
79 </Menu.Item>
80 <Menu.Item
81 disabled={embeddingDisabled}
82 label={
83 embeddingDisabled
84 ? _(msg`Quote posts disabled`)
85 : _(msg`Quote post`)
86 }
87 testID="repostDropdownQuoteBtn"
88 onPress={onQuote}>
89 <Menu.ItemText>
90 {embeddingDisabled
91 ? _(msg`Quote posts disabled`)
92 : _(msg`Quote post`)}
93 </Menu.ItemText>
94 <Menu.ItemIcon icon={Quote} position="right" />
95 </Menu.Item>
96 </Menu.Outer>
97 </Menu.Root>
98 </EventStopper>
99 ) : (
100 <Button
101 onPress={() => {
102 requireAuth(() => {})
103 }}
104 label={_(msg`Repost or quote post`)}
105 style={{padding: 0}}
106 hoverStyle={t.atoms.bg_contrast_25}
107 shape="round"
108 variant="ghost"
109 color="secondary">
110 <RepostInner
111 isReposted={isReposted}
112 color={color}
113 repostCount={repostCount}
114 big={big}
115 />
116 </Button>
117 )
118}
119
120const RepostInner = ({
121 isReposted,
122 color,
123 repostCount,
124 big,
125}: {
126 isReposted: boolean
127 color: {color: string}
128 repostCount?: number
129 big?: boolean
130}) => {
131 const {i18n} = useLingui()
132 return (
133 <View style={[a.flex_row, a.align_center, a.gap_xs, {padding: 5}]}>
134 <Repost style={color} width={big ? 22 : 18} />
135 {typeof repostCount !== 'undefined' && repostCount > 0 ? (
136 <Text
137 testID="repostCount"
138 style={[
139 color,
140 big ? a.text_md : {fontSize: 15},
141 isReposted && [a.font_bold],
142 a.user_select_none,
143 ]}>
144 {formatCount(i18n, repostCount)}
145 </Text>
146 ) : undefined}
147 </View>
148 )
149}