From 4f814207bcff3eb441e8bc196d274fc6adef5405 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Tue, 21 Mar 2023 19:18:15 -0500 Subject: [PATCH] Merge the suggested actors model with the general suggestion system (#343) --- .../suggested-actors.ts} | 4 +- src/view/com/discover/SuggestedFollows.tsx | 12 +++- src/view/com/discover/WhoToFollow.tsx | 66 ------------------- src/view/com/search/Suggestions.tsx | 32 ++++++--- src/view/screens/Search.tsx | 12 +++- src/view/screens/Search.web.tsx | 12 +++- 6 files changed, 54 insertions(+), 84 deletions(-) rename src/state/models/{suggested-actors-view.ts => discovery/suggested-actors.ts} (98%) delete mode 100644 src/view/com/discover/WhoToFollow.tsx diff --git a/src/state/models/suggested-actors-view.ts b/src/state/models/discovery/suggested-actors.ts similarity index 98% rename from src/state/models/suggested-actors-view.ts rename to src/state/models/discovery/suggested-actors.ts index 33c73b4e..cf8e2dd7 100644 --- a/src/state/models/suggested-actors-view.ts +++ b/src/state/models/discovery/suggested-actors.ts @@ -1,7 +1,7 @@ import {makeAutoObservable, runInAction} from 'mobx' import {AppBskyActorProfile as Profile} from '@atproto/api' import shuffle from 'lodash.shuffle' -import {RootStoreModel} from './root-store' +import {RootStoreModel} from '../root-store' import {cleanError} from 'lib/strings/errors' import {bundleAsync} from 'lib/async/bundle' import {SUGGESTED_FOLLOWS} from 'lib/constants' @@ -10,7 +10,7 @@ const PAGE_SIZE = 30 export type SuggestedActor = Profile.ViewBasic | Profile.View -export class SuggestedActorsViewModel { +export class SuggestedActorsModel { // state pageSize = PAGE_SIZE isLoading = false diff --git a/src/view/com/discover/SuggestedFollows.tsx b/src/view/com/discover/SuggestedFollows.tsx index bce22423..0d09038b 100644 --- a/src/view/com/discover/SuggestedFollows.tsx +++ b/src/view/com/discover/SuggestedFollows.tsx @@ -11,7 +11,11 @@ export const SuggestedFollows = ({ suggestions, }: { title: string - suggestions: (AppBskyActorRef.WithInfo | RefWithInfoAndFollowers)[] + suggestions: ( + | AppBskyActorRef.WithInfo + | RefWithInfoAndFollowers + | AppBskyActorProfile.View + )[] }) => { const pal = usePalette('default') return ( @@ -30,7 +34,11 @@ export const SuggestedFollows = ({ avatar={item.avatar} noBg noBorder - description="" + description={ + item.description + ? (item as AppBskyActorProfile.View).description + : '' + } followers={ item.followers ? (item.followers as AppBskyActorProfile.View[]) diff --git a/src/view/com/discover/WhoToFollow.tsx b/src/view/com/discover/WhoToFollow.tsx deleted file mode 100644 index 715fadae..00000000 --- a/src/view/com/discover/WhoToFollow.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import React from 'react' -import {ActivityIndicator, StyleSheet, View} from 'react-native' -import {observer} from 'mobx-react-lite' -import {useStores} from 'state/index' -import {SuggestedActorsViewModel} from 'state/models/suggested-actors-view' -import {ProfileCardWithFollowBtn} from '../profile/ProfileCard' -import {Text} from '../util/text/Text' -import {s} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' - -export const WhoToFollow = observer(() => { - const pal = usePalette('default') - const store = useStores() - const suggestedActorsView = React.useMemo( - () => new SuggestedActorsViewModel(store, {pageSize: 15}), - [store], - ) - - React.useEffect(() => { - suggestedActorsView.loadMore(true) - }, [store, suggestedActorsView]) - - return ( - <> - {(suggestedActorsView.hasContent || suggestedActorsView.isLoading) && ( - - Who to follow - - )} - {suggestedActorsView.hasContent && ( - <> - - {suggestedActorsView.suggestions.map(item => ( - - ))} - - - )} - {suggestedActorsView.isLoading && ( - - - - )} - - ) -}) - -const styles = StyleSheet.create({ - heading: { - fontWeight: 'bold', - paddingHorizontal: 12, - paddingBottom: 8, - }, - - bottomBorder: { - borderBottomWidth: 1, - }, -}) diff --git a/src/view/com/search/Suggestions.tsx b/src/view/com/search/Suggestions.tsx index 1747036b..5231faea 100644 --- a/src/view/com/search/Suggestions.tsx +++ b/src/view/com/search/Suggestions.tsx @@ -2,15 +2,21 @@ import React from 'react' import {StyleSheet, View} from 'react-native' import {observer} from 'mobx-react-lite' import {FoafsModel} from 'state/models/discovery/foafs' -import {WhoToFollow} from 'view/com/discover/WhoToFollow' +import {SuggestedActorsModel} from 'state/models/discovery/suggested-actors' import {SuggestedFollows} from 'view/com/discover/SuggestedFollows' import {ProfileCardFeedLoadingPlaceholder} from 'view/com/util/LoadingPlaceholder' -export const Suggestions = observer(({foafs}: {foafs: FoafsModel}) => { - if (foafs.isLoading) { - return - } - if (foafs.hasContent) { +export const Suggestions = observer( + ({ + foafs, + suggestedActors, + }: { + foafs: FoafsModel + suggestedActors: SuggestedActorsModel + }) => { + if (foafs.isLoading || suggestedActors.isLoading) { + return + } return ( <> {foafs.popular.length > 0 && ( @@ -21,7 +27,14 @@ export const Suggestions = observer(({foafs}: {foafs: FoafsModel}) => { /> )} - + {suggestedActors.hasContent && ( + + + + )} {foafs.sources.map((source, i) => { const item = foafs.foafs.get(source) if (!item || item.follows.length === 0) { @@ -38,9 +51,8 @@ export const Suggestions = observer(({foafs}: {foafs: FoafsModel}) => { })} ) - } - return -}) + }, +) const styles = StyleSheet.create({ suggestions: { diff --git a/src/view/screens/Search.tsx b/src/view/screens/Search.tsx index 5850915b..641d144a 100644 --- a/src/view/screens/Search.tsx +++ b/src/view/screens/Search.tsx @@ -19,6 +19,7 @@ import {useStores} from 'state/index' import {UserAutocompleteViewModel} from 'state/models/user-autocomplete-view' 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' @@ -44,6 +45,10 @@ export const SearchScreen = withAuthRequired( () => new FoafsModel(store), [store], ) + const suggestedActors = React.useMemo( + () => new SuggestedActorsModel(store), + [store], + ) const [searchUIModel, setSearchUIModel] = React.useState< SearchUIModel | undefined >() @@ -65,9 +70,12 @@ export const SearchScreen = withAuthRequired( if (!foafs.hasData) { foafs.fetch() } + if (!suggestedActors.hasLoaded) { + suggestedActors.loadMore(true) + } return cleanup - }, [store, autocompleteView, foafs]), + }, [store, autocompleteView, foafs, suggestedActors]), ) const onChangeQuery = React.useCallback( @@ -163,7 +171,7 @@ export const SearchScreen = withAuthRequired( ) : ( - + )} diff --git a/src/view/screens/Search.web.tsx b/src/view/screens/Search.web.tsx index cb094d95..d12cbc1b 100644 --- a/src/view/screens/Search.web.tsx +++ b/src/view/screens/Search.web.tsx @@ -2,6 +2,7 @@ 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' @@ -24,6 +25,10 @@ export const SearchScreen = withAuthRequired( () => new FoafsModel(store), [store], ) + const suggestedActors = React.useMemo( + () => new SuggestedActorsModel(store), + [store], + ) const searchUIModel = React.useMemo( () => (route.params.q ? new SearchUIModel(store) : undefined), [route.params.q, store], @@ -36,7 +41,10 @@ export const SearchScreen = withAuthRequired( if (!foafs.hasData) { foafs.fetch() } - }, [foafs, searchUIModel, route.params.q]) + if (!suggestedActors.hasLoaded) { + suggestedActors.loadMore(true) + } + }, [foafs, suggestedActors, searchUIModel, route.params.q]) if (searchUIModel) { return @@ -47,7 +55,7 @@ export const SearchScreen = withAuthRequired( testID="searchScrollView" style={[pal.view, styles.container]} scrollEventThrottle={100}> - + )