+1 -1

src/Navigation.tsx

··· 64 64 import {PrivacyPolicyScreen} from '#/view/screens/PrivacyPolicy' 65 65 import {ProfileScreen} from '#/view/screens/Profile' 66 66 import {ProfileFeedLikedByScreen} from '#/view/screens/ProfileFeedLikedBy' 67 67 - import {ProfileListScreen} from '#/view/screens/ProfileList' 68 67 import {SavedFeeds} from '#/view/screens/SavedFeeds' 69 68 import {Storybook} from '#/view/screens/Storybook' 70 69 import {SupportScreen} from '#/view/screens/Support' ··· 92 91 import {ProfileFollowsScreen} from '#/screens/Profile/ProfileFollows' 93 92 import {ProfileLabelerLikedByScreen} from '#/screens/Profile/ProfileLabelerLikedBy' 94 93 import {ProfileSearchScreen} from '#/screens/Profile/ProfileSearch' 94 94 + import {ProfileListScreen} from '#/screens/ProfileList' 95 95 import {SearchScreen} from '#/screens/Search' 96 96 import {AboutSettingsScreen} from '#/screens/Settings/AboutSettings' 97 97 import {AccessibilitySettingsScreen} from '#/screens/Settings/AccessibilitySettings'

+136

src/screens/ProfileList/AboutSection.tsx

··· 1 1 + import {useCallback, useImperativeHandle, useState} from 'react' 2 2 + import {View} from 'react-native' 3 3 + import {type AppBskyGraphDefs} from '@atproto/api' 4 4 + import {msg, Trans} from '@lingui/macro' 5 5 + import {useLingui} from '@lingui/react' 6 6 + 7 7 + import {isNative} from '#/platform/detection' 8 8 + import {useSession} from '#/state/session' 9 9 + import {ListMembers} from '#/view/com/lists/ListMembers' 10 10 + import {EmptyState} from '#/view/com/util/EmptyState' 11 11 + import {type ListRef} from '#/view/com/util/List' 12 12 + import {LoadLatestBtn} from '#/view/com/util/load-latest/LoadLatestBtn' 13 13 + import {atoms as a, useBreakpoints} from '#/alf' 14 14 + import {Button, ButtonIcon, ButtonText} from '#/components/Button' 15 15 + import {PersonPlus_Stroke2_Corner0_Rounded as PersonPlusIcon} from '#/components/icons/Person' 16 16 + 17 17 + interface SectionRef { 18 18 + scrollToTop: () => void 19 19 + } 20 20 + 21 21 + interface AboutSectionProps { 22 22 + ref?: React.Ref<SectionRef> 23 23 + list: AppBskyGraphDefs.ListView 24 24 + onPressAddUser: () => void 25 25 + headerHeight: number 26 26 + scrollElRef: ListRef 27 27 + } 28 28 + 29 29 + export function AboutSection({ 30 30 + ref, 31 31 + list, 32 32 + onPressAddUser, 33 33 + headerHeight, 34 34 + scrollElRef, 35 35 + }: AboutSectionProps) { 36 36 + const {_} = useLingui() 37 37 + const {currentAccount} = useSession() 38 38 + const {gtMobile} = useBreakpoints() 39 39 + const [isScrolledDown, setIsScrolledDown] = useState(false) 40 40 + const isOwner = list.creator.did === currentAccount?.did 41 41 + 42 42 + const onScrollToTop = useCallback(() => { 43 43 + scrollElRef.current?.scrollToOffset({ 44 44 + animated: isNative, 45 45 + offset: -headerHeight, 46 46 + }) 47 47 + }, [scrollElRef, headerHeight]) 48 48 + 49 49 + useImperativeHandle(ref, () => ({ 50 50 + scrollToTop: onScrollToTop, 51 51 + })) 52 52 + 53 53 + const renderHeader = useCallback(() => { 54 54 + if (!isOwner) { 55 55 + return <View /> 56 56 + } 57 57 + if (!gtMobile) { 58 58 + return ( 59 59 + <View style={[a.px_sm, a.py_sm]}> 60 60 + <Button 61 61 + testID="addUserBtn" 62 62 + label={_(msg`Add a user to this list`)} 63 63 + onPress={onPressAddUser} 64 64 + color="primary" 65 65 + size="small" 66 66 + variant="outline" 67 67 + style={[a.py_md]}> 68 68 + <ButtonIcon icon={PersonPlusIcon} /> 69 69 + <ButtonText> 70 70 + <Trans>Add people</Trans> 71 71 + </ButtonText> 72 72 + </Button> 73 73 + </View> 74 74 + ) 75 75 + } 76 76 + return ( 77 77 + <View style={[a.px_lg, a.py_md, a.flex_row_reverse]}> 78 78 + <Button 79 79 + testID="addUserBtn" 80 80 + label={_(msg`Add a user to this list`)} 81 81 + onPress={onPressAddUser} 82 82 + color="primary" 83 83 + size="small" 84 84 + variant="ghost" 85 85 + style={[a.py_sm]}> 86 86 + <ButtonIcon icon={PersonPlusIcon} /> 87 87 + <ButtonText> 88 88 + <Trans>Add people</Trans> 89 89 + </ButtonText> 90 90 + </Button> 91 91 + </View> 92 92 + ) 93 93 + }, [isOwner, _, onPressAddUser, gtMobile]) 94 94 + 95 95 + const renderEmptyState = useCallback(() => { 96 96 + return ( 97 97 + <View style={[a.gap_xl, a.align_center]}> 98 98 + <EmptyState icon="users-slash" message={_(msg`This list is empty.`)} /> 99 99 + {isOwner && ( 100 100 + <Button 101 101 + testID="emptyStateAddUserBtn" 102 102 + label={_(msg`Start adding people`)} 103 103 + onPress={onPressAddUser} 104 104 + color="primary" 105 105 + size="small"> 106 106 + <ButtonIcon icon={PersonPlusIcon} /> 107 107 + <ButtonText> 108 108 + <Trans>Start adding people!</Trans> 109 109 + </ButtonText> 110 110 + </Button> 111 111 + )} 112 112 + </View> 113 113 + ) 114 114 + }, [_, onPressAddUser, isOwner]) 115 115 + 116 116 + return ( 117 117 + <View> 118 118 + <ListMembers 119 119 + testID="listItems" 120 120 + list={list.uri} 121 121 + scrollElRef={scrollElRef} 122 122 + renderHeader={renderHeader} 123 123 + renderEmptyState={renderEmptyState} 124 124 + headerOffset={headerHeight} 125 125 + onScrolledDownChange={setIsScrolledDown} 126 126 + /> 127 127 + {isScrolledDown && ( 128 128 + <LoadLatestBtn 129 129 + onPress={onScrollToTop} 130 130 + label={_(msg`Scroll to top`)} 131 131 + showIndicator={false} 132 132 + /> 133 133 + )} 134 134 + </View> 135 135 + ) 136 136 + }

+111

src/screens/ProfileList/FeedSection.tsx

··· 1 1 + import {useCallback, useEffect, useImperativeHandle, useState} from 'react' 2 2 + import {View} from 'react-native' 3 3 + import {msg, Trans} from '@lingui/macro' 4 4 + import {useLingui} from '@lingui/react' 5 5 + import {useIsFocused} from '@react-navigation/native' 6 6 + import {useQueryClient} from '@tanstack/react-query' 7 7 + 8 8 + import {isNative} from '#/platform/detection' 9 9 + import {listenSoftReset} from '#/state/events' 10 10 + import {type FeedDescriptor} from '#/state/queries/post-feed' 11 11 + import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed' 12 12 + import {PostFeed} from '#/view/com/posts/PostFeed' 13 13 + import {EmptyState} from '#/view/com/util/EmptyState' 14 14 + import {type ListRef} from '#/view/com/util/List' 15 15 + import {LoadLatestBtn} from '#/view/com/util/load-latest/LoadLatestBtn' 16 16 + import {atoms as a} from '#/alf' 17 17 + import {Button, ButtonIcon, ButtonText} from '#/components/Button' 18 18 + import {PersonPlus_Stroke2_Corner0_Rounded as PersonPlusIcon} from '#/components/icons/Person' 19 19 + 20 20 + interface SectionRef { 21 21 + scrollToTop: () => void 22 22 + } 23 23 + 24 24 + interface FeedSectionProps { 25 25 + ref?: React.Ref<SectionRef> 26 26 + feed: FeedDescriptor 27 27 + headerHeight: number 28 28 + scrollElRef: ListRef 29 29 + isFocused: boolean 30 30 + isOwner: boolean 31 31 + onPressAddUser: () => void 32 32 + } 33 33 + 34 34 + export function FeedSection({ 35 35 + ref, 36 36 + feed, 37 37 + scrollElRef, 38 38 + headerHeight, 39 39 + isFocused, 40 40 + isOwner, 41 41 + onPressAddUser, 42 42 + }: FeedSectionProps) { 43 43 + const queryClient = useQueryClient() 44 44 + const [hasNew, setHasNew] = useState(false) 45 45 + const [isScrolledDown, setIsScrolledDown] = useState(false) 46 46 + const isScreenFocused = useIsFocused() 47 47 + const {_} = useLingui() 48 48 + 49 49 + const onScrollToTop = useCallback(() => { 50 50 + scrollElRef.current?.scrollToOffset({ 51 51 + animated: isNative, 52 52 + offset: -headerHeight, 53 53 + }) 54 54 + queryClient.resetQueries({queryKey: FEED_RQKEY(feed)}) 55 55 + setHasNew(false) 56 56 + }, [scrollElRef, headerHeight, queryClient, feed, setHasNew]) 57 57 + useImperativeHandle(ref, () => ({ 58 58 + scrollToTop: onScrollToTop, 59 59 + })) 60 60 + 61 61 + useEffect(() => { 62 62 + if (!isScreenFocused) { 63 63 + return 64 64 + } 65 65 + return listenSoftReset(onScrollToTop) 66 66 + }, [onScrollToTop, isScreenFocused]) 67 67 + 68 68 + const renderPostsEmpty = useCallback(() => { 69 69 + return ( 70 70 + <View style={[a.gap_xl, a.align_center]}> 71 71 + <EmptyState icon="hashtag" message={_(msg`This feed is empty.`)} /> 72 72 + {isOwner && ( 73 73 + <Button 74 74 + label={_(msg`Start adding people`)} 75 75 + onPress={onPressAddUser} 76 76 + color="primary" 77 77 + size="small"> 78 78 + <ButtonIcon icon={PersonPlusIcon} /> 79 79 + <ButtonText> 80 80 + <Trans>Start adding people!</Trans> 81 81 + </ButtonText> 82 82 + </Button> 83 83 + )} 84 84 + </View> 85 85 + ) 86 86 + }, [_, onPressAddUser, isOwner]) 87 87 + 88 88 + return ( 89 89 + <View> 90 90 + <PostFeed 91 91 + testID="listFeed" 92 92 + enabled={isFocused} 93 93 + feed={feed} 94 94 + pollInterval={60e3} 95 95 + disablePoll={hasNew} 96 96 + scrollElRef={scrollElRef} 97 97 + onHasNew={setHasNew} 98 98 + onScrolledDownChange={setIsScrolledDown} 99 99 + renderEmptyState={renderPostsEmpty} 100 100 + headerOffset={headerHeight} 101 101 + /> 102 102 + {(isScrolledDown || hasNew) && ( 103 103 + <LoadLatestBtn 104 104 + onPress={onScrollToTop} 105 105 + label={_(msg`Load new posts`)} 106 106 + showIndicator={hasNew} 107 107 + /> 108 108 + )} 109 109 + </View> 110 110 + ) 111 111 + }

