forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
make convo menu lazy (#7604)
authored by
Samuel Newman
and committed by
GitHub
24a4ab2b
32b28d66
+156
-123
+156
-123
src/components/dms/ConvoMenu.tsx
+156
-123
src/components/dms/ConvoMenu.tsx
···
38
38
import {ReportDialog} from './ReportDialog'
39
39
40
40
let ConvoMenu = ({
41
-
convo: initialConvo,
41
+
convo,
42
42
profile,
43
43
control,
44
44
currentScreen,
···
61
61
latestReportableMessage?: ChatBskyConvoDefs.MessageView
62
62
style?: ViewStyleProp['style']
63
63
}): React.ReactNode => {
64
-
const navigation = useNavigation<NavigationProp>()
65
64
const {_} = useLingui()
66
65
const t = useTheme()
66
+
67
67
const leaveConvoControl = Prompt.usePromptControl()
68
68
const reportControl = Prompt.usePromptControl()
69
69
const blockedByListControl = Prompt.usePromptControl()
70
-
const {mutate: markAsRead} = useMarkAsReadMutation()
71
70
72
-
const {listBlocks, userBlock} = blockInfo
73
-
const isBlocking = userBlock || !!listBlocks.length
74
-
const isDeletedAccount = profile.handle === 'missing.invalid'
75
-
76
-
const convoId = initialConvo.id
77
-
const {data: convo} = useConvoQuery(initialConvo)
78
-
79
-
const onNavigateToProfile = useCallback(() => {
80
-
navigation.navigate('Profile', {name: profile.did})
81
-
}, [navigation, profile.did])
82
-
83
-
const {mutate: muteConvo} = useMuteConvo(convoId, {
84
-
onSuccess: data => {
85
-
if (data.convo.muted) {
86
-
Toast.show(_(msg`Chat muted`))
87
-
} else {
88
-
Toast.show(_(msg`Chat unmuted`))
89
-
}
90
-
},
91
-
onError: () => {
92
-
Toast.show(_(msg`Could not mute chat`), 'xmark')
93
-
},
94
-
})
95
-
96
-
const [queueBlock, queueUnblock] = useProfileBlockMutationQueue(profile)
97
-
98
-
const toggleBlock = React.useCallback(() => {
99
-
if (listBlocks.length) {
100
-
blockedByListControl.open()
101
-
return
102
-
}
103
-
104
-
if (userBlock) {
105
-
queueUnblock()
106
-
} else {
107
-
queueBlock()
108
-
}
109
-
}, [userBlock, listBlocks, blockedByListControl, queueBlock, queueUnblock])
71
+
const {listBlocks} = blockInfo
110
72
111
73
return (
112
74
<>
···
119
81
{...props}
120
82
onPress={() => {
121
83
Keyboard.dismiss()
122
-
123
84
props.onPress()
124
85
}}
125
86
style={[
···
136
97
</View>
137
98
)}
138
99
139
-
{isDeletedAccount ? (
140
-
<Menu.Outer>
141
-
<Menu.Item
142
-
label={_(msg`Leave conversation`)}
143
-
onPress={() => leaveConvoControl.open()}>
144
-
<Menu.ItemText>
145
-
<Trans>Leave conversation</Trans>
146
-
</Menu.ItemText>
147
-
<Menu.ItemIcon icon={ArrowBoxLeft} />
148
-
</Menu.Item>
149
-
</Menu.Outer>
150
-
) : (
151
-
<Menu.Outer>
152
-
<Menu.Group>
153
-
{showMarkAsRead && (
154
-
<Menu.Item
155
-
label={_(msg`Mark as read`)}
156
-
onPress={() => markAsRead({convoId})}>
157
-
<Menu.ItemText>
158
-
<Trans>Mark as read</Trans>
159
-
</Menu.ItemText>
160
-
<Menu.ItemIcon icon={Bubble} />
161
-
</Menu.Item>
162
-
)}
163
-
<Menu.Item
164
-
label={_(msg`Go to user's profile`)}
165
-
onPress={onNavigateToProfile}>
166
-
<Menu.ItemText>
167
-
<Trans>Go to profile</Trans>
168
-
</Menu.ItemText>
169
-
<Menu.ItemIcon icon={Person} />
170
-
</Menu.Item>
171
-
<Menu.Item
172
-
label={_(msg`Mute conversation`)}
173
-
onPress={() => muteConvo({mute: !convo?.muted})}>
174
-
<Menu.ItemText>
175
-
{convo?.muted ? (
176
-
<Trans>Unmute conversation</Trans>
177
-
) : (
178
-
<Trans>Mute conversation</Trans>
179
-
)}
180
-
</Menu.ItemText>
181
-
<Menu.ItemIcon icon={convo?.muted ? Unmute : Mute} />
182
-
</Menu.Item>
183
-
</Menu.Group>
184
-
<Menu.Divider />
185
-
<Menu.Group>
186
-
<Menu.Item
187
-
label={
188
-
isBlocking ? _(msg`Unblock account`) : _(msg`Block account`)
189
-
}
190
-
onPress={toggleBlock}>
191
-
<Menu.ItemText>
192
-
{isBlocking ? _(msg`Unblock account`) : _(msg`Block account`)}
193
-
</Menu.ItemText>
194
-
<Menu.ItemIcon icon={isBlocking ? PersonCheck : PersonX} />
195
-
</Menu.Item>
196
-
<Menu.Item
197
-
label={_(msg`Report conversation`)}
198
-
onPress={() => reportControl.open()}>
199
-
<Menu.ItemText>
200
-
<Trans>Report conversation</Trans>
201
-
</Menu.ItemText>
202
-
<Menu.ItemIcon icon={Flag} />
203
-
</Menu.Item>
204
-
</Menu.Group>
205
-
<Menu.Divider />
206
-
<Menu.Group>
207
-
<Menu.Item
208
-
label={_(msg`Leave conversation`)}
209
-
onPress={() => leaveConvoControl.open()}>
210
-
<Menu.ItemText>
211
-
<Trans>Leave conversation</Trans>
212
-
</Menu.ItemText>
213
-
<Menu.ItemIcon icon={ArrowBoxLeft} />
214
-
</Menu.Item>
215
-
</Menu.Group>
216
-
</Menu.Outer>
217
-
)}
100
+
<Menu.Outer>
101
+
<MenuContent
102
+
profile={profile}
103
+
showMarkAsRead={showMarkAsRead}
104
+
blockInfo={blockInfo}
105
+
convo={convo}
106
+
leaveConvoControl={leaveConvoControl}
107
+
reportControl={reportControl}
108
+
blockedByListControl={blockedByListControl}
109
+
/>
110
+
</Menu.Outer>
218
111
</Menu.Root>
219
112
220
113
<LeaveConvoPrompt
221
114
control={leaveConvoControl}
222
-
convoId={convoId}
115
+
convoId={convo.id}
223
116
currentScreen={currentScreen}
224
117
/>
225
118
{latestReportableMessage ? (
···
227
120
currentScreen={currentScreen}
228
121
params={{
229
122
type: 'convoMessage',
230
-
convoId: convoId,
123
+
convoId: convo.id,
231
124
message: latestReportableMessage,
232
125
}}
233
126
control={reportControl}
···
244
137
)
245
138
}
246
139
ConvoMenu = React.memo(ConvoMenu)
140
+
141
+
function MenuContent({
142
+
convo: initialConvo,
143
+
profile,
144
+
showMarkAsRead,
145
+
blockInfo,
146
+
leaveConvoControl,
147
+
reportControl,
148
+
blockedByListControl,
149
+
}: {
150
+
convo: ChatBskyConvoDefs.ConvoView
151
+
profile: Shadow<AppBskyActorDefs.ProfileViewBasic>
152
+
showMarkAsRead?: boolean
153
+
blockInfo: {
154
+
listBlocks: ModerationCause[]
155
+
userBlock?: ModerationCause
156
+
}
157
+
leaveConvoControl: Prompt.PromptControlProps
158
+
reportControl: Prompt.PromptControlProps
159
+
blockedByListControl: Prompt.PromptControlProps
160
+
}) {
161
+
const navigation = useNavigation<NavigationProp>()
162
+
const {_} = useLingui()
163
+
const {mutate: markAsRead} = useMarkAsReadMutation()
164
+
165
+
const {listBlocks, userBlock} = blockInfo
166
+
const isBlocking = userBlock || !!listBlocks.length
167
+
const isDeletedAccount = profile.handle === 'missing.invalid'
168
+
169
+
const convoId = initialConvo.id
170
+
const {data: convo} = useConvoQuery(initialConvo)
171
+
172
+
const onNavigateToProfile = useCallback(() => {
173
+
navigation.navigate('Profile', {name: profile.did})
174
+
}, [navigation, profile.did])
175
+
176
+
const {mutate: muteConvo} = useMuteConvo(convoId, {
177
+
onSuccess: data => {
178
+
if (data.convo.muted) {
179
+
Toast.show(_(msg`Chat muted`))
180
+
} else {
181
+
Toast.show(_(msg`Chat unmuted`))
182
+
}
183
+
},
184
+
onError: () => {
185
+
Toast.show(_(msg`Could not mute chat`), 'xmark')
186
+
},
187
+
})
188
+
189
+
const [queueBlock, queueUnblock] = useProfileBlockMutationQueue(profile)
190
+
191
+
const toggleBlock = React.useCallback(() => {
192
+
if (listBlocks.length) {
193
+
blockedByListControl.open()
194
+
return
195
+
}
196
+
197
+
if (userBlock) {
198
+
queueUnblock()
199
+
} else {
200
+
queueBlock()
201
+
}
202
+
}, [userBlock, listBlocks, blockedByListControl, queueBlock, queueUnblock])
203
+
204
+
return isDeletedAccount ? (
205
+
<Menu.Item
206
+
label={_(msg`Leave conversation`)}
207
+
onPress={() => leaveConvoControl.open()}>
208
+
<Menu.ItemText>
209
+
<Trans>Leave conversation</Trans>
210
+
</Menu.ItemText>
211
+
<Menu.ItemIcon icon={ArrowBoxLeft} />
212
+
</Menu.Item>
213
+
) : (
214
+
<>
215
+
<Menu.Group>
216
+
{showMarkAsRead && (
217
+
<Menu.Item
218
+
label={_(msg`Mark as read`)}
219
+
onPress={() => markAsRead({convoId})}>
220
+
<Menu.ItemText>
221
+
<Trans>Mark as read</Trans>
222
+
</Menu.ItemText>
223
+
<Menu.ItemIcon icon={Bubble} />
224
+
</Menu.Item>
225
+
)}
226
+
<Menu.Item
227
+
label={_(msg`Go to user's profile`)}
228
+
onPress={onNavigateToProfile}>
229
+
<Menu.ItemText>
230
+
<Trans>Go to profile</Trans>
231
+
</Menu.ItemText>
232
+
<Menu.ItemIcon icon={Person} />
233
+
</Menu.Item>
234
+
<Menu.Item
235
+
label={_(msg`Mute conversation`)}
236
+
onPress={() => muteConvo({mute: !convo?.muted})}>
237
+
<Menu.ItemText>
238
+
{convo?.muted ? (
239
+
<Trans>Unmute conversation</Trans>
240
+
) : (
241
+
<Trans>Mute conversation</Trans>
242
+
)}
243
+
</Menu.ItemText>
244
+
<Menu.ItemIcon icon={convo?.muted ? Unmute : Mute} />
245
+
</Menu.Item>
246
+
</Menu.Group>
247
+
<Menu.Divider />
248
+
<Menu.Group>
249
+
<Menu.Item
250
+
label={isBlocking ? _(msg`Unblock account`) : _(msg`Block account`)}
251
+
onPress={toggleBlock}>
252
+
<Menu.ItemText>
253
+
{isBlocking ? _(msg`Unblock account`) : _(msg`Block account`)}
254
+
</Menu.ItemText>
255
+
<Menu.ItemIcon icon={isBlocking ? PersonCheck : PersonX} />
256
+
</Menu.Item>
257
+
<Menu.Item
258
+
label={_(msg`Report conversation`)}
259
+
onPress={() => reportControl.open()}>
260
+
<Menu.ItemText>
261
+
<Trans>Report conversation</Trans>
262
+
</Menu.ItemText>
263
+
<Menu.ItemIcon icon={Flag} />
264
+
</Menu.Item>
265
+
</Menu.Group>
266
+
<Menu.Divider />
267
+
<Menu.Group>
268
+
<Menu.Item
269
+
label={_(msg`Leave conversation`)}
270
+
onPress={() => leaveConvoControl.open()}>
271
+
<Menu.ItemText>
272
+
<Trans>Leave conversation</Trans>
273
+
</Menu.ItemText>
274
+
<Menu.ItemIcon icon={ArrowBoxLeft} />
275
+
</Menu.Item>
276
+
</Menu.Group>
277
+
</>
278
+
)
279
+
}
247
280
248
281
export {ConvoMenu}