diff options
Diffstat (limited to 'src/view/com/search/Suggestions.tsx')
| -rw-r--r-- | src/view/com/search/Suggestions.tsx | 328 |
1 files changed, 163 insertions, 165 deletions
diff --git a/src/view/com/search/Suggestions.tsx b/src/view/com/search/Suggestions.tsx index 440d912af..6f9fff52f 100644 --- a/src/view/com/search/Suggestions.tsx +++ b/src/view/com/search/Suggestions.tsx @@ -39,179 +39,177 @@ interface ProfileView { type Item = Heading | RefWrapper | SuggestWrapper | ProfileView export const Suggestions = observer( - forwardRef( - ( - { - foafs, - suggestedActors, - }: { - foafs: FoafsModel - suggestedActors: SuggestedActorsModel - }, - flatListRef: ForwardedRef<FlatList>, - ) => { - const pal = usePalette('default') - const [refreshing, setRefreshing] = React.useState(false) - const data = React.useMemo(() => { - let items: Item[] = [] + forwardRef(function SuggestionsImpl( + { + foafs, + suggestedActors, + }: { + foafs: FoafsModel + suggestedActors: SuggestedActorsModel + }, + flatListRef: ForwardedRef<FlatList>, + ) { + const pal = usePalette('default') + const [refreshing, setRefreshing] = React.useState(false) + const data = React.useMemo(() => { + let items: Item[] = [] - if (foafs.popular.length > 0) { - items = items - .concat([ - { - _reactKey: '__popular_heading__', - type: 'heading', - title: 'In Your Network', - }, - ]) - .concat( - foafs.popular.map(ref => ({ - _reactKey: `popular-${ref.did}`, - type: 'ref', - ref, - })), - ) - } - if (suggestedActors.hasContent) { - items = items - .concat([ - { - _reactKey: '__suggested_heading__', - type: 'heading', - title: 'Suggested Follows', - }, - ]) - .concat( - suggestedActors.suggestions.map(suggested => ({ - _reactKey: `suggested-${suggested.did}`, - type: 'suggested', - suggested, - })), - ) - } - for (const source of foafs.sources) { - const item = foafs.foafs.get(source) - if (!item || item.follows.length === 0) { - continue - } - items = items - .concat([ - { - _reactKey: `__${item.did}_heading__`, - type: 'heading', - title: `Followed by ${sanitizeDisplayName( - item.displayName || sanitizeHandle(item.handle), - )}`, - }, - ]) - .concat( - item.follows.slice(0, 10).map(view => ({ - _reactKey: `${item.did}-${view.did}`, - type: 'profile-view', - view, - })), - ) + if (foafs.popular.length > 0) { + items = items + .concat([ + { + _reactKey: '__popular_heading__', + type: 'heading', + title: 'In Your Network', + }, + ]) + .concat( + foafs.popular.map(ref => ({ + _reactKey: `popular-${ref.did}`, + type: 'ref', + ref, + })), + ) + } + if (suggestedActors.hasContent) { + items = items + .concat([ + { + _reactKey: '__suggested_heading__', + type: 'heading', + title: 'Suggested Follows', + }, + ]) + .concat( + suggestedActors.suggestions.map(suggested => ({ + _reactKey: `suggested-${suggested.did}`, + type: 'suggested', + suggested, + })), + ) + } + for (const source of foafs.sources) { + const item = foafs.foafs.get(source) + if (!item || item.follows.length === 0) { + continue } + items = items + .concat([ + { + _reactKey: `__${item.did}_heading__`, + type: 'heading', + title: `Followed by ${sanitizeDisplayName( + item.displayName || sanitizeHandle(item.handle), + )}`, + }, + ]) + .concat( + item.follows.slice(0, 10).map(view => ({ + _reactKey: `${item.did}-${view.did}`, + type: 'profile-view', + view, + })), + ) + } - return items - }, [ - foafs.popular, - suggestedActors.hasContent, - suggestedActors.suggestions, - foafs.sources, - foafs.foafs, - ]) + return items + }, [ + foafs.popular, + suggestedActors.hasContent, + suggestedActors.suggestions, + foafs.sources, + foafs.foafs, + ]) - const onRefresh = React.useCallback(async () => { - setRefreshing(true) - try { - await foafs.fetch() - } finally { - setRefreshing(false) - } - }, [foafs, setRefreshing]) + const onRefresh = React.useCallback(async () => { + setRefreshing(true) + try { + await foafs.fetch() + } finally { + setRefreshing(false) + } + }, [foafs, setRefreshing]) - const renderItem = React.useCallback( - ({item}: {item: Item}) => { - if (item.type === 'heading') { - return ( - <Text type="title" style={[styles.heading, pal.text]}> - {item.title} - </Text> - ) - } - if (item.type === 'ref') { - return ( - <View style={[styles.card, pal.view, pal.border]}> - <ProfileCardWithFollowBtn - key={item.ref.did} - profile={item.ref} - noBg - noBorder - followers={ - item.ref.followers - ? (item.ref.followers as AppBskyActorDefs.ProfileView[]) - : undefined - } - /> - </View> - ) - } - if (item.type === 'profile-view') { - return ( - <View style={[styles.card, pal.view, pal.border]}> - <ProfileCardWithFollowBtn - key={item.view.did} - profile={item.view} - noBg - noBorder - /> - </View> - ) - } - if (item.type === 'suggested') { - return ( - <View style={[styles.card, pal.view, pal.border]}> - <ProfileCardWithFollowBtn - key={item.suggested.did} - profile={item.suggested} - noBg - noBorder - /> - </View> - ) - } - return null - }, - [pal], - ) + const renderItem = React.useCallback( + ({item}: {item: Item}) => { + if (item.type === 'heading') { + return ( + <Text type="title" style={[styles.heading, pal.text]}> + {item.title} + </Text> + ) + } + if (item.type === 'ref') { + return ( + <View style={[styles.card, pal.view, pal.border]}> + <ProfileCardWithFollowBtn + key={item.ref.did} + profile={item.ref} + noBg + noBorder + followers={ + item.ref.followers + ? (item.ref.followers as AppBskyActorDefs.ProfileView[]) + : undefined + } + /> + </View> + ) + } + if (item.type === 'profile-view') { + return ( + <View style={[styles.card, pal.view, pal.border]}> + <ProfileCardWithFollowBtn + key={item.view.did} + profile={item.view} + noBg + noBorder + /> + </View> + ) + } + if (item.type === 'suggested') { + return ( + <View style={[styles.card, pal.view, pal.border]}> + <ProfileCardWithFollowBtn + key={item.suggested.did} + profile={item.suggested} + noBg + noBorder + /> + </View> + ) + } + return null + }, + [pal], + ) - if (foafs.isLoading || suggestedActors.isLoading) { - return ( - <CenteredView> - <ProfileCardFeedLoadingPlaceholder /> - </CenteredView> - ) - } + if (foafs.isLoading || suggestedActors.isLoading) { return ( - <FlatList - ref={flatListRef} - data={data} - keyExtractor={item => item._reactKey} - refreshControl={ - <RefreshControl - refreshing={refreshing} - onRefresh={onRefresh} - tintColor={pal.colors.text} - titleColor={pal.colors.text} - /> - } - renderItem={renderItem} - initialNumToRender={15} - /> + <CenteredView> + <ProfileCardFeedLoadingPlaceholder /> + </CenteredView> ) - }, - ), + } + return ( + <FlatList + ref={flatListRef} + data={data} + keyExtractor={item => item._reactKey} + refreshControl={ + <RefreshControl + refreshing={refreshing} + onRefresh={onRefresh} + tintColor={pal.colors.text} + titleColor={pal.colors.text} + /> + } + renderItem={renderItem} + initialNumToRender={15} + /> + ) + }), ) const styles = StyleSheet.create({ |