Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

make convo menu lazy (#7604)

authored by

Samuel Newman and committed by
GitHub
24a4ab2b 32b28d66

+156 -123
+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}