From 75fd653be3a391d0edc11a9b35ed636c7cbe3b11 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Tue, 18 Apr 2023 18:29:54 -0500 Subject: Rework search suggestions for performance (#492) --- src/state/models/discovery/foafs.ts | 16 +- src/view/com/discover/SuggestedFollows.tsx | 68 ------- src/view/com/search/Suggestions.tsx | 290 ++++++++++++++++++++++++----- src/view/screens/Search.tsx | 197 +------------------- src/view/screens/Search.web.tsx | 59 +----- src/view/screens/SearchMobile.tsx | 87 ++++----- 6 files changed, 290 insertions(+), 427 deletions(-) delete mode 100644 src/view/com/discover/SuggestedFollows.tsx (limited to 'src') diff --git a/src/state/models/discovery/foafs.ts b/src/state/models/discovery/foafs.ts index 8dac2ec2d..f6e3157b7 100644 --- a/src/state/models/discovery/foafs.ts +++ b/src/state/models/discovery/foafs.ts @@ -57,15 +57,19 @@ export class FoafsModel { } // grab 10 of the users followed by the user - this.sources = sampleSize( - Object.keys(this.rootStore.me.follows.followDidToRecordMap), - 10, - ) + runInAction(() => { + this.sources = sampleSize( + Object.keys(this.rootStore.me.follows.followDidToRecordMap), + 10, + ) + }) if (this.sources.length === 0) { return } - this.foafs.clear() - this.popular.length = 0 + runInAction(() => { + this.foafs.clear() + this.popular.length = 0 + }) // fetch their profiles const profiles = await this.rootStore.agent.getProfiles({ diff --git a/src/view/com/discover/SuggestedFollows.tsx b/src/view/com/discover/SuggestedFollows.tsx deleted file mode 100644 index ae5605c5c..000000000 --- a/src/view/com/discover/SuggestedFollows.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import React from 'react' -import {StyleSheet, View} from 'react-native' -import {AppBskyActorDefs} from '@atproto/api' -import {RefWithInfoAndFollowers} from 'state/models/discovery/foafs' -import {ProfileCardWithFollowBtn} from '../profile/ProfileCard' -import {Text} from '../util/text/Text' -import {usePalette} from 'lib/hooks/usePalette' - -export const SuggestedFollows = ({ - title, - suggestions, -}: { - title: string - suggestions: ( - | AppBskyActorDefs.ProfileViewBasic - | AppBskyActorDefs.ProfileView - | RefWithInfoAndFollowers - )[] -}) => { - const pal = usePalette('default') - return ( - - - {title} - - {suggestions.map(item => ( - - - - ))} - - ) -} - -const styles = StyleSheet.create({ - container: { - borderBottomWidth: 1, - }, - - heading: { - fontWeight: 'bold', - paddingHorizontal: 12, - paddingBottom: 8, - }, - - card: { - borderTopWidth: 1, - }, -}) diff --git a/src/view/com/search/Suggestions.tsx b/src/view/com/search/Suggestions.tsx index e9999e1d2..c1355bfb5 100644 --- a/src/view/com/search/Suggestions.tsx +++ b/src/view/com/search/Suggestions.tsx @@ -1,65 +1,255 @@ -import React from 'react' -import {StyleSheet, View} from 'react-native' +import React, {forwardRef, ForwardedRef} from 'react' +import {RefreshControl, StyleSheet, View} from 'react-native' import {observer} from 'mobx-react-lite' +import {AppBskyActorDefs} from '@atproto/api' +import {CenteredView, FlatList} from '../util/Views' import {FoafsModel} from 'state/models/discovery/foafs' -import {SuggestedActorsModel} from 'state/models/discovery/suggested-actors' -import {SuggestedFollows} from 'view/com/discover/SuggestedFollows' +import { + SuggestedActorsModel, + SuggestedActor, +} from 'state/models/discovery/suggested-actors' +import {Text} from '../util/text/Text' +import {ProfileCardWithFollowBtn} from '../profile/ProfileCard' import {ProfileCardFeedLoadingPlaceholder} from 'view/com/util/LoadingPlaceholder' import {sanitizeDisplayName} from 'lib/strings/display-names' +import {RefWithInfoAndFollowers} from 'state/models/discovery/foafs' +import {usePalette} from 'lib/hooks/usePalette' + +interface Heading { + _reactKey: string + type: 'heading' + title: string +} +interface RefWrapper { + _reactKey: string + type: 'ref' + ref: RefWithInfoAndFollowers +} +interface SuggestWrapper { + _reactKey: string + type: 'suggested' + suggested: SuggestedActor +} +interface ProfileView { + _reactKey: string + type: 'profile-view' + view: AppBskyActorDefs.ProfileViewBasic +} +type Item = Heading | RefWrapper | SuggestWrapper | ProfileView export const Suggestions = observer( - ({ - foafs, - suggestedActors, - }: { - foafs: FoafsModel - suggestedActors: SuggestedActorsModel - }) => { - if (foafs.isLoading || suggestedActors.isLoading) { - return - } - return ( - <> - {foafs.popular.length > 0 && ( - - - - )} - {suggestedActors.hasContent && ( - - - - )} - {foafs.sources.map((source, i) => { + forwardRef( + ( + { + foafs, + suggestedActors, + }: { + foafs: FoafsModel + suggestedActors: SuggestedActorsModel + }, + flatListRef: ForwardedRef, + ) => { + 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) { - return + return } - return ( - - - - ) - })} - - ) - }, + )}`, + }, + ]) + .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, + ]) + + 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 ( + + {item.title} + + ) + } + if (item.type === 'ref') { + return ( + + + + ) + } + if (item.type === 'profile-view') { + return ( + + + + ) + } + if (item.type === 'suggested') { + return ( + + + + ) + } + return null + }, + [pal], + ) + + if (foafs.isLoading || suggestedActors.isLoading) { + return ( + + + + ) + } + return ( + item._reactKey} + refreshControl={ + + } + renderItem={renderItem} + initialNumToRender={15} + /> + ) + }, + ), ) const styles = StyleSheet.create({ - suggestions: { - marginTop: 10, - marginBottom: 20, + heading: { + fontWeight: 'bold', + paddingHorizontal: 12, + paddingBottom: 8, + paddingTop: 16, + }, + + card: { + borderTopWidth: 1, }, }) diff --git a/src/view/screens/Search.tsx b/src/view/screens/Search.tsx index ed9effd0b..bf9857df4 100644 --- a/src/view/screens/Search.tsx +++ b/src/view/screens/Search.tsx @@ -1,196 +1 @@ -import React from 'react' -import { - Keyboard, - RefreshControl, - StyleSheet, - TouchableWithoutFeedback, - View, -} from 'react-native' -import {useFocusEffect} from '@react-navigation/native' -import {withAuthRequired} from 'view/com/auth/withAuthRequired' -import {ScrollView} from 'view/com/util/Views' -import { - NativeStackScreenProps, - SearchTabNavigatorParams, -} from 'lib/routes/types' -import {observer} from 'mobx-react-lite' -import {Text} from 'view/com/util/text/Text' -import {useStores} from 'state/index' -import {UserAutocompleteModel} from 'state/models/discovery/user-autocomplete' -import {SearchUIModel} from 'state/models/ui/search' -import {FoafsModel} from 'state/models/discovery/foafs' -import {SuggestedActorsModel} from 'state/models/discovery/suggested-actors' -import {HeaderWithInput} from 'view/com/search/HeaderWithInput' -import {Suggestions} from 'view/com/search/Suggestions' -import {SearchResults} from 'view/com/search/SearchResults' -import {s} from 'lib/styles' -import {ProfileCard} from 'view/com/profile/ProfileCard' -import {usePalette} from 'lib/hooks/usePalette' -import {useOnMainScroll} from 'lib/hooks/useOnMainScroll' - -type Props = NativeStackScreenProps -export const SearchScreen = withAuthRequired( - observer(({}: Props) => { - const pal = usePalette('default') - const store = useStores() - const scrollElRef = React.useRef(null) - const onMainScroll = useOnMainScroll(store) - const [isInputFocused, setIsInputFocused] = React.useState(false) - const [query, setQuery] = React.useState('') - const autocompleteView = React.useMemo( - () => new UserAutocompleteModel(store), - [store], - ) - const foafs = React.useMemo( - () => new FoafsModel(store), - [store], - ) - const suggestedActors = React.useMemo( - () => new SuggestedActorsModel(store), - [store], - ) - const [searchUIModel, setSearchUIModel] = React.useState< - SearchUIModel | undefined - >() - const [refreshing, setRefreshing] = React.useState(false) - - const onSoftReset = () => { - scrollElRef.current?.scrollTo({x: 0, y: 0}) - } - - useFocusEffect( - React.useCallback(() => { - const softResetSub = store.onScreenSoftReset(onSoftReset) - const cleanup = () => { - softResetSub.remove() - } - - store.shell.setMinimalShellMode(false) - autocompleteView.setup() - if (!foafs.hasData) { - foafs.fetch() - } - if (!suggestedActors.hasLoaded) { - suggestedActors.loadMore(true) - } - - return cleanup - }, [store, autocompleteView, foafs, suggestedActors]), - ) - - const onChangeQuery = React.useCallback( - (text: string) => { - setQuery(text) - if (text.length > 0) { - autocompleteView.setActive(true) - autocompleteView.setPrefix(text) - } else { - autocompleteView.setActive(false) - } - }, - [setQuery, autocompleteView], - ) - - const onPressClearQuery = React.useCallback(() => { - setQuery('') - }, [setQuery]) - - const onPressCancelSearch = React.useCallback(() => { - setQuery('') - autocompleteView.setActive(false) - setSearchUIModel(undefined) - store.shell.setIsDrawerSwipeDisabled(false) - }, [setQuery, autocompleteView, store]) - - const onSubmitQuery = React.useCallback(() => { - const model = new SearchUIModel(store) - model.fetch(query) - setSearchUIModel(model) - store.shell.setIsDrawerSwipeDisabled(true) - }, [query, setSearchUIModel, store]) - - const onRefresh = React.useCallback(async () => { - setRefreshing(true) - try { - await foafs.fetch() - } finally { - setRefreshing(false) - } - }, [foafs, setRefreshing]) - - return ( - - - - {searchUIModel ? ( - - ) : ( - - }> - {query && autocompleteView.searchRes.length ? ( - <> - {autocompleteView.searchRes.map(item => ( - - ))} - - ) : query && !autocompleteView.searchRes.length ? ( - - - No results found for {autocompleteView.prefix} - - - ) : isInputFocused ? ( - - - Search for users on the network - - - ) : ( - - )} - - - )} - - - ) - }), -) - -const styles = StyleSheet.create({ - container: { - flex: 1, - }, - - searchPrompt: { - textAlign: 'center', - paddingTop: 10, - }, -}) +export * from './SearchMobile' diff --git a/src/view/screens/Search.web.tsx b/src/view/screens/Search.web.tsx index 92df1d920..62f3fb900 100644 --- a/src/view/screens/Search.web.tsx +++ b/src/view/screens/Search.web.tsx @@ -1,10 +1,8 @@ import React from 'react' -import {StyleSheet, View} from 'react-native' import {SearchUIModel} from 'state/models/ui/search' import {FoafsModel} from 'state/models/discovery/foafs' import {SuggestedActorsModel} from 'state/models/discovery/suggested-actors' import {withAuthRequired} from 'view/com/auth/withAuthRequired' -import {ScrollView} from 'view/com/util/Views' import {Suggestions} from 'view/com/search/Suggestions' import {SearchResults} from 'view/com/search/SearchResults' import {observer} from 'mobx-react-lite' @@ -13,15 +11,12 @@ import { SearchTabNavigatorParams, } from 'lib/routes/types' import {useStores} from 'state/index' -import {s} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' import * as Mobile from './SearchMobile' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' type Props = NativeStackScreenProps export const SearchScreen = withAuthRequired( observer(({navigation, route}: Props) => { - const pal = usePalette('default') const store = useStores() const params = route.params || {} const foafs = React.useMemo( @@ -59,58 +54,6 @@ export const SearchScreen = withAuthRequired( return } - return ( - - - - - ) + return }), ) - -const styles = StyleSheet.create({ - container: { - flex: 1, - }, - - header: { - flexDirection: 'row', - alignItems: 'center', - paddingHorizontal: 12, - paddingTop: 4, - marginBottom: 14, - }, - headerMenuBtn: { - width: 40, - height: 30, - marginLeft: 6, - }, - headerSearchContainer: { - flex: 1, - flexDirection: 'row', - alignItems: 'center', - borderRadius: 30, - paddingHorizontal: 12, - paddingVertical: 8, - }, - headerSearchIcon: { - marginRight: 6, - alignSelf: 'center', - }, - headerSearchInput: { - flex: 1, - fontSize: 17, - }, - headerCancelBtn: { - width: 60, - paddingLeft: 10, - }, - - searchPrompt: { - textAlign: 'center', - paddingTop: 10, - }, -}) diff --git a/src/view/screens/SearchMobile.tsx b/src/view/screens/SearchMobile.tsx index e1fb3ec0a..679fb07c2 100644 --- a/src/view/screens/SearchMobile.tsx +++ b/src/view/screens/SearchMobile.tsx @@ -1,14 +1,13 @@ import React from 'react' import { Keyboard, - RefreshControl, StyleSheet, TouchableWithoutFeedback, View, } from 'react-native' import {useFocusEffect} from '@react-navigation/native' import {withAuthRequired} from 'view/com/auth/withAuthRequired' -import {ScrollView} from 'view/com/util/Views' +import {FlatList, ScrollView} from 'view/com/util/Views' import { NativeStackScreenProps, SearchTabNavigatorParams, @@ -33,7 +32,8 @@ export const SearchScreen = withAuthRequired( observer(({}: Props) => { const pal = usePalette('default') const store = useStores() - const scrollElRef = React.useRef(null) + const scrollViewRef = React.useRef(null) + const flatListRef = React.useRef(null) const onMainScroll = useOnMainScroll(store) const [isInputFocused, setIsInputFocused] = React.useState(false) const [query, setQuery] = React.useState('') @@ -52,31 +52,6 @@ export const SearchScreen = withAuthRequired( const [searchUIModel, setSearchUIModel] = React.useState< SearchUIModel | undefined >() - const [refreshing, setRefreshing] = React.useState(false) - - const onSoftReset = () => { - scrollElRef.current?.scrollTo({x: 0, y: 0}) - } - - useFocusEffect( - React.useCallback(() => { - const softResetSub = store.onScreenSoftReset(onSoftReset) - const cleanup = () => { - softResetSub.remove() - } - - store.shell.setMinimalShellMode(false) - autocompleteView.setup() - if (!foafs.hasData) { - foafs.fetch() - } - if (!suggestedActors.hasLoaded) { - suggestedActors.loadMore(true) - } - - return cleanup - }, [store, autocompleteView, foafs, suggestedActors]), - ) const onChangeQuery = React.useCallback( (text: string) => { @@ -109,14 +84,31 @@ export const SearchScreen = withAuthRequired( store.shell.setIsDrawerSwipeDisabled(true) }, [query, setSearchUIModel, store]) - const onRefresh = React.useCallback(async () => { - setRefreshing(true) - try { - await foafs.fetch() - } finally { - setRefreshing(false) - } - }, [foafs, setRefreshing]) + const onSoftReset = React.useCallback(() => { + scrollViewRef.current?.scrollTo({x: 0, y: 0}) + flatListRef.current?.scrollToOffset({offset: 0}) + onPressCancelSearch() + }, [scrollViewRef, flatListRef, onPressCancelSearch]) + + useFocusEffect( + React.useCallback(() => { + const softResetSub = store.onScreenSoftReset(onSoftReset) + const cleanup = () => { + softResetSub.remove() + } + + store.shell.setMinimalShellMode(false) + autocompleteView.setup() + if (!foafs.hasData) { + foafs.fetch() + } + if (!suggestedActors.hasLoaded) { + suggestedActors.loadMore(true) + } + + return cleanup + }, [store, autocompleteView, foafs, suggestedActors, onSoftReset]), + ) return ( @@ -132,21 +124,19 @@ export const SearchScreen = withAuthRequired( /> {searchUIModel ? ( + ) : !isInputFocused && !query ? ( + ) : ( - }> + scrollEventThrottle={100}> {query && autocompleteView.searchRes.length ? ( <> {autocompleteView.searchRes.map(item => ( @@ -155,6 +145,7 @@ export const SearchScreen = withAuthRequired( testID={`searchAutoCompleteResult-${item.handle}`} handle={item.handle} displayName={item.displayName} + labels={item.labels} avatar={item.avatar} /> ))} @@ -171,9 +162,7 @@ export const SearchScreen = withAuthRequired( Search for users on the network - ) : ( - - )} + ) : null} )} -- cgit 1.4.1