1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
import {type AppBskyGraphDefs} from '@atproto/api'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {logger} from '#/logger'
import {useListBlockMutation, useListMuteMutation} from '#/state/queries/list'
import {atoms as a} from '#/alf'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {Mute_Stroke2_Corner0_Rounded as MuteIcon} from '#/components/icons/Mute'
import {PersonX_Stroke2_Corner0_Rounded as PersonXIcon} from '#/components/icons/Person'
import {Loader} from '#/components/Loader'
import * as Menu from '#/components/Menu'
import * as Prompt from '#/components/Prompt'
import * as Toast from '#/components/Toast'
export function SubscribeMenu({list}: {list: AppBskyGraphDefs.ListView}) {
const {_} = useLingui()
const subscribeMutePromptControl = Prompt.usePromptControl()
const subscribeBlockPromptControl = Prompt.usePromptControl()
const {mutateAsync: muteList, isPending: isMutePending} =
useListMuteMutation()
const {mutateAsync: blockList, isPending: isBlockPending} =
useListBlockMutation()
const isPending = isMutePending || isBlockPending
const onSubscribeMute = async () => {
try {
await muteList({uri: list.uri, mute: true})
Toast.show(_(msg({message: 'List muted', context: 'toast'})))
logger.metric(
'moderation:subscribedToList',
{listType: 'mute'},
{statsig: true},
)
} catch {
Toast.show(
_(
msg`There was an issue. Please check your internet connection and try again.`,
),
{type: 'error'},
)
}
}
const onSubscribeBlock = async () => {
try {
await blockList({uri: list.uri, block: true})
Toast.show(_(msg({message: 'List blocked', context: 'toast'})))
logger.metric(
'moderation:subscribedToList',
{listType: 'block'},
{statsig: true},
)
} catch {
Toast.show(
_(
msg`There was an issue. Please check your internet connection and try again.`,
),
{type: 'error'},
)
}
}
return (
<>
<Menu.Root>
<Menu.Trigger label={_(msg`Subscribe to this list`)}>
{({props}) => (
<Button
label={props.accessibilityLabel}
testID="subscribeBtn"
size="small"
color="primary_subtle"
style={[a.rounded_full]}
disabled={isPending}
{...props}>
{isPending && <ButtonIcon icon={Loader} />}
<ButtonText>
<Trans>Subscribe</Trans>
</ButtonText>
</Button>
)}
</Menu.Trigger>
<Menu.Outer showCancel>
<Menu.Group>
<Menu.Item
label={_(msg`Mute accounts`)}
onPress={subscribeMutePromptControl.open}>
<Menu.ItemText>
<Trans>Mute accounts</Trans>
</Menu.ItemText>
<Menu.ItemIcon position="right" icon={MuteIcon} />
</Menu.Item>
<Menu.Item
label={_(msg`Block accounts`)}
onPress={subscribeBlockPromptControl.open}>
<Menu.ItemText>
<Trans>Block accounts</Trans>
</Menu.ItemText>
<Menu.ItemIcon position="right" icon={PersonXIcon} />
</Menu.Item>
</Menu.Group>
</Menu.Outer>
</Menu.Root>
<Prompt.Basic
control={subscribeMutePromptControl}
title={_(msg`Mute these accounts?`)}
description={_(
msg`Muting is private. Muted accounts can interact with you, but you will not see their posts or receive notifications from them.`,
)}
onConfirm={onSubscribeMute}
confirmButtonCta={_(msg`Mute list`)}
/>
<Prompt.Basic
control={subscribeBlockPromptControl}
title={_(msg`Block these accounts?`)}
description={_(
msg`Blocking is public. Blocked accounts cannot reply in your threads, mention you, or otherwise interact with you.`,
)}
onConfirm={onSubscribeBlock}
confirmButtonCta={_(msg`Block list`)}
confirmButtonColor="negative"
/>
</>
)
}
|