+46

src/screens/ProfileList/components/ErrorScreen.tsx

··· 1 1 + import {View} from 'react-native' 2 2 + import {msg, Trans} from '@lingui/macro' 3 3 + import {useLingui} from '@lingui/react' 4 4 + import {useNavigation} from '@react-navigation/native' 5 5 + 6 6 + import {type NavigationProp} from '#/lib/routes/types' 7 7 + import {atoms as a, useTheme} from '#/alf' 8 8 + import {Button, ButtonText} from '#/components/Button' 9 9 + import {Text} from '#/components/Typography' 10 10 + 11 11 + export function ErrorScreen({error}: {error: React.ReactNode}) { 12 12 + const t = useTheme() 13 13 + const navigation = useNavigation<NavigationProp>() 14 14 + const {_} = useLingui() 15 15 + const onPressBack = () => { 16 16 + if (navigation.canGoBack()) { 17 17 + navigation.goBack() 18 18 + } else { 19 19 + navigation.navigate('Home') 20 20 + } 21 21 + } 22 22 + 23 23 + return ( 24 24 + <View style={[a.px_xl, a.py_md, a.gap_md]}> 25 25 + <Text style={[a.text_4xl, a.font_heavy]}> 26 26 + <Trans>Could not load list</Trans> 27 27 + </Text> 28 28 + <Text style={[a.text_md, t.atoms.text_contrast_high, a.leading_snug]}> 29 29 + {error} 30 30 + </Text> 31 31 + 32 32 + <View style={[a.flex_row, a.mt_lg]}> 33 33 + <Button 34 34 + label={_(msg`Go back`)} 35 35 + accessibilityHint={_(msg`Returns to previous page`)} 36 36 + onPress={onPressBack} 37 37 + size="small" 38 38 + color="secondary"> 39 39 + <ButtonText> 40 40 + <Trans>Go back</Trans> 41 41 + </ButtonText> 42 42 + </Button> 43 43 + </View> 44 44 + </View> 45 45 + ) 46 46 + }

+208

src/screens/ProfileList/components/Header.tsx

··· 1 1 + import {useMemo} from 'react' 2 2 + import {View} from 'react-native' 3 3 + import {AppBskyGraphDefs, RichText as RichTextAPI} from '@atproto/api' 4 4 + import {msg, Trans} from '@lingui/macro' 5 5 + import {useLingui} from '@lingui/react' 6 6 + 7 7 + import {useHaptics} from '#/lib/haptics' 8 8 + import {makeListLink} from '#/lib/routes/links' 9 9 + import {logger} from '#/logger' 10 10 + import {useListBlockMutation, useListMuteMutation} from '#/state/queries/list' 11 11 + import { 12 12 + useAddSavedFeedsMutation, 13 13 + type UsePreferencesQueryResponse, 14 14 + useUpdateSavedFeedsMutation, 15 15 + } from '#/state/queries/preferences' 16 16 + import {useSession} from '#/state/session' 17 17 + import {ProfileSubpageHeader} from '#/view/com/profile/ProfileSubpageHeader' 18 18 + import {atoms as a} from '#/alf' 19 19 + import {Button, ButtonIcon, ButtonText} from '#/components/Button' 20 20 + import {Pin_Stroke2_Corner0_Rounded as PinIcon} from '#/components/icons/Pin' 21 21 + import {Loader} from '#/components/Loader' 22 22 + import {RichText} from '#/components/RichText' 23 23 + import * as Toast from '#/components/Toast' 24 24 + import {MoreOptionsMenu} from './MoreOptionsMenu' 25 25 + import {SubscribeMenu} from './SubscribeMenu' 26 26 + 27 27 + export function Header({ 28 28 + rkey, 29 29 + list, 30 30 + preferences, 31 31 + }: { 32 32 + rkey: string 33 33 + list: AppBskyGraphDefs.ListView 34 34 + preferences: UsePreferencesQueryResponse 35 35 + }) { 36 36 + const {_} = useLingui() 37 37 + const {currentAccount} = useSession() 38 38 + const isCurateList = list.purpose === AppBskyGraphDefs.CURATELIST 39 39 + const isModList = list.purpose === AppBskyGraphDefs.MODLIST 40 40 + const isBlocking = !!list.viewer?.blocked 41 41 + const isMuting = !!list.viewer?.muted 42 42 + const playHaptic = useHaptics() 43 43 + 44 44 + const {mutateAsync: muteList, isPending: isMutePending} = 45 45 + useListMuteMutation() 46 46 + const {mutateAsync: blockList, isPending: isBlockPending} = 47 47 + useListBlockMutation() 48 48 + const {mutateAsync: addSavedFeeds, isPending: isAddSavedFeedPending} = 49 49 + useAddSavedFeedsMutation() 50 50 + const {mutateAsync: updateSavedFeeds, isPending: isUpdatingSavedFeeds} = 51 51 + useUpdateSavedFeedsMutation() 52 52 + 53 53 + const isPending = isAddSavedFeedPending || isUpdatingSavedFeeds 54 54 + 55 55 + const savedFeedConfig = preferences?.savedFeeds?.find( 56 56 + f => f.value === list.uri, 57 57 + ) 58 58 + const isPinned = Boolean(savedFeedConfig?.pinned) 59 59 + 60 60 + const onTogglePinned = async () => { 61 61 + playHaptic() 62 62 + 63 63 + try { 64 64 + if (savedFeedConfig) { 65 65 + const pinned = !savedFeedConfig.pinned 66 66 + await updateSavedFeeds([ 67 67 + { 68 68 + ...savedFeedConfig, 69 69 + pinned, 70 70 + }, 71 71 + ]) 72 72 + Toast.show( 73 73 + pinned 74 74 + ? _(msg`Pinned to your feeds`) 75 75 + : _(msg`Unpinned from your feeds`), 76 76 + ) 77 77 + } else { 78 78 + await addSavedFeeds([ 79 79 + { 80 80 + type: 'list', 81 81 + value: list.uri, 82 82 + pinned: true, 83 83 + }, 84 84 + ]) 85 85 + Toast.show(_(msg`Saved to your feeds`)) 86 86 + } 87 87 + } catch (e) { 88 88 + Toast.show(_(msg`There was an issue contacting the server`), { 89 89 + type: 'error', 90 90 + }) 91 91 + logger.error('Failed to toggle pinned feed', {message: e}) 92 92 + } 93 93 + } 94 94 + 95 95 + const onUnsubscribeMute = async () => { 96 96 + try { 97 97 + await muteList({uri: list.uri, mute: false}) 98 98 + Toast.show(_(msg({message: 'List unmuted', context: 'toast'}))) 99 99 + logger.metric( 100 100 + 'moderation:unsubscribedFromList', 101 101 + {listType: 'mute'}, 102 102 + {statsig: true}, 103 103 + ) 104 104 + } catch { 105 105 + Toast.show( 106 106 + _( 107 107 + msg`There was an issue. Please check your internet connection and try again.`, 108 108 + ), 109 109 + ) 110 110 + } 111 111 + } 112 112 + 113 113 + const onUnsubscribeBlock = async () => { 114 114 + try { 115 115 + await blockList({uri: list.uri, block: false}) 116 116 + Toast.show(_(msg({message: 'List unblocked', context: 'toast'}))) 117 117 + logger.metric( 118 118 + 'moderation:unsubscribedFromList', 119 119 + {listType: 'block'}, 120 120 + {statsig: true}, 121 121 + ) 122 122 + } catch { 123 123 + Toast.show( 124 124 + _( 125 125 + msg`There was an issue. Please check your internet connection and try again.`, 126 126 + ), 127 127 + ) 128 128 + } 129 129 + } 130 130 + 131 131 + const descriptionRT = useMemo( 132 132 + () => 133 133 + list.description 134 134 + ? new RichTextAPI({ 135 135 + text: list.description, 136 136 + facets: list.descriptionFacets, 137 137 + }) 138 138 + : undefined, 139 139 + [list], 140 140 + ) 141 141 + 142 142 + return ( 143 143 + <> 144 144 + <ProfileSubpageHeader 145 145 + href={makeListLink(list.creator.handle || list.creator.did || '', rkey)} 146 146 + title={list.name} 147 147 + avatar={list.avatar} 148 148 + isOwner={list.creator.did === currentAccount?.did} 149 149 + creator={list.creator} 150 150 + purpose={list.purpose} 151 151 + avatarType="list"> 152 152 + {isCurateList ? ( 153 153 + <Button 154 154 + testID={isPinned ? 'unpinBtn' : 'pinBtn'} 155 155 + color={isPinned ? 'secondary' : 'primary_subtle'} 156 156 + label={isPinned ? _(msg`Unpin`) : _(msg`Pin to home`)} 157 157 + onPress={onTogglePinned} 158 158 + disabled={isPending} 159 159 + size="small" 160 160 + style={[a.rounded_full]}> 161 161 + {!isPinned && <ButtonIcon icon={isPending ? Loader : PinIcon} />} 162 162 + <ButtonText> 163 163 + {isPinned ? <Trans>Unpin</Trans> : <Trans>Pin to home</Trans>} 164 164 + </ButtonText> 165 165 + </Button> 166 166 + ) : isModList ? ( 167 167 + isBlocking ? ( 168 168 + <Button 169 169 + testID="unblockBtn" 170 170 + color="secondary" 171 171 + label={_(msg`Unblock`)} 172 172 + onPress={onUnsubscribeBlock} 173 173 + size="small" 174 174 + style={[a.rounded_full]} 175 175 + disabled={isBlockPending}> 176 176 + {isBlockPending && <ButtonIcon icon={Loader} />} 177 177 + <ButtonText> 178 178 + <Trans>Unblock</Trans> 179 179 + </ButtonText> 180 180 + </Button> 181 181 + ) : isMuting ? ( 182 182 + <Button 183 183 + testID="unmuteBtn" 184 184 + color="secondary" 185 185 + label={_(msg`Unmute`)} 186 186 + onPress={onUnsubscribeMute} 187 187 + size="small" 188 188 + style={[a.rounded_full]} 189 189 + disabled={isMutePending}> 190 190 + {isMutePending && <ButtonIcon icon={Loader} />} 191 191 + <ButtonText> 192 192 + <Trans>Unmute</Trans> 193 193 + </ButtonText> 194 194 + </Button> 195 195 + ) : ( 196 196 + <SubscribeMenu list={list} /> 197 197 + ) 198 198 + ) : null} 199 199 + <MoreOptionsMenu list={list} /> 200 200 + </ProfileSubpageHeader> 201 201 + {descriptionRT ? ( 202 202 + <View style={[a.px_lg, a.pt_sm, a.pb_sm, a.gap_md]}> 203 203 + <RichText value={descriptionRT} style={[a.text_md, a.leading_snug]} /> 204 204 + </View> 205 205 + ) : null} 206 206 + </> 207 207 + ) 208 208 + }

+298

src/screens/ProfileList/components/MoreOptionsMenu.tsx

··· 1 1 + import {type AppBskyActorDefs, AppBskyGraphDefs, AtUri} from '@atproto/api' 2 2 + import {msg, Trans} from '@lingui/macro' 3 3 + import {useLingui} from '@lingui/react' 4 4 + import {useNavigation} from '@react-navigation/native' 5 5 + 6 6 + import {type NavigationProp} from '#/lib/routes/types' 7 7 + import {shareUrl} from '#/lib/sharing' 8 8 + import {toShareUrl} from '#/lib/strings/url-helpers' 9 9 + import {logger} from '#/logger' 10 10 + import {isWeb} from '#/platform/detection' 11 11 + import {useModalControls} from '#/state/modals' 12 12 + import { 13 13 + useListBlockMutation, 14 14 + useListDeleteMutation, 15 15 + useListMuteMutation, 16 16 + } from '#/state/queries/list' 17 17 + import {useRemoveFeedMutation} from '#/state/queries/preferences' 18 18 + import {useSession} from '#/state/session' 19 19 + import {Button, ButtonIcon} from '#/components/Button' 20 20 + import {useDialogControl} from '#/components/Dialog' 21 21 + import {ArrowOutOfBoxModified_Stroke2_Corner2_Rounded as ShareIcon} from '#/components/icons/ArrowOutOfBox' 22 22 + import {ChainLink_Stroke2_Corner0_Rounded as ChainLink} from '#/components/icons/ChainLink' 23 23 + import {DotGrid_Stroke2_Corner0_Rounded as DotGridIcon} from '#/components/icons/DotGrid' 24 24 + import {PencilLine_Stroke2_Corner0_Rounded as PencilLineIcon} from '#/components/icons/Pencil' 25 25 + import {PersonCheck_Stroke2_Corner0_Rounded as PersonCheckIcon} from '#/components/icons/Person' 26 26 + import {Pin_Stroke2_Corner0_Rounded as PinIcon} from '#/components/icons/Pin' 27 27 + import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as UnmuteIcon} from '#/components/icons/Speaker' 28 28 + import {Trash_Stroke2_Corner0_Rounded as TrashIcon} from '#/components/icons/Trash' 29 29 + import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning' 30 30 + import * as Menu from '#/components/Menu' 31 31 + import { 32 32 + ReportDialog, 33 33 + useReportDialogControl, 34 34 + } from '#/components/moderation/ReportDialog' 35 35 + import * as Prompt from '#/components/Prompt' 36 36 + import * as Toast from '#/components/Toast' 37 37 + 38 38 + export function MoreOptionsMenu({ 39 39 + list, 40 40 + savedFeedConfig, 41 41 + }: { 42 42 + list: AppBskyGraphDefs.ListView 43 43 + savedFeedConfig?: AppBskyActorDefs.SavedFeed 44 44 + }) { 45 45 + const {_} = useLingui() 46 46 + const {currentAccount} = useSession() 47 47 + const {openModal} = useModalControls() 48 48 + const deleteListPromptControl = useDialogControl() 49 49 + const reportDialogControl = useReportDialogControl() 50 50 + const navigation = useNavigation<NavigationProp>() 51 51 + 52 52 + const {mutateAsync: removeSavedFeed} = useRemoveFeedMutation() 53 53 + const {mutateAsync: deleteList} = useListDeleteMutation() 54 54 + const {mutateAsync: muteList} = useListMuteMutation() 55 55 + const {mutateAsync: blockList} = useListBlockMutation() 56 56 + 57 57 + const isCurateList = list.purpose === AppBskyGraphDefs.CURATELIST 58 58 + const isModList = list.purpose === AppBskyGraphDefs.MODLIST 59 59 + const isBlocking = !!list.viewer?.blocked 60 60 + const isMuting = !!list.viewer?.muted 61 61 + const isPinned = Boolean(savedFeedConfig?.pinned) 62 62 + const isOwner = currentAccount?.did === list.creator.did 63 63 + 64 64 + const onPressShare = () => { 65 65 + const {rkey} = new AtUri(list.uri) 66 66 + const url = toShareUrl(`/profile/${list.creator.did}/lists/${rkey}`) 67 67 + shareUrl(url) 68 68 + } 69 69 + 70 70 + const onRemoveFromSavedFeeds = async () => { 71 71 + if (!savedFeedConfig) return 72 72 + try { 73 73 + await removeSavedFeed(savedFeedConfig) 74 74 + Toast.show(_(msg`Removed from your feeds`)) 75 75 + } catch (e) { 76 76 + Toast.show(_(msg`There was an issue contacting the server`), { 77 77 + type: 'error', 78 78 + }) 79 79 + logger.error('Failed to remove pinned list', {message: e}) 80 80 + } 81 81 + } 82 82 + 83 83 + const onPressEdit = () => { 84 84 + openModal({ 85 85 + name: 'create-or-edit-list', 86 86 + list, 87 87 + }) 88 88 + } 89 89 + 90 90 + const onPressDelete = async () => { 91 91 + await deleteList({uri: list.uri}) 92 92 + 93 93 + if (savedFeedConfig) { 94 94 + await removeSavedFeed(savedFeedConfig) 95 95 + } 96 96 + 97 97 + Toast.show(_(msg({message: 'List deleted', context: 'toast'}))) 98 98 + if (navigation.canGoBack()) { 99 99 + navigation.goBack() 100 100 + } else { 101 101 + navigation.navigate('Home') 102 102 + } 103 103 + } 104 104 + 105 105 + const onUnpinModList = async () => { 106 106 + try { 107 107 + if (!savedFeedConfig) return 108 108 + await removeSavedFeed(savedFeedConfig) 109 109 + Toast.show(_(msg`Unpinned list`)) 110 110 + } catch { 111 111 + Toast.show(_(msg`Failed to unpin list`), { 112 112 + type: 'error', 113 113 + }) 114 114 + } 115 115 + } 116 116 + 117 117 + const onUnsubscribeMute = async () => { 118 118 + try { 119 119 + await muteList({uri: list.uri, mute: false}) 120 120 + Toast.show(_(msg({message: 'List unmuted', context: 'toast'}))) 121 121 + logger.metric( 122 122 + 'moderation:unsubscribedFromList', 123 123 + {listType: 'mute'}, 124 124 + {statsig: true}, 125 125 + ) 126 126 + } catch { 127 127 + Toast.show( 128 128 + _( 129 129 + msg`There was an issue. Please check your internet connection and try again.`, 130 130 + ), 131 131 + ) 132 132 + } 133 133 + } 134 134 + 135 135 + const onUnsubscribeBlock = async () => { 136 136 + try { 137 137 + await blockList({uri: list.uri, block: false}) 138 138 + Toast.show(_(msg({message: 'List unblocked', context: 'toast'}))) 139 139 + logger.metric( 140 140 + 'moderation:unsubscribedFromList', 141 141 + {listType: 'block'}, 142 142 + {statsig: true}, 143 143 + ) 144 144 + } catch { 145 145 + Toast.show( 146 146 + _( 147 147 + msg`There was an issue. Please check your internet connection and try again.`, 148 148 + ), 149 149 + ) 150 150 + } 151 151 + } 152 152 + 153 153 + return ( 154 154 + <> 155 155 + <Menu.Root> 156 156 + <Menu.Trigger label={_(msg`More options`)}> 157 157 + {({props}) => ( 158 158 + <Button 159 159 + label={props.accessibilityLabel} 160 160 + testID="moreOptionsBtn" 161 161 + size="small" 162 162 + color="secondary" 163 163 + shape="round" 164 164 + {...props}> 165 165 + <ButtonIcon icon={DotGridIcon} /> 166 166 + </Button> 167 167 + )} 168 168 + </Menu.Trigger> 169 169 + <Menu.Outer> 170 170 + <Menu.Group> 171 171 + <Menu.Item 172 172 + label={isWeb ? _(msg`Copy link to list`) : _(msg`Share via...`)} 173 173 + onPress={onPressShare}> 174 174 + <Menu.ItemText> 175 175 + {isWeb ? ( 176 176 + <Trans>Copy link to list</Trans> 177 177 + ) : ( 178 178 + <Trans>Share via...</Trans> 179 179 + )} 180 180 + </Menu.ItemText> 181 181 + <Menu.ItemIcon 182 182 + position="right" 183 183 + icon={isWeb ? ChainLink : ShareIcon} 184 184 + /> 185 185 + </Menu.Item> 186 186 + {savedFeedConfig && ( 187 187 + <Menu.Item 188 188 + label={_(msg`Remove from my feeds`)} 189 189 + onPress={onRemoveFromSavedFeeds}> 190 190 + <Menu.ItemText> 191 191 + <Trans>Remove from my feeds</Trans> 192 192 + </Menu.ItemText> 193 193 + <Menu.ItemIcon position="right" icon={TrashIcon} /> 194 194 + </Menu.Item> 195 195 + )} 196 196 + </Menu.Group> 197 197 + 198 198 + <Menu.Divider /> 199 199 + 200 200 + {isOwner ? ( 201 201 + <Menu.Group> 202 202 + <Menu.Item 203 203 + label={_(msg`Edit list details`)} 204 204 + onPress={onPressEdit}> 205 205 + <Menu.ItemText> 206 206 + <Trans>Edit list details</Trans> 207 207 + </Menu.ItemText> 208 208 + <Menu.ItemIcon position="right" icon={PencilLineIcon} /> 209 209 + </Menu.Item> 210 210 + <Menu.Item 211 211 + label={_(msg`Delete list`)} 212 212 + onPress={deleteListPromptControl.open}> 213 213 + <Menu.ItemText> 214 214 + <Trans>Delete list</Trans> 215 215 + </Menu.ItemText> 216 216 + <Menu.ItemIcon position="right" icon={TrashIcon} /> 217 217 + </Menu.Item> 218 218 + </Menu.Group> 219 219 + ) : ( 220 220 + <Menu.Group> 221 221 + <Menu.Item 222 222 + label={_(msg`Report list`)} 223 223 + onPress={reportDialogControl.open}> 224 224 + <Menu.ItemText> 225 225 + <Trans>Report list</Trans> 226 226 + </Menu.ItemText> 227 227 + <Menu.ItemIcon position="right" icon={WarningIcon} /> 228 228 + </Menu.Item> 229 229 + </Menu.Group> 230 230 + )} 231 231 + 232 232 + {isModList && isPinned && ( 233 233 + <> 234 234 + <Menu.Divider /> 235 235 + <Menu.Group> 236 236 + <Menu.Item 237 237 + label={_(msg`Unpin moderation list`)} 238 238 + onPress={onUnpinModList}> 239 239 + <Menu.ItemText> 240 240 + <Trans>Unpin moderation list</Trans> 241 241 + </Menu.ItemText> 242 242 + <Menu.ItemIcon icon={PinIcon} /> 243 243 + </Menu.Item> 244 244 + </Menu.Group> 245 245 + </> 246 246 + )} 247 247 + 248 248 + {isCurateList && (isBlocking || isMuting) && ( 249 249 + <> 250 250 + <Menu.Divider /> 251 251 + <Menu.Group> 252 252 + {isBlocking && ( 253 253 + <Menu.Item 254 254 + label={_(msg`Unblock list`)} 255 255 + onPress={onUnsubscribeBlock}> 256 256 + <Menu.ItemText> 257 257 + <Trans>Unblock list</Trans> 258 258 + </Menu.ItemText> 259 259 + <Menu.ItemIcon icon={PersonCheckIcon} /> 260 260 + </Menu.Item> 261 261 + )} 262 262 + {isMuting && ( 263 263 + <Menu.Item 264 264 + label={_(msg`Unmute list`)} 265 265 + onPress={onUnsubscribeMute}> 266 266 + <Menu.ItemText> 267 267 + <Trans>Unmute list</Trans> 268 268 + </Menu.ItemText> 269 269 + <Menu.ItemIcon icon={UnmuteIcon} /> 270 270 + </Menu.Item> 271 271 + )} 272 272 + </Menu.Group> 273 273 + </> 274 274 + )} 275 275 + </Menu.Outer> 276 276 + </Menu.Root> 277 277 + 278 278 + <Prompt.Basic 279 279 + control={deleteListPromptControl} 280 280 + title={_(msg`Delete this list?`)} 281 281 + description={_( 282 282 + msg`If you delete this list, you won't be able to recover it.`, 283 283 + )} 284 284 + onConfirm={onPressDelete} 285 285 + confirmButtonCta={_(msg`Delete`)} 286 286 + confirmButtonColor="negative" 287 287 + /> 288 288 + 289 289 + <ReportDialog 290 290 + control={reportDialogControl} 291 291 + subject={{ 292 292 + ...list, 293 293 + $type: 'app.bsky.graph.defs#listView', 294 294 + }} 295 295 + /> 296 296 + </> 297 297 + ) 298 298 + }

+130

src/screens/ProfileList/components/SubscribeMenu.tsx

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

+296

src/screens/ProfileList/index.tsx

··· 1 1 + import {useCallback, useMemo, useRef} from 'react' 2 2 + import {View} from 'react-native' 3 3 + import {useAnimatedRef} from 'react-native-reanimated' 4 4 + import { 5 5 + AppBskyGraphDefs, 6 6 + AtUri, 7 7 + moderateUserList, 8 8 + type ModerationOpts, 9 9 + } from '@atproto/api' 10 10 + import {msg, Trans} from '@lingui/macro' 11 11 + import {useLingui} from '@lingui/react' 12 12 + import {useFocusEffect, useIsFocused} from '@react-navigation/native' 13 13 + import {useQueryClient} from '@tanstack/react-query' 14 14 + 15 15 + import {useOpenComposer} from '#/lib/hooks/useOpenComposer' 16 16 + import {useSetTitle} from '#/lib/hooks/useSetTitle' 17 17 + import {ComposeIcon2} from '#/lib/icons' 18 18 + import { 19 19 + type CommonNavigatorParams, 20 20 + type NativeStackScreenProps, 21 21 + } from '#/lib/routes/types' 22 22 + import {cleanError} from '#/lib/strings/errors' 23 23 + import {useModerationOpts} from '#/state/preferences/moderation-opts' 24 24 + import {useListQuery} from '#/state/queries/list' 25 25 + import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed' 26 26 + import { 27 27 + usePreferencesQuery, 28 28 + type UsePreferencesQueryResponse, 29 29 + } from '#/state/queries/preferences' 30 30 + import {useResolveUriQuery} from '#/state/queries/resolve-uri' 31 31 + import {truncateAndInvalidate} from '#/state/queries/util' 32 32 + import {useSession} from '#/state/session' 33 33 + import {useSetMinimalShellMode} from '#/state/shell' 34 34 + import {PagerWithHeader} from '#/view/com/pager/PagerWithHeader' 35 35 + import {FAB} from '#/view/com/util/fab/FAB' 36 36 + import {type ListRef} from '#/view/com/util/List' 37 37 + import {ListHiddenScreen} from '#/screens/List/ListHiddenScreen' 38 38 + import {atoms as a, platform} from '#/alf' 39 39 + import {useDialogControl} from '#/components/Dialog' 40 40 + import {ListAddRemoveUsersDialog} from '#/components/dialogs/lists/ListAddRemoveUsersDialog' 41 41 + import * as Layout from '#/components/Layout' 42 42 + import {Loader} from '#/components/Loader' 43 43 + import * as Hider from '#/components/moderation/Hider' 44 44 + import {AboutSection} from './AboutSection' 45 45 + import {ErrorScreen} from './components/ErrorScreen' 46 46 + import {Header} from './components/Header' 47 47 + import {FeedSection} from './FeedSection' 48 48 + 49 49 + interface SectionRef { 50 50 + scrollToTop: () => void 51 51 + } 52 52 + 53 53 + type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileList'> 54 54 + export function ProfileListScreen(props: Props) { 55 55 + return ( 56 56 + <Layout.Screen testID="profileListScreen"> 57 57 + <ProfileListScreenInner {...props} /> 58 58 + </Layout.Screen> 59 59 + ) 60 60 + } 61 61 + 62 62 + function ProfileListScreenInner(props: Props) { 63 63 + const {_} = useLingui() 64 64 + const {name: handleOrDid, rkey} = props.route.params 65 65 + const {data: resolvedUri, error: resolveError} = useResolveUriQuery( 66 66 + AtUri.make(handleOrDid, 'app.bsky.graph.list', rkey).toString(), 67 67 + ) 68 68 + const {data: preferences} = usePreferencesQuery() 69 69 + const {data: list, error: listError} = useListQuery(resolvedUri?.uri) 70 70 + const moderationOpts = useModerationOpts() 71 71 + 72 72 + if (resolveError) { 73 73 + return ( 74 74 + <> 75 75 + <Layout.Header.Outer> 76 76 + <Layout.Header.BackButton /> 77 77 + <Layout.Header.Content> 78 78 + <Layout.Header.TitleText> 79 79 + <Trans>Could not load list</Trans> 80 80 + </Layout.Header.TitleText> 81 81 + </Layout.Header.Content> 82 82 + <Layout.Header.Slot /> 83 83 + </Layout.Header.Outer> 84 84 + <Layout.Content centerContent> 85 85 + <ErrorScreen 86 86 + error={_( 87 87 + msg`We're sorry, but we were unable to resolve this list. If this persists, please contact the list creator, @${handleOrDid}.`, 88 88 + )} 89 89 + /> 90 90 + </Layout.Content> 91 91 + </> 92 92 + ) 93 93 + } 94 94 + if (listError) { 95 95 + return ( 96 96 + <> 97 97 + <Layout.Header.Outer> 98 98 + <Layout.Header.BackButton /> 99 99 + <Layout.Header.Content> 100 100 + <Layout.Header.TitleText> 101 101 + <Trans>Could not load list</Trans> 102 102 + </Layout.Header.TitleText> 103 103 + </Layout.Header.Content> 104 104 + <Layout.Header.Slot /> 105 105 + </Layout.Header.Outer> 106 106 + <Layout.Content centerContent> 107 107 + <ErrorScreen error={cleanError(listError)} /> 108 108 + </Layout.Content> 109 109 + </> 110 110 + ) 111 111 + } 112 112 + 113 113 + return resolvedUri && list && moderationOpts && preferences ? ( 114 114 + <ProfileListScreenLoaded 115 115 + {...props} 116 116 + uri={resolvedUri.uri} 117 117 + list={list} 118 118 + moderationOpts={moderationOpts} 119 119 + preferences={preferences} 120 120 + /> 121 121 + ) : ( 122 122 + <> 123 123 + <Layout.Header.Outer> 124 124 + <Layout.Header.BackButton /> 125 125 + <Layout.Header.Content /> 126 126 + <Layout.Header.Slot /> 127 127 + </Layout.Header.Outer> 128 128 + <Layout.Content 129 129 + centerContent 130 130 + contentContainerStyle={platform({ 131 131 + web: [a.mx_auto], 132 132 + native: [a.align_center], 133 133 + })}> 134 134 + <Loader size="2xl" /> 135 135 + </Layout.Content> 136 136 + </> 137 137 + ) 138 138 + } 139 139 + 140 140 + function ProfileListScreenLoaded({ 141 141 + route, 142 142 + uri, 143 143 + list, 144 144 + moderationOpts, 145 145 + preferences, 146 146 + }: Props & { 147 147 + uri: string 148 148 + list: AppBskyGraphDefs.ListView 149 149 + moderationOpts: ModerationOpts 150 150 + preferences: UsePreferencesQueryResponse 151 151 + }) { 152 152 + const {_} = useLingui() 153 153 + const queryClient = useQueryClient() 154 154 + const {openComposer} = useOpenComposer() 155 155 + const setMinimalShellMode = useSetMinimalShellMode() 156 156 + const {currentAccount} = useSession() 157 157 + const {rkey} = route.params 158 158 + const feedSectionRef = useRef<SectionRef>(null) 159 159 + const aboutSectionRef = useRef<SectionRef>(null) 160 160 + const isCurateList = list.purpose === AppBskyGraphDefs.CURATELIST 161 161 + const isScreenFocused = useIsFocused() 162 162 + const isHidden = list.labels?.findIndex(l => l.val === '!hide') !== -1 163 163 + const isOwner = currentAccount?.did === list.creator.did 164 164 + const scrollElRef = useAnimatedRef() 165 165 + const addUserDialogControl = useDialogControl() 166 166 + const sectionTitlesCurate = [_(msg`Posts`), _(msg`People`)] 167 167 + 168 168 + const moderation = useMemo(() => { 169 169 + return moderateUserList(list, moderationOpts) 170 170 + }, [list, moderationOpts]) 171 171 + 172 172 + useSetTitle(isHidden ? _(msg`List Hidden`) : list.name) 173 173 + 174 174 + useFocusEffect( 175 175 + useCallback(() => { 176 176 + setMinimalShellMode(false) 177 177 + }, [setMinimalShellMode]), 178 178 + ) 179 179 + 180 180 + const onChangeMembers = () => { 181 181 + if (isCurateList) { 182 182 + truncateAndInvalidate(queryClient, FEED_RQKEY(`list|${list.uri}`)) 183 183 + } 184 184 + } 185 185 + 186 186 + const onCurrentPageSelected = useCallback( 187 187 + (index: number) => { 188 188 + if (index === 0) { 189 189 + feedSectionRef.current?.scrollToTop() 190 190 + } else if (index === 1) { 191 191 + aboutSectionRef.current?.scrollToTop() 192 192 + } 193 193 + }, 194 194 + [feedSectionRef], 195 195 + ) 196 196 + 197 197 + const renderHeader = useCallback(() => { 198 198 + return <Header rkey={rkey} list={list} preferences={preferences} /> 199 199 + }, [rkey, list, preferences]) 200 200 + 201 201 + if (isCurateList) { 202 202 + return ( 203 203 + <Hider.Outer modui={moderation.ui('contentView')} allowOverride={isOwner}> 204 204 + <Hider.Mask> 205 205 + <ListHiddenScreen list={list} preferences={preferences} /> 206 206 + </Hider.Mask> 207 207 + <Hider.Content> 208 208 + <View style={[a.util_screen_outer]}> 209 209 + <PagerWithHeader 210 210 + items={sectionTitlesCurate} 211 211 + isHeaderReady={true} 212 212 + renderHeader={renderHeader} 213 213 + onCurrentPageSelected={onCurrentPageSelected}> 214 214 + {({headerHeight, scrollElRef, isFocused}) => ( 215 215 + <FeedSection 216 216 + ref={feedSectionRef} 217 217 + feed={`list|${uri}`} 218 218 + scrollElRef={scrollElRef as ListRef} 219 219 + headerHeight={headerHeight} 220 220 + isFocused={isScreenFocused && isFocused} 221 221 + isOwner={isOwner} 222 222 + onPressAddUser={addUserDialogControl.open} 223 223 + /> 224 224 + )} 225 225 + {({headerHeight, scrollElRef}) => ( 226 226 + <AboutSection 227 227 + ref={aboutSectionRef} 228 228 + scrollElRef={scrollElRef as ListRef} 229 229 + list={list} 230 230 + onPressAddUser={addUserDialogControl.open} 231 231 + headerHeight={headerHeight} 232 232 + /> 233 233 + )} 234 234 + </PagerWithHeader> 235 235 + <FAB 236 236 + testID="composeFAB" 237 237 + onPress={() => openComposer({})} 238 238 + icon={ 239 239 + <ComposeIcon2 240 240 + strokeWidth={1.5} 241 241 + size={29} 242 242 + style={{color: 'white'}} 243 243 + /> 244 244 + } 245 245 + accessibilityRole="button" 246 246 + accessibilityLabel={_(msg`New post`)} 247 247 + accessibilityHint="" 248 248 + /> 249 249 + </View> 250 250 + <ListAddRemoveUsersDialog 251 251 + control={addUserDialogControl} 252 252 + list={list} 253 253 + onChange={onChangeMembers} 254 254 + /> 255 255 + </Hider.Content> 256 256 + </Hider.Outer> 257 257 + ) 258 258 + } 259 259 + return ( 260 260 + <Hider.Outer modui={moderation.ui('contentView')} allowOverride={isOwner}> 261 261 + <Hider.Mask> 262 262 + <ListHiddenScreen list={list} preferences={preferences} /> 263 263 + </Hider.Mask> 264 264 + <Hider.Content> 265 265 + <View style={[a.util_screen_outer]}> 266 266 + <Layout.Center>{renderHeader()}</Layout.Center> 267 267 + <AboutSection 268 268 + list={list} 269 269 + scrollElRef={scrollElRef as ListRef} 270 270 + onPressAddUser={addUserDialogControl.open} 271 271 + headerHeight={0} 272 272 + /> 273 273 + <FAB 274 274 + testID="composeFAB" 275 275 + onPress={() => openComposer({})} 276 276 + icon={ 277 277 + <ComposeIcon2 278 278 + strokeWidth={1.5} 279 279 + size={29} 280 280 + style={{color: 'white'}} 281 281 + /> 282 282 + } 283 283 + accessibilityRole="button" 284 284 + accessibilityLabel={_(msg`New post`)} 285 285 + accessibilityHint="" 286 286 + /> 287 287 + </View> 288 288 + <ListAddRemoveUsersDialog 289 289 + control={addUserDialogControl} 290 290 + list={list} 291 291 + onChange={onChangeMembers} 292 292 + /> 293 293 + </Hider.Content> 294 294 + </Hider.Outer> 295 295 + ) 296 296 + }

-17

src/view/com/util/LoadingScreen.tsx

··· 1 1 - import {ActivityIndicator, View} from 'react-native' 2 2 - 3 3 - import {s} from '#/lib/styles' 4 4 - import * as Layout from '#/components/Layout' 5 5 - 6 6 - /** 7 7 - * @deprecated use Layout compoenents directly 8 8 - */ 9 9 - export function LoadingScreen() { 10 10 - return ( 11 11 - <Layout.Content> 12 12 - <View style={s.p20}> 13 13 - <ActivityIndicator size="large" /> 14 14 - </View> 15 15 - </Layout.Content> 16 16 - ) 17 17 - }

-1061

src/view/screens/ProfileList.tsx

··· 1 1 - import React, {useCallback, useMemo} from 'react' 2 2 - import {StyleSheet, View} from 'react-native' 3 3 - import {useAnimatedRef} from 'react-native-reanimated' 4 4 - import { 5 5 - AppBskyGraphDefs, 6 6 - AtUri, 7 7 - moderateUserList, 8 8 - type ModerationOpts, 9 9 - RichText as RichTextAPI, 10 10 - } from '@atproto/api' 11 11 - import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' 12 12 - import {msg, Trans} from '@lingui/macro' 13 13 - import {useLingui} from '@lingui/react' 14 14 - import {useFocusEffect, useIsFocused} from '@react-navigation/native' 15 15 - import {useNavigation} from '@react-navigation/native' 16 16 - import {useQueryClient} from '@tanstack/react-query' 17 17 - 18 18 - import {useHaptics} from '#/lib/haptics' 19 19 - import {useOpenComposer} from '#/lib/hooks/useOpenComposer' 20 20 - import {usePalette} from '#/lib/hooks/usePalette' 21 21 - import {useSetTitle} from '#/lib/hooks/useSetTitle' 22 22 - import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 23 23 - import {ComposeIcon2} from '#/lib/icons' 24 24 - import {makeListLink} from '#/lib/routes/links' 25 25 - import { 26 26 - type CommonNavigatorParams, 27 27 - type NativeStackScreenProps, 28 28 - } from '#/lib/routes/types' 29 29 - import {type NavigationProp} from '#/lib/routes/types' 30 30 - import {shareUrl} from '#/lib/sharing' 31 31 - import {cleanError} from '#/lib/strings/errors' 32 32 - import {toShareUrl} from '#/lib/strings/url-helpers' 33 33 - import {s} from '#/lib/styles' 34 34 - import {logger} from '#/logger' 35 35 - import {isNative, isWeb} from '#/platform/detection' 36 36 - import {listenSoftReset} from '#/state/events' 37 37 - import {useModalControls} from '#/state/modals' 38 38 - import {useModerationOpts} from '#/state/preferences/moderation-opts' 39 39 - import { 40 40 - useListBlockMutation, 41 41 - useListDeleteMutation, 42 42 - useListMuteMutation, 43 43 - useListQuery, 44 44 - } from '#/state/queries/list' 45 45 - import {type FeedDescriptor} from '#/state/queries/post-feed' 46 46 - import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed' 47 47 - import { 48 48 - useAddSavedFeedsMutation, 49 49 - usePreferencesQuery, 50 50 - type UsePreferencesQueryResponse, 51 51 - useRemoveFeedMutation, 52 52 - useUpdateSavedFeedsMutation, 53 53 - } from '#/state/queries/preferences' 54 54 - import {useResolveUriQuery} from '#/state/queries/resolve-uri' 55 55 - import {truncateAndInvalidate} from '#/state/queries/util' 56 56 - import {useSession} from '#/state/session' 57 57 - import {useSetMinimalShellMode} from '#/state/shell' 58 58 - import {ListMembers} from '#/view/com/lists/ListMembers' 59 59 - import {PagerWithHeader} from '#/view/com/pager/PagerWithHeader' 60 60 - import {PostFeed} from '#/view/com/posts/PostFeed' 61 61 - import {ProfileSubpageHeader} from '#/view/com/profile/ProfileSubpageHeader' 62 62 - import {EmptyState} from '#/view/com/util/EmptyState' 63 63 - import {FAB} from '#/view/com/util/fab/FAB' 64 64 - import {Button} from '#/view/com/util/forms/Button' 65 65 - import { 66 66 - type DropdownItem, 67 67 - NativeDropdown, 68 68 - } from '#/view/com/util/forms/NativeDropdown' 69 69 - import {type ListRef} from '#/view/com/util/List' 70 70 - import {LoadLatestBtn} from '#/view/com/util/load-latest/LoadLatestBtn' 71 71 - import {LoadingScreen} from '#/view/com/util/LoadingScreen' 72 72 - import {Text} from '#/view/com/util/text/Text' 73 73 - import * as Toast from '#/view/com/util/Toast' 74 74 - import {ListHiddenScreen} from '#/screens/List/ListHiddenScreen' 75 75 - import {atoms as a} from '#/alf' 76 76 - import {Button as NewButton, ButtonIcon, ButtonText} from '#/components/Button' 77 77 - import {useDialogControl} from '#/components/Dialog' 78 78 - import {ListAddRemoveUsersDialog} from '#/components/dialogs/lists/ListAddRemoveUsersDialog' 79 79 - import {PersonPlus_Stroke2_Corner0_Rounded as PersonPlusIcon} from '#/components/icons/Person' 80 80 - import * as Layout from '#/components/Layout' 81 81 - import * as Hider from '#/components/moderation/Hider' 82 82 - import { 83 83 - ReportDialog, 84 84 - useReportDialogControl, 85 85 - } from '#/components/moderation/ReportDialog' 86 86 - import * as Prompt from '#/components/Prompt' 87 87 - import {RichText} from '#/components/RichText' 88 88 - 89 89 - interface SectionRef { 90 90 - scrollToTop: () => void 91 91 - } 92 92 - 93 93 - type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileList'> 94 94 - export function ProfileListScreen(props: Props) { 95 95 - return ( 96 96 - <Layout.Screen testID="profileListScreen"> 97 97 - <ProfileListScreenInner {...props} /> 98 98 - </Layout.Screen> 99 99 - ) 100 100 - } 101 101 - 102 102 - function ProfileListScreenInner(props: Props) { 103 103 - const {_} = useLingui() 104 104 - const {name: handleOrDid, rkey} = props.route.params 105 105 - const {data: resolvedUri, error: resolveError} = useResolveUriQuery( 106 106 - AtUri.make(handleOrDid, 'app.bsky.graph.list', rkey).toString(), 107 107 - ) 108 108 - const {data: preferences} = usePreferencesQuery() 109 109 - const {data: list, error: listError} = useListQuery(resolvedUri?.uri) 110 110 - const moderationOpts = useModerationOpts() 111 111 - 112 112 - if (resolveError) { 113 113 - return ( 114 114 - <Layout.Content> 115 115 - <ErrorScreen 116 116 - error={_( 117 117 - msg`We're sorry, but we were unable to resolve this list. If this persists, please contact the list creator, @${handleOrDid}.`, 118 118 - )} 119 119 - /> 120 120 - </Layout.Content> 121 121 - ) 122 122 - } 123 123 - if (listError) { 124 124 - return ( 125 125 - <Layout.Content> 126 126 - <ErrorScreen error={cleanError(listError)} /> 127 127 - </Layout.Content> 128 128 - ) 129 129 - } 130 130 - 131 131 - return resolvedUri && list && moderationOpts && preferences ? ( 132 132 - <ProfileListScreenLoaded 133 133 - {...props} 134 134 - uri={resolvedUri.uri} 135 135 - list={list} 136 136 - moderationOpts={moderationOpts} 137 137 - preferences={preferences} 138 138 - /> 139 139 - ) : ( 140 140 - <LoadingScreen /> 141 141 - ) 142 142 - } 143 143 - 144 144 - function ProfileListScreenLoaded({ 145 145 - route, 146 146 - uri, 147 147 - list, 148 148 - moderationOpts, 149 149 - preferences, 150 150 - }: Props & { 151 151 - uri: string 152 152 - list: AppBskyGraphDefs.ListView 153 153 - moderationOpts: ModerationOpts 154 154 - preferences: UsePreferencesQueryResponse 155 155 - }) { 156 156 - const {_} = useLingui() 157 157 - const queryClient = useQueryClient() 158 158 - const {openComposer} = useOpenComposer() 159 159 - const setMinimalShellMode = useSetMinimalShellMode() 160 160 - const {currentAccount} = useSession() 161 161 - const {rkey} = route.params 162 162 - const feedSectionRef = React.useRef<SectionRef>(null) 163 163 - const aboutSectionRef = React.useRef<SectionRef>(null) 164 164 - const isCurateList = list.purpose === AppBskyGraphDefs.CURATELIST 165 165 - const isScreenFocused = useIsFocused() 166 166 - const isHidden = list.labels?.findIndex(l => l.val === '!hide') !== -1 167 167 - const isOwner = currentAccount?.did === list.creator.did 168 168 - const scrollElRef = useAnimatedRef() 169 169 - const addUserDialogControl = useDialogControl() 170 170 - const sectionTitlesCurate = [_(msg`Posts`), _(msg`People`)] 171 171 - 172 172 - const moderation = React.useMemo(() => { 173 173 - return moderateUserList(list, moderationOpts) 174 174 - }, [list, moderationOpts]) 175 175 - 176 176 - useSetTitle(isHidden ? _(msg`List Hidden`) : list.name) 177 177 - 178 178 - useFocusEffect( 179 179 - useCallback(() => { 180 180 - setMinimalShellMode(false) 181 181 - }, [setMinimalShellMode]), 182 182 - ) 183 183 - 184 184 - const onChangeMembers = useCallback(() => { 185 185 - if (isCurateList) { 186 186 - truncateAndInvalidate(queryClient, FEED_RQKEY(`list|${list.uri}`)) 187 187 - } 188 188 - }, [list.uri, isCurateList, queryClient]) 189 189 - 190 190 - const onCurrentPageSelected = React.useCallback( 191 191 - (index: number) => { 192 192 - if (index === 0) { 193 193 - feedSectionRef.current?.scrollToTop() 194 194 - } else if (index === 1) { 195 195 - aboutSectionRef.current?.scrollToTop() 196 196 - } 197 197 - }, 198 198 - [feedSectionRef], 199 199 - ) 200 200 - 201 201 - const renderHeader = useCallback(() => { 202 202 - return <Header rkey={rkey} list={list} preferences={preferences} /> 203 203 - }, [rkey, list, preferences]) 204 204 - 205 205 - if (isCurateList) { 206 206 - return ( 207 207 - <Hider.Outer modui={moderation.ui('contentView')} allowOverride={isOwner}> 208 208 - <Hider.Mask> 209 209 - <ListHiddenScreen list={list} preferences={preferences} /> 210 210 - </Hider.Mask> 211 211 - <Hider.Content> 212 212 - <View style={s.hContentRegion}> 213 213 - <PagerWithHeader 214 214 - items={sectionTitlesCurate} 215 215 - isHeaderReady={true} 216 216 - renderHeader={renderHeader} 217 217 - onCurrentPageSelected={onCurrentPageSelected}> 218 218 - {({headerHeight, scrollElRef, isFocused}) => ( 219 219 - <FeedSection 220 220 - ref={feedSectionRef} 221 221 - feed={`list|${uri}`} 222 222 - scrollElRef={scrollElRef as ListRef} 223 223 - headerHeight={headerHeight} 224 224 - isFocused={isScreenFocused && isFocused} 225 225 - isOwner={isOwner} 226 226 - onPressAddUser={addUserDialogControl.open} 227 227 - /> 228 228 - )} 229 229 - {({headerHeight, scrollElRef}) => ( 230 230 - <AboutSection 231 231 - ref={aboutSectionRef} 232 232 - scrollElRef={scrollElRef as ListRef} 233 233 - list={list} 234 234 - onPressAddUser={addUserDialogControl.open} 235 235 - headerHeight={headerHeight} 236 236 - /> 237 237 - )} 238 238 - </PagerWithHeader> 239 239 - <FAB 240 240 - testID="composeFAB" 241 241 - onPress={() => openComposer({})} 242 242 - icon={ 243 243 - <ComposeIcon2 244 244 - strokeWidth={1.5} 245 245 - size={29} 246 246 - style={{color: 'white'}} 247 247 - /> 248 248 - } 249 249 - accessibilityRole="button" 250 250 - accessibilityLabel={_(msg`New post`)} 251 251 - accessibilityHint="" 252 252 - /> 253 253 - </View> 254 254 - <ListAddRemoveUsersDialog 255 255 - control={addUserDialogControl} 256 256 - list={list} 257 257 - onChange={onChangeMembers} 258 258 - /> 259 259 - </Hider.Content> 260 260 - </Hider.Outer> 261 261 - ) 262 262 - } 263 263 - return ( 264 264 - <Hider.Outer modui={moderation.ui('contentView')} allowOverride={isOwner}> 265 265 - <Hider.Mask> 266 266 - <ListHiddenScreen list={list} preferences={preferences} /> 267 267 - </Hider.Mask> 268 268 - <Hider.Content> 269 269 - <View style={s.hContentRegion}> 270 270 - <Layout.Center>{renderHeader()}</Layout.Center> 271 271 - <AboutSection 272 272 - list={list} 273 273 - scrollElRef={scrollElRef as ListRef} 274 274 - onPressAddUser={addUserDialogControl.open} 275 275 - headerHeight={0} 276 276 - /> 277 277 - <FAB 278 278 - testID="composeFAB" 279 279 - onPress={() => openComposer({})} 280 280 - icon={ 281 281 - <ComposeIcon2 282 282 - strokeWidth={1.5} 283 283 - size={29} 284 284 - style={{color: 'white'}} 285 285 - /> 286 286 - } 287 287 - accessibilityRole="button" 288 288 - accessibilityLabel={_(msg`New post`)} 289 289 - accessibilityHint="" 290 290 - /> 291 291 - </View> 292 292 - <ListAddRemoveUsersDialog 293 293 - control={addUserDialogControl} 294 294 - list={list} 295 295 - onChange={onChangeMembers} 296 296 - /> 297 297 - </Hider.Content> 298 298 - </Hider.Outer> 299 299 - ) 300 300 - } 301 301 - 302 302 - function Header({ 303 303 - rkey, 304 304 - list, 305 305 - preferences, 306 306 - }: { 307 307 - rkey: string 308 308 - list: AppBskyGraphDefs.ListView 309 309 - preferences: UsePreferencesQueryResponse 310 310 - }) { 311 311 - const pal = usePalette('default') 312 312 - const palInverted = usePalette('inverted') 313 313 - const {_} = useLingui() 314 314 - const navigation = useNavigation<NavigationProp>() 315 315 - const {currentAccount} = useSession() 316 316 - const reportDialogControl = useReportDialogControl() 317 317 - const {openModal} = useModalControls() 318 318 - const listMuteMutation = useListMuteMutation() 319 319 - const listBlockMutation = useListBlockMutation() 320 320 - const listDeleteMutation = useListDeleteMutation() 321 321 - const isCurateList = list.purpose === 'app.bsky.graph.defs#curatelist' 322 322 - const isModList = list.purpose === 'app.bsky.graph.defs#modlist' 323 323 - const isBlocking = !!list.viewer?.blocked 324 324 - const isMuting = !!list.viewer?.muted 325 325 - const isOwner = list.creator.did === currentAccount?.did 326 326 - const playHaptic = useHaptics() 327 327 - 328 328 - const {mutateAsync: addSavedFeeds, isPending: isAddSavedFeedPending} = 329 329 - useAddSavedFeedsMutation() 330 330 - const {mutateAsync: removeSavedFeed, isPending: isRemovePending} = 331 331 - useRemoveFeedMutation() 332 332 - const {mutateAsync: updateSavedFeeds, isPending: isUpdatingSavedFeeds} = 333 333 - useUpdateSavedFeedsMutation() 334 334 - 335 335 - const isPending = 336 336 - isAddSavedFeedPending || isRemovePending || isUpdatingSavedFeeds 337 337 - 338 338 - const deleteListPromptControl = useDialogControl() 339 339 - const subscribeMutePromptControl = useDialogControl() 340 340 - const subscribeBlockPromptControl = useDialogControl() 341 341 - 342 342 - const savedFeedConfig = preferences?.savedFeeds?.find( 343 343 - f => f.value === list.uri, 344 344 - ) 345 345 - const isPinned = Boolean(savedFeedConfig?.pinned) 346 346 - 347 347 - const onTogglePinned = React.useCallback(async () => { 348 348 - playHaptic() 349 349 - 350 350 - try { 351 351 - if (savedFeedConfig) { 352 352 - const pinned = !savedFeedConfig.pinned 353 353 - await updateSavedFeeds([ 354 354 - { 355 355 - ...savedFeedConfig, 356 356 - pinned, 357 357 - }, 358 358 - ]) 359 359 - Toast.show( 360 360 - pinned 361 361 - ? _(msg`Pinned to your feeds`) 362 362 - : _(msg`Unpinned from your feeds`), 363 363 - ) 364 364 - } else { 365 365 - await addSavedFeeds([ 366 366 - { 367 367 - type: 'list', 368 368 - value: list.uri, 369 369 - pinned: true, 370 370 - }, 371 371 - ]) 372 372 - Toast.show(_(msg`Saved to your feeds`)) 373 373 - } 374 374 - } catch (e) { 375 375 - Toast.show(_(msg`There was an issue contacting the server`), 'xmark') 376 376 - logger.error('Failed to toggle pinned feed', {message: e}) 377 377 - } 378 378 - }, [ 379 379 - playHaptic, 380 380 - addSavedFeeds, 381 381 - updateSavedFeeds, 382 382 - list.uri, 383 383 - _, 384 384 - savedFeedConfig, 385 385 - ]) 386 386 - 387 387 - const onRemoveFromSavedFeeds = React.useCallback(async () => { 388 388 - playHaptic() 389 389 - if (!savedFeedConfig) return 390 390 - try { 391 391 - await removeSavedFeed(savedFeedConfig) 392 392 - Toast.show(_(msg`Removed from your feeds`)) 393 393 - } catch (e) { 394 394 - Toast.show(_(msg`There was an issue contacting the server`), 'xmark') 395 395 - logger.error('Failed to remove pinned list', {message: e}) 396 396 - } 397 397 - }, [playHaptic, removeSavedFeed, _, savedFeedConfig]) 398 398 - 399 399 - const onSubscribeMute = useCallback(async () => { 400 400 - try { 401 401 - await listMuteMutation.mutateAsync({uri: list.uri, mute: true}) 402 402 - Toast.show(_(msg({message: 'List muted', context: 'toast'}))) 403 403 - logger.metric( 404 404 - 'moderation:subscribedToList', 405 405 - {listType: 'mute'}, 406 406 - {statsig: true}, 407 407 - ) 408 408 - } catch { 409 409 - Toast.show( 410 410 - _( 411 411 - msg`There was an issue. Please check your internet connection and try again.`, 412 412 - ), 413 413 - ) 414 414 - } 415 415 - }, [list, listMuteMutation, _]) 416 416 - 417 417 - const onUnsubscribeMute = useCallback(async () => { 418 418 - try { 419 419 - await listMuteMutation.mutateAsync({uri: list.uri, mute: false}) 420 420 - Toast.show(_(msg({message: 'List unmuted', context: 'toast'}))) 421 421 - logger.metric( 422 422 - 'moderation:unsubscribedFromList', 423 423 - {listType: 'mute'}, 424 424 - {statsig: true}, 425 425 - ) 426 426 - } catch { 427 427 - Toast.show( 428 428 - _( 429 429 - msg`There was an issue. Please check your internet connection and try again.`, 430 430 - ), 431 431 - ) 432 432 - } 433 433 - }, [list, listMuteMutation, _]) 434 434 - 435 435 - const onSubscribeBlock = useCallback(async () => { 436 436 - try { 437 437 - await listBlockMutation.mutateAsync({uri: list.uri, block: true}) 438 438 - Toast.show(_(msg({message: 'List blocked', context: 'toast'}))) 439 439 - logger.metric( 440 440 - 'moderation:subscribedToList', 441 441 - {listType: 'block'}, 442 442 - {statsig: true}, 443 443 - ) 444 444 - } catch { 445 445 - Toast.show( 446 446 - _( 447 447 - msg`There was an issue. Please check your internet connection and try again.`, 448 448 - ), 449 449 - ) 450 450 - } 451 451 - }, [list, listBlockMutation, _]) 452 452 - 453 453 - const onUnsubscribeBlock = useCallback(async () => { 454 454 - try { 455 455 - await listBlockMutation.mutateAsync({uri: list.uri, block: false}) 456 456 - Toast.show(_(msg({message: 'List unblocked', context: 'toast'}))) 457 457 - logger.metric( 458 458 - 'moderation:unsubscribedFromList', 459 459 - {listType: 'block'}, 460 460 - {statsig: true}, 461 461 - ) 462 462 - } catch { 463 463 - Toast.show( 464 464 - _( 465 465 - msg`There was an issue. Please check your internet connection and try again.`, 466 466 - ), 467 467 - ) 468 468 - } 469 469 - }, [list, listBlockMutation, _]) 470 470 - 471 471 - const onPressEdit = useCallback(() => { 472 472 - openModal({ 473 473 - name: 'create-or-edit-list', 474 474 - list, 475 475 - }) 476 476 - }, [openModal, list]) 477 477 - 478 478 - const onPressDelete = useCallback(async () => { 479 479 - await listDeleteMutation.mutateAsync({uri: list.uri}) 480 480 - 481 481 - if (savedFeedConfig) { 482 482 - await removeSavedFeed(savedFeedConfig) 483 483 - } 484 484 - 485 485 - Toast.show(_(msg({message: 'List deleted', context: 'toast'}))) 486 486 - if (navigation.canGoBack()) { 487 487 - navigation.goBack() 488 488 - } else { 489 489 - navigation.navigate('Home') 490 490 - } 491 491 - }, [ 492 492 - list, 493 493 - listDeleteMutation, 494 494 - navigation, 495 495 - _, 496 496 - removeSavedFeed, 497 497 - savedFeedConfig, 498 498 - ]) 499 499 - 500 500 - const onPressReport = useCallback(() => { 501 501 - reportDialogControl.open() 502 502 - }, [reportDialogControl]) 503 503 - 504 504 - const onPressShare = useCallback(() => { 505 505 - const url = toShareUrl(`/profile/${list.creator.did}/lists/${rkey}`) 506 506 - shareUrl(url) 507 507 - }, [list, rkey]) 508 508 - 509 509 - const dropdownItems: DropdownItem[] = useMemo(() => { 510 510 - let items: DropdownItem[] = [ 511 511 - { 512 512 - testID: 'listHeaderDropdownShareBtn', 513 513 - label: isWeb ? _(msg`Copy link to list`) : _(msg`Share`), 514 514 - onPress: onPressShare, 515 515 - icon: { 516 516 - ios: { 517 517 - name: 'square.and.arrow.up', 518 518 - }, 519 519 - android: '', 520 520 - web: 'share', 521 521 - }, 522 522 - }, 523 523 - ] 524 524 - 525 525 - if (savedFeedConfig) { 526 526 - items.push({ 527 527 - testID: 'listHeaderDropdownRemoveFromFeedsBtn', 528 528 - label: _(msg`Remove from my feeds`), 529 529 - onPress: onRemoveFromSavedFeeds, 530 530 - icon: { 531 531 - ios: { 532 532 - name: 'trash', 533 533 - }, 534 534 - android: '', 535 535 - web: ['far', 'trash-can'], 536 536 - }, 537 537 - }) 538 538 - } 539 539 - 540 540 - if (isOwner) { 541 541 - items.push({label: 'separator'}) 542 542 - items.push({ 543 543 - testID: 'listHeaderDropdownEditBtn', 544 544 - label: _(msg`Edit list details`), 545 545 - onPress: onPressEdit, 546 546 - icon: { 547 547 - ios: { 548 548 - name: 'pencil', 549 549 - }, 550 550 - android: '', 551 551 - web: 'pen', 552 552 - }, 553 553 - }) 554 554 - items.push({ 555 555 - testID: 'listHeaderDropdownDeleteBtn', 556 556 - label: _(msg`Delete list`), 557 557 - onPress: deleteListPromptControl.open, 558 558 - icon: { 559 559 - ios: { 560 560 - name: 'trash', 561 561 - }, 562 562 - android: '', 563 563 - web: ['far', 'trash-can'], 564 564 - }, 565 565 - }) 566 566 - } else { 567 567 - items.push({label: 'separator'}) 568 568 - items.push({ 569 569 - testID: 'listHeaderDropdownReportBtn', 570 570 - label: _(msg`Report list`), 571 571 - onPress: onPressReport, 572 572 - icon: { 573 573 - ios: { 574 574 - name: 'exclamationmark.triangle', 575 575 - }, 576 576 - android: '', 577 577 - web: 'circle-exclamation', 578 578 - }, 579 579 - }) 580 580 - } 581 581 - if (isModList && isPinned) { 582 582 - items.push({label: 'separator'}) 583 583 - items.push({ 584 584 - testID: 'listHeaderDropdownUnpinBtn', 585 585 - label: _(msg`Unpin moderation list`), 586 586 - onPress: 587 587 - isPending || !savedFeedConfig 588 588 - ? undefined 589 589 - : () => removeSavedFeed(savedFeedConfig), 590 590 - icon: { 591 591 - ios: { 592 592 - name: 'pin', 593 593 - }, 594 594 - android: '', 595 595 - web: 'thumbtack', 596 596 - }, 597 597 - }) 598 598 - } 599 599 - if (isCurateList && (isBlocking || isMuting)) { 600 600 - items.push({label: 'separator'}) 601 601 - 602 602 - if (isMuting) { 603 603 - items.push({ 604 604 - testID: 'listHeaderDropdownMuteBtn', 605 605 - label: _(msg`Unmute list`), 606 606 - onPress: onUnsubscribeMute, 607 607 - icon: { 608 608 - ios: { 609 609 - name: 'eye', 610 610 - }, 611 611 - android: '', 612 612 - web: 'eye', 613 613 - }, 614 614 - }) 615 615 - } 616 616 - 617 617 - if (isBlocking) { 618 618 - items.push({ 619 619 - testID: 'listHeaderDropdownBlockBtn', 620 620 - label: _(msg`Unblock list`), 621 621 - onPress: onUnsubscribeBlock, 622 622 - icon: { 623 623 - ios: { 624 624 - name: 'person.fill.xmark', 625 625 - }, 626 626 - android: '', 627 627 - web: 'user-slash', 628 628 - }, 629 629 - }) 630 630 - } 631 631 - } 632 632 - return items 633 633 - }, [ 634 634 - _, 635 635 - onPressShare, 636 636 - isOwner, 637 637 - isModList, 638 638 - isPinned, 639 639 - isCurateList, 640 640 - onPressEdit, 641 641 - deleteListPromptControl.open, 642 642 - onPressReport, 643 643 - isPending, 644 644 - isBlocking, 645 645 - isMuting, 646 646 - onUnsubscribeMute, 647 647 - onUnsubscribeBlock, 648 648 - removeSavedFeed, 649 649 - savedFeedConfig, 650 650 - onRemoveFromSavedFeeds, 651 651 - ]) 652 652 - 653 653 - const subscribeDropdownItems: DropdownItem[] = useMemo(() => { 654 654 - return [ 655 655 - { 656 656 - testID: 'subscribeDropdownMuteBtn', 657 657 - label: _(msg`Mute accounts`), 658 658 - onPress: subscribeMutePromptControl.open, 659 659 - icon: { 660 660 - ios: { 661 661 - name: 'speaker.slash', 662 662 - }, 663 663 - android: '', 664 664 - web: 'user-slash', 665 665 - }, 666 666 - }, 667 667 - { 668 668 - testID: 'subscribeDropdownBlockBtn', 669 669 - label: _(msg`Block accounts`), 670 670 - onPress: subscribeBlockPromptControl.open, 671 671 - icon: { 672 672 - ios: { 673 673 - name: 'person.fill.xmark', 674 674 - }, 675 675 - android: '', 676 676 - web: 'ban', 677 677 - }, 678 678 - }, 679 679 - ] 680 680 - }, [_, subscribeMutePromptControl.open, subscribeBlockPromptControl.open]) 681 681 - 682 682 - const descriptionRT = useMemo( 683 683 - () => 684 684 - list.description 685 685 - ? new RichTextAPI({ 686 686 - text: list.description, 687 687 - facets: list.descriptionFacets, 688 688 - }) 689 689 - : undefined, 690 690 - [list], 691 691 - ) 692 692 - 693 693 - return ( 694 694 - <> 695 695 - <ProfileSubpageHeader 696 696 - href={makeListLink(list.creator.handle || list.creator.did || '', rkey)} 697 697 - title={list.name} 698 698 - avatar={list.avatar} 699 699 - isOwner={list.creator.did === currentAccount?.did} 700 700 - creator={list.creator} 701 701 - purpose={list.purpose} 702 702 - avatarType="list"> 703 703 - <ReportDialog 704 704 - control={reportDialogControl} 705 705 - subject={{ 706 706 - ...list, 707 707 - $type: 'app.bsky.graph.defs#listView', 708 708 - }} 709 709 - /> 710 710 - {isCurateList ? ( 711 711 - <Button 712 712 - testID={isPinned ? 'unpinBtn' : 'pinBtn'} 713 713 - type={isPinned ? 'default' : 'inverted'} 714 714 - label={isPinned ? _(msg`Unpin`) : _(msg`Pin to home`)} 715 715 - onPress={onTogglePinned} 716 716 - disabled={isPending} 717 717 - /> 718 718 - ) : isModList ? ( 719 719 - isBlocking ? ( 720 720 - <Button 721 721 - testID="unblockBtn" 722 722 - type="default" 723 723 - label={_(msg`Unblock`)} 724 724 - onPress={onUnsubscribeBlock} 725 725 - /> 726 726 - ) : isMuting ? ( 727 727 - <Button 728 728 - testID="unmuteBtn" 729 729 - type="default" 730 730 - label={_(msg`Unmute`)} 731 731 - onPress={onUnsubscribeMute} 732 732 - /> 733 733 - ) : ( 734 734 - <NativeDropdown 735 735 - testID="subscribeBtn" 736 736 - items={subscribeDropdownItems} 737 737 - accessibilityLabel={_(msg`Subscribe to this list`)} 738 738 - accessibilityHint=""> 739 739 - <View style={[palInverted.view, styles.btn]}> 740 740 - <Text style={palInverted.text}> 741 741 - <Trans>Subscribe</Trans> 742 742 - </Text> 743 743 - </View> 744 744 - </NativeDropdown> 745 745 - ) 746 746 - ) : null} 747 747 - <NativeDropdown 748 748 - testID="headerDropdownBtn" 749 749 - items={dropdownItems} 750 750 - accessibilityLabel={_(msg`More options`)} 751 751 - accessibilityHint=""> 752 752 - <View style={[pal.viewLight, styles.btn]}> 753 753 - <FontAwesomeIcon 754 754 - icon="ellipsis" 755 755 - size={20} 756 756 - color={pal.colors.text} 757 757 - /> 758 758 - </View> 759 759 - </NativeDropdown> 760 760 - 761 761 - <Prompt.Basic 762 762 - control={deleteListPromptControl} 763 763 - title={_(msg`Delete this list?`)} 764 764 - description={_( 765 765 - msg`If you delete this list, you won't be able to recover it.`, 766 766 - )} 767 767 - onConfirm={onPressDelete} 768 768 - confirmButtonCta={_(msg`Delete`)} 769 769 - confirmButtonColor="negative" 770 770 - /> 771 771 - 772 772 - <Prompt.Basic 773 773 - control={subscribeMutePromptControl} 774 774 - title={_(msg`Mute these accounts?`)} 775 775 - description={_( 776 776 - msg`Muting is private. Muted accounts can interact with you, but you will not see their posts or receive notifications from them.`, 777 777 - )} 778 778 - onConfirm={onSubscribeMute} 779 779 - confirmButtonCta={_(msg`Mute list`)} 780 780 - /> 781 781 - 782 782 - <Prompt.Basic 783 783 - control={subscribeBlockPromptControl} 784 784 - title={_(msg`Block these accounts?`)} 785 785 - description={_( 786 786 - msg`Blocking is public. Blocked accounts cannot reply in your threads, mention you, or otherwise interact with you.`, 787 787 - )} 788 788 - onConfirm={onSubscribeBlock} 789 789 - confirmButtonCta={_(msg`Block list`)} 790 790 - confirmButtonColor="negative" 791 791 - /> 792 792 - </ProfileSubpageHeader> 793 793 - {descriptionRT ? ( 794 794 - <View style={[a.px_lg, a.pt_sm, a.pb_sm, a.gap_md]}> 795 795 - <RichText value={descriptionRT} style={[a.text_md, a.leading_snug]} /> 796 796 - </View> 797 797 - ) : null} 798 798 - </> 799 799 - ) 800 800 - } 801 801 - 802 802 - interface FeedSectionProps { 803 803 - feed: FeedDescriptor 804 804 - headerHeight: number 805 805 - scrollElRef: ListRef 806 806 - isFocused: boolean 807 807 - isOwner: boolean 808 808 - onPressAddUser: () => void 809 809 - } 810 810 - const FeedSection = React.forwardRef<SectionRef, FeedSectionProps>( 811 811 - function FeedSectionImpl( 812 812 - {feed, scrollElRef, headerHeight, isFocused, isOwner, onPressAddUser}, 813 813 - ref, 814 814 - ) { 815 815 - const queryClient = useQueryClient() 816 816 - const [hasNew, setHasNew] = React.useState(false) 817 817 - const [isScrolledDown, setIsScrolledDown] = React.useState(false) 818 818 - const isScreenFocused = useIsFocused() 819 819 - const {_} = useLingui() 820 820 - 821 821 - const onScrollToTop = useCallback(() => { 822 822 - scrollElRef.current?.scrollToOffset({ 823 823 - animated: isNative, 824 824 - offset: -headerHeight, 825 825 - }) 826 826 - queryClient.resetQueries({queryKey: FEED_RQKEY(feed)}) 827 827 - setHasNew(false) 828 828 - }, [scrollElRef, headerHeight, queryClient, feed, setHasNew]) 829 829 - React.useImperativeHandle(ref, () => ({ 830 830 - scrollToTop: onScrollToTop, 831 831 - })) 832 832 - 833 833 - React.useEffect(() => { 834 834 - if (!isScreenFocused) { 835 835 - return 836 836 - } 837 837 - return listenSoftReset(onScrollToTop) 838 838 - }, [onScrollToTop, isScreenFocused]) 839 839 - 840 840 - const renderPostsEmpty = useCallback(() => { 841 841 - return ( 842 842 - <View style={[a.gap_xl, a.align_center]}> 843 843 - <EmptyState icon="hashtag" message={_(msg`This feed is empty.`)} /> 844 844 - {isOwner && ( 845 845 - <NewButton 846 846 - label={_(msg`Start adding people`)} 847 847 - onPress={onPressAddUser} 848 848 - color="primary" 849 849 - size="small" 850 850 - variant="solid"> 851 851 - <ButtonIcon icon={PersonPlusIcon} /> 852 852 - <ButtonText> 853 853 - <Trans>Start adding people!</Trans> 854 854 - </ButtonText> 855 855 - </NewButton> 856 856 - )} 857 857 - </View> 858 858 - ) 859 859 - }, [_, onPressAddUser, isOwner]) 860 860 - 861 861 - return ( 862 862 - <View> 863 863 - <PostFeed 864 864 - testID="listFeed" 865 865 - enabled={isFocused} 866 866 - feed={feed} 867 867 - pollInterval={60e3} 868 868 - disablePoll={hasNew} 869 869 - scrollElRef={scrollElRef} 870 870 - onHasNew={setHasNew} 871 871 - onScrolledDownChange={setIsScrolledDown} 872 872 - renderEmptyState={renderPostsEmpty} 873 873 - headerOffset={headerHeight} 874 874 - /> 875 875 - {(isScrolledDown || hasNew) && ( 876 876 - <LoadLatestBtn 877 877 - onPress={onScrollToTop} 878 878 - label={_(msg`Load new posts`)} 879 879 - showIndicator={hasNew} 880 880 - /> 881 881 - )} 882 882 - </View> 883 883 - ) 884 884 - }, 885 885 - ) 886 886 - 887 887 - interface AboutSectionProps { 888 888 - list: AppBskyGraphDefs.ListView 889 889 - onPressAddUser: () => void 890 890 - headerHeight: number 891 891 - scrollElRef: ListRef 892 892 - } 893 893 - const AboutSection = React.forwardRef<SectionRef, AboutSectionProps>( 894 894 - function AboutSectionImpl( 895 895 - {list, onPressAddUser, headerHeight, scrollElRef}, 896 896 - ref, 897 897 - ) { 898 898 - const {_} = useLingui() 899 899 - const {currentAccount} = useSession() 900 900 - const {isMobile} = useWebMediaQueries() 901 901 - const [isScrolledDown, setIsScrolledDown] = React.useState(false) 902 902 - const isOwner = list.creator.did === currentAccount?.did 903 903 - 904 904 - const onScrollToTop = useCallback(() => { 905 905 - scrollElRef.current?.scrollToOffset({ 906 906 - animated: isNative, 907 907 - offset: -headerHeight, 908 908 - }) 909 909 - }, [scrollElRef, headerHeight]) 910 910 - 911 911 - React.useImperativeHandle(ref, () => ({ 912 912 - scrollToTop: onScrollToTop, 913 913 - })) 914 914 - 915 915 - const renderHeader = React.useCallback(() => { 916 916 - if (!isOwner) { 917 917 - return <View /> 918 918 - } 919 919 - if (isMobile) { 920 920 - return ( 921 921 - <View style={[a.px_sm, a.py_sm]}> 922 922 - <NewButton 923 923 - testID="addUserBtn" 924 924 - label={_(msg`Add a user to this list`)} 925 925 - onPress={onPressAddUser} 926 926 - color="primary" 927 927 - size="small" 928 928 - variant="outline" 929 929 - style={[a.py_md]}> 930 930 - <ButtonIcon icon={PersonPlusIcon} /> 931 931 - <ButtonText> 932 932 - <Trans>Add people</Trans> 933 933 - </ButtonText> 934 934 - </NewButton> 935 935 - </View> 936 936 - ) 937 937 - } 938 938 - return ( 939 939 - <View style={[a.px_lg, a.py_md, a.flex_row_reverse]}> 940 940 - <NewButton 941 941 - testID="addUserBtn" 942 942 - label={_(msg`Add a user to this list`)} 943 943 - onPress={onPressAddUser} 944 944 - color="primary" 945 945 - size="small" 946 946 - variant="ghost" 947 947 - style={[a.py_sm]}> 948 948 - <ButtonIcon icon={PersonPlusIcon} /> 949 949 - <ButtonText> 950 950 - <Trans>Add people</Trans> 951 951 - </ButtonText> 952 952 - </NewButton> 953 953 - </View> 954 954 - ) 955 955 - }, [isOwner, _, onPressAddUser, isMobile]) 956 956 - 957 957 - const renderEmptyState = useCallback(() => { 958 958 - return ( 959 959 - <View style={[a.gap_xl, a.align_center]}> 960 960 - <EmptyState 961 961 - icon="users-slash" 962 962 - message={_(msg`This list is empty.`)} 963 963 - /> 964 964 - {isOwner && ( 965 965 - <NewButton 966 966 - testID="emptyStateAddUserBtn" 967 967 - label={_(msg`Start adding people`)} 968 968 - onPress={onPressAddUser} 969 969 - color="primary" 970 970 - size="small" 971 971 - variant="solid"> 972 972 - <ButtonIcon icon={PersonPlusIcon} /> 973 973 - <ButtonText> 974 974 - <Trans>Start adding people!</Trans> 975 975 - </ButtonText> 976 976 - </NewButton> 977 977 - )} 978 978 - </View> 979 979 - ) 980 980 - }, [_, onPressAddUser, isOwner]) 981 981 - 982 982 - return ( 983 983 - <View> 984 984 - <ListMembers 985 985 - testID="listItems" 986 986 - list={list.uri} 987 987 - scrollElRef={scrollElRef} 988 988 - renderHeader={renderHeader} 989 989 - renderEmptyState={renderEmptyState} 990 990 - headerOffset={headerHeight} 991 991 - onScrolledDownChange={setIsScrolledDown} 992 992 - /> 993 993 - {isScrolledDown && ( 994 994 - <LoadLatestBtn 995 995 - onPress={onScrollToTop} 996 996 - label={_(msg`Scroll to top`)} 997 997 - showIndicator={false} 998 998 - /> 999 999 - )} 1000 1000 - </View> 1001 1001 - ) 1002 1002 - }, 1003 1003 - ) 1004 1004 - 1005 1005 - function ErrorScreen({error}: {error: string}) { 1006 1006 - const pal = usePalette('default') 1007 1007 - const navigation = useNavigation<NavigationProp>() 1008 1008 - const {_} = useLingui() 1009 1009 - const onPressBack = useCallback(() => { 1010 1010 - if (navigation.canGoBack()) { 1011 1011 - navigation.goBack() 1012 1012 - } else { 1013 1013 - navigation.navigate('Home') 1014 1014 - } 1015 1015 - }, [navigation]) 1016 1016 - 1017 1017 - return ( 1018 1018 - <View 1019 1019 - style={[ 1020 1020 - pal.view, 1021 1021 - pal.border, 1022 1022 - { 1023 1023 - paddingHorizontal: 18, 1024 1024 - paddingVertical: 14, 1025 1025 - borderTopWidth: StyleSheet.hairlineWidth, 1026 1026 - }, 1027 1027 - ]}> 1028 1028 - <Text type="title-lg" style={[pal.text, s.mb10]}> 1029 1029 - <Trans>Could not load list</Trans> 1030 1030 - </Text> 1031 1031 - <Text type="md" style={[pal.text, s.mb20]}> 1032 1032 - {error} 1033 1033 - </Text> 1034 1034 - 1035 1035 - <View style={{flexDirection: 'row'}}> 1036 1036 - <Button 1037 1037 - type="default" 1038 1038 - accessibilityLabel={_(msg`Go back`)} 1039 1039 - accessibilityHint={_(msg`Returns to previous page`)} 1040 1040 - onPress={onPressBack} 1041 1041 - style={{flexShrink: 1}}> 1042 1042 - <Text type="button" style={pal.text}> 1043 1043 - <Trans>Go Back</Trans> 1044 1044 - </Text> 1045 1045 - </Button> 1046 1046 - </View> 1047 1047 - </View> 1048 1048 - ) 1049 1049 - } 1050 1050 - 1051 1051 - const styles = StyleSheet.create({ 1052 1052 - btn: { 1053 1053 - flexDirection: 'row', 1054 1054 - alignItems: 'center', 1055 1055 - gap: 6, 1056 1056 - paddingVertical: 7, 1057 1057 - paddingHorizontal: 14, 1058 1058 - borderRadius: 50, 1059 1059 - marginLeft: 6, 1060 1060 - }, 1061 1061 - })