From 32fb0f98558e8565038d38a996c60706e52bd0dd Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 14 Nov 2023 02:09:05 +0000 Subject: [PATCH 1/8] Port user followers to RQ --- src/state/models/lists/user-followers.ts | 121 ---------------------- src/state/queries/profile-followers.ts | 32 ++++++ src/view/com/profile/ProfileCard.tsx | 54 +++++----- src/view/com/profile/ProfileFollowers.tsx | 111 ++++++++++++-------- 4 files changed, 126 insertions(+), 192 deletions(-) delete mode 100644 src/state/models/lists/user-followers.ts create mode 100644 src/state/queries/profile-followers.ts diff --git a/src/state/models/lists/user-followers.ts b/src/state/models/lists/user-followers.ts deleted file mode 100644 index 159308b9b9..0000000000 --- a/src/state/models/lists/user-followers.ts +++ /dev/null @@ -1,121 +0,0 @@ -import {makeAutoObservable} from 'mobx' -import { - AppBskyGraphGetFollowers as GetFollowers, - AppBskyActorDefs as ActorDefs, -} from '@atproto/api' -import {RootStoreModel} from '../root-store' -import {cleanError} from 'lib/strings/errors' -import {bundleAsync} from 'lib/async/bundle' -import {logger} from '#/logger' - -const PAGE_SIZE = 30 - -export type FollowerItem = ActorDefs.ProfileViewBasic - -export class UserFollowersModel { - // state - isLoading = false - isRefreshing = false - hasLoaded = false - error = '' - params: GetFollowers.QueryParams - hasMore = true - loadMoreCursor?: string - - // data - subject: ActorDefs.ProfileViewBasic = { - did: '', - handle: '', - } - followers: FollowerItem[] = [] - - constructor( - public rootStore: RootStoreModel, - params: GetFollowers.QueryParams, - ) { - makeAutoObservable( - this, - { - rootStore: false, - params: false, - }, - {autoBind: true}, - ) - this.params = params - } - - get hasContent() { - return this.subject.did !== '' - } - - get hasError() { - return this.error !== '' - } - - get isEmpty() { - return this.hasLoaded && !this.hasContent - } - - // public api - // = - - async refresh() { - return this.loadMore(true) - } - - loadMore = bundleAsync(async (replace: boolean = false) => { - if (!replace && !this.hasMore) { - return - } - this._xLoading(replace) - try { - const params = Object.assign({}, this.params, { - limit: PAGE_SIZE, - cursor: replace ? undefined : this.loadMoreCursor, - }) - const res = await this.rootStore.agent.getFollowers(params) - if (replace) { - this._replaceAll(res) - } else { - this._appendAll(res) - } - this._xIdle() - } catch (e: any) { - this._xIdle(e) - } - }) - - // state transitions - // = - - _xLoading(isRefreshing = false) { - this.isLoading = true - this.isRefreshing = isRefreshing - this.error = '' - } - - _xIdle(err?: any) { - this.isLoading = false - this.isRefreshing = false - this.hasLoaded = true - this.error = cleanError(err) - if (err) { - logger.error('Failed to fetch user followers', {error: err}) - } - } - - // helper functions - // = - - _replaceAll(res: GetFollowers.Response) { - this.followers = [] - this._appendAll(res) - } - - _appendAll(res: GetFollowers.Response) { - this.loadMoreCursor = res.data.cursor - this.hasMore = !!this.loadMoreCursor - this.followers = this.followers.concat(res.data.followers) - this.rootStore.me.follows.hydrateMany(res.data.followers) - } -} diff --git a/src/state/queries/profile-followers.ts b/src/state/queries/profile-followers.ts new file mode 100644 index 0000000000..8e76a20a08 --- /dev/null +++ b/src/state/queries/profile-followers.ts @@ -0,0 +1,32 @@ +import {AppBskyGraphGetFollowers} from '@atproto/api' +import {useInfiniteQuery, InfiniteData, QueryKey} from '@tanstack/react-query' +import {useSession} from '../session' + +const PAGE_SIZE = 30 +type RQPageParam = string | undefined + +export const RQKEY = (did: string) => ['profile-followers', did] + +export function useProfileFollowersQuery(did: string | undefined) { + const {agent} = useSession() + return useInfiniteQuery< + AppBskyGraphGetFollowers.OutputSchema, + Error, + InfiniteData, + QueryKey, + RQPageParam + >({ + queryKey: RQKEY(did || ''), + async queryFn({pageParam}: {pageParam: RQPageParam}) { + const res = await agent.app.bsky.graph.getFollowers({ + actor: did || '', + limit: PAGE_SIZE, + cursor: pageParam, + }) + return res.data + }, + initialPageParam: undefined, + getNextPageParam: lastPage => lastPage.cursor, + enabled: !!did, + }) +} diff --git a/src/view/com/profile/ProfileCard.tsx b/src/view/com/profile/ProfileCard.tsx index 95f0ecd93d..7c88a36bb1 100644 --- a/src/view/com/profile/ProfileCard.tsx +++ b/src/view/com/profile/ProfileCard.tsx @@ -23,6 +23,7 @@ import { } from 'lib/moderation' import {useModerationOpts} from '#/state/queries/preferences' import {useProfileShadow} from '#/state/cache/profile-shadow' +import {useSession} from '#/state/session' export function ProfileCard({ testID, @@ -188,34 +189,33 @@ const FollowersList = observer(function FollowersListImpl({ ) }) -export const ProfileCardWithFollowBtn = observer( - function ProfileCardWithFollowBtnImpl({ - profile, - noBg, - noBorder, - followers, - }: { - profile: AppBskyActorDefs.ProfileViewBasic - noBg?: boolean - noBorder?: boolean - followers?: AppBskyActorDefs.ProfileView[] | undefined - }) { - const store = useStores() - const isMe = store.me.did === profile.did +export function ProfileCardWithFollowBtn({ + profile, + noBg, + noBorder, + followers, + dataUpdatedAt, +}: { + profile: AppBskyActorDefs.ProfileViewBasic + noBg?: boolean + noBorder?: boolean + followers?: AppBskyActorDefs.ProfileView[] | undefined + dataUpdatedAt: number +}) { + const {currentAccount} = useSession() + const isMe = profile.did === currentAccount?.did - return ( - - } - /> - ) - }, -) + return ( + } + dataUpdatedAt={dataUpdatedAt} + /> + ) +} const styles = StyleSheet.create({ outer: { diff --git a/src/view/com/profile/ProfileFollowers.tsx b/src/view/com/profile/ProfileFollowers.tsx index 00ea48ed6b..b9e8c0c48b 100644 --- a/src/view/com/profile/ProfileFollowers.tsx +++ b/src/view/com/profile/ProfileFollowers.tsx @@ -1,49 +1,73 @@ -import React, {useEffect} from 'react' -import {observer} from 'mobx-react-lite' +import React from 'react' import {ActivityIndicator, RefreshControl, StyleSheet, View} from 'react-native' -import { - UserFollowersModel, - FollowerItem, -} from 'state/models/lists/user-followers' +import {AppBskyActorDefs as ActorDefs} from '@atproto/api' import {CenteredView, FlatList} from '../util/Views' import {ErrorMessage} from '../util/error/ErrorMessage' import {ProfileCardWithFollowBtn} from './ProfileCard' -import {useStores} from 'state/index' import {usePalette} from 'lib/hooks/usePalette' +import {useProfileFollowersQuery} from '#/state/queries/profile-followers' +import {useResolveDidQuery} from '#/state/queries/resolve-uri' import {logger} from '#/logger' +import {cleanError} from '#/lib/strings/errors' -export const ProfileFollowers = observer(function ProfileFollowers({ - name, -}: { - name: string -}) { +export function ProfileFollowers({name}: {name: string}) { const pal = usePalette('default') - const store = useStores() - const view = React.useMemo( - () => new UserFollowersModel(store, {actor: name}), - [store, name], - ) + const [isPTRing, setIsPTRing] = React.useState(false) + const { + data: resolvedDid, + error: resolveError, + isFetching: isFetchingDid, + } = useResolveDidQuery(name) + const { + data, + dataUpdatedAt, + isFetching, + isFetched, + isFetchingNextPage, + hasNextPage, + fetchNextPage, + isError, + error, + refetch, + } = useProfileFollowersQuery(resolvedDid?.did) - useEffect(() => { - view - .loadMore() - .catch(err => - logger.error('Failed to fetch user followers', {error: err}), - ) - }, [view]) + const followers = React.useMemo(() => { + if (data?.pages) { + return data.pages.flatMap(page => page.followers) + } + }, [data]) - const onRefresh = () => { - view.refresh() - } - const onEndReached = () => { - view.loadMore().catch(err => - logger.error('Failed to load more followers', { - error: err, - }), - ) + const onRefresh = React.useCallback(async () => { + setIsPTRing(true) + try { + await refetch() + } catch (err) { + logger.error('Failed to refresh followers', {error: err}) + } + setIsPTRing(false) + }, [refetch, setIsPTRing]) + + const onEndReached = async () => { + if (isFetching || !hasNextPage || isError) return + try { + await fetchNextPage() + } catch (err) { + logger.error('Failed to load more followers', {error: err}) + } } - if (!view.hasLoaded) { + const renderItem = React.useCallback( + ({item}: {item: ActorDefs.ProfileViewBasic}) => ( + + ), + [dataUpdatedAt], + ) + + if (isFetchingDid || !isFetched) { return ( @@ -53,26 +77,26 @@ export const ProfileFollowers = observer(function ProfileFollowers({ // error // = - if (view.hasError) { + if (resolveError || isError) { return ( - + ) } // loaded // = - const renderItem = ({item}: {item: FollowerItem}) => ( - - ) return ( item.did} refreshControl={ ( - {view.isLoading && } + {(isFetching || isFetchingNextPage) && } )} - extraData={view.isLoading} // @ts-ignore our .web version only -prf desktopFixedHeight /> ) -}) +} const styles = StyleSheet.create({ footer: { From 6af4e41805f30b9672db9091786e79d21f445196 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 14 Nov 2023 02:17:31 +0000 Subject: [PATCH 2/8] Port user follows to RQ --- src/state/models/lists/user-follows.ts | 121 ------------------------ src/state/queries/profile-follows.ts | 32 +++++++ src/view/com/profile/ProfileFollows.tsx | 104 ++++++++++++-------- 3 files changed, 99 insertions(+), 158 deletions(-) delete mode 100644 src/state/models/lists/user-follows.ts create mode 100644 src/state/queries/profile-follows.ts diff --git a/src/state/models/lists/user-follows.ts b/src/state/models/lists/user-follows.ts deleted file mode 100644 index 3abbbaf95e..0000000000 --- a/src/state/models/lists/user-follows.ts +++ /dev/null @@ -1,121 +0,0 @@ -import {makeAutoObservable} from 'mobx' -import { - AppBskyGraphGetFollows as GetFollows, - AppBskyActorDefs as ActorDefs, -} from '@atproto/api' -import {RootStoreModel} from '../root-store' -import {cleanError} from 'lib/strings/errors' -import {bundleAsync} from 'lib/async/bundle' -import {logger} from '#/logger' - -const PAGE_SIZE = 30 - -export type FollowItem = ActorDefs.ProfileViewBasic - -export class UserFollowsModel { - // state - isLoading = false - isRefreshing = false - hasLoaded = false - error = '' - params: GetFollows.QueryParams - hasMore = true - loadMoreCursor?: string - - // data - subject: ActorDefs.ProfileViewBasic = { - did: '', - handle: '', - } - follows: FollowItem[] = [] - - constructor( - public rootStore: RootStoreModel, - params: GetFollows.QueryParams, - ) { - makeAutoObservable( - this, - { - rootStore: false, - params: false, - }, - {autoBind: true}, - ) - this.params = params - } - - get hasContent() { - return this.subject.did !== '' - } - - get hasError() { - return this.error !== '' - } - - get isEmpty() { - return this.hasLoaded && !this.hasContent - } - - // public api - // = - - async refresh() { - return this.loadMore(true) - } - - loadMore = bundleAsync(async (replace: boolean = false) => { - if (!replace && !this.hasMore) { - return - } - this._xLoading(replace) - try { - const params = Object.assign({}, this.params, { - limit: PAGE_SIZE, - cursor: replace ? undefined : this.loadMoreCursor, - }) - const res = await this.rootStore.agent.getFollows(params) - if (replace) { - this._replaceAll(res) - } else { - this._appendAll(res) - } - this._xIdle() - } catch (e: any) { - this._xIdle(e) - } - }) - - // state transitions - // = - - _xLoading(isRefreshing = false) { - this.isLoading = true - this.isRefreshing = isRefreshing - this.error = '' - } - - _xIdle(err?: any) { - this.isLoading = false - this.isRefreshing = false - this.hasLoaded = true - this.error = cleanError(err) - if (err) { - logger.error('Failed to fetch user follows', err) - } - } - - // helper functions - // = - - _replaceAll(res: GetFollows.Response) { - this.follows = [] - this._appendAll(res) - } - - _appendAll(res: GetFollows.Response) { - this.loadMoreCursor = res.data.cursor - this.hasMore = !!this.loadMoreCursor - this.follows = this.follows.concat(res.data.follows) - this.rootStore.me.follows.hydrateMany(res.data.follows) - } -} diff --git a/src/state/queries/profile-follows.ts b/src/state/queries/profile-follows.ts new file mode 100644 index 0000000000..acdfa645d3 --- /dev/null +++ b/src/state/queries/profile-follows.ts @@ -0,0 +1,32 @@ +import {AppBskyGraphGetFollows} from '@atproto/api' +import {useInfiniteQuery, InfiniteData, QueryKey} from '@tanstack/react-query' +import {useSession} from '../session' + +const PAGE_SIZE = 30 +type RQPageParam = string | undefined + +export const RQKEY = (did: string) => ['profile-followers', did] + +export function useProfileFollowsQuery(did: string | undefined) { + const {agent} = useSession() + return useInfiniteQuery< + AppBskyGraphGetFollows.OutputSchema, + Error, + InfiniteData, + QueryKey, + RQPageParam + >({ + queryKey: RQKEY(did || ''), + async queryFn({pageParam}: {pageParam: RQPageParam}) { + const res = await agent.app.bsky.graph.getFollows({ + actor: did || '', + limit: PAGE_SIZE, + cursor: pageParam, + }) + return res.data + }, + initialPageParam: undefined, + getNextPageParam: lastPage => lastPage.cursor, + enabled: !!did, + }) +} diff --git a/src/view/com/profile/ProfileFollows.tsx b/src/view/com/profile/ProfileFollows.tsx index abc35398a0..77ae72da45 100644 --- a/src/view/com/profile/ProfileFollows.tsx +++ b/src/view/com/profile/ProfileFollows.tsx @@ -1,42 +1,73 @@ -import React, {useEffect} from 'react' -import {observer} from 'mobx-react-lite' +import React from 'react' import {ActivityIndicator, RefreshControl, StyleSheet, View} from 'react-native' +import {AppBskyActorDefs as ActorDefs} from '@atproto/api' import {CenteredView, FlatList} from '../util/Views' -import {UserFollowsModel, FollowItem} from 'state/models/lists/user-follows' import {ErrorMessage} from '../util/error/ErrorMessage' import {ProfileCardWithFollowBtn} from './ProfileCard' -import {useStores} from 'state/index' import {usePalette} from 'lib/hooks/usePalette' +import {useProfileFollowsQuery} from '#/state/queries/profile-follows' +import {useResolveDidQuery} from '#/state/queries/resolve-uri' import {logger} from '#/logger' +import {cleanError} from '#/lib/strings/errors' -export const ProfileFollows = observer(function ProfileFollows({ - name, -}: { - name: string -}) { +export function ProfileFollows({name}: {name: string}) { const pal = usePalette('default') - const store = useStores() - const view = React.useMemo( - () => new UserFollowsModel(store, {actor: name}), - [store, name], - ) + const [isPTRing, setIsPTRing] = React.useState(false) + const { + data: resolvedDid, + error: resolveError, + isFetching: isFetchingDid, + } = useResolveDidQuery(name) + const { + data, + dataUpdatedAt, + isFetching, + isFetched, + isFetchingNextPage, + hasNextPage, + fetchNextPage, + isError, + error, + refetch, + } = useProfileFollowsQuery(resolvedDid?.did) - useEffect(() => { - view - .loadMore() - .catch(err => logger.error('Failed to fetch user follows', err)) - }, [view]) + const follows = React.useMemo(() => { + if (data?.pages) { + return data.pages.flatMap(page => page.follows) + } + }, [data]) - const onRefresh = () => { - view.refresh() - } - const onEndReached = () => { - view - .loadMore() - .catch(err => logger.error('Failed to load more follows', err)) + const onRefresh = React.useCallback(async () => { + setIsPTRing(true) + try { + await refetch() + } catch (err) { + logger.error('Failed to refresh follows', {error: err}) + } + setIsPTRing(false) + }, [refetch, setIsPTRing]) + + const onEndReached = async () => { + if (isFetching || !hasNextPage || isError) return + try { + await fetchNextPage() + } catch (err) { + logger.error('Failed to load more follows', {error: err}) + } } - if (!view.hasLoaded) { + const renderItem = React.useCallback( + ({item}: {item: ActorDefs.ProfileViewBasic}) => ( + + ), + [dataUpdatedAt], + ) + + if (isFetchingDid || !isFetched) { return ( @@ -46,26 +77,26 @@ export const ProfileFollows = observer(function ProfileFollows({ // error // = - if (view.hasError) { + if (resolveError || isError) { return ( - + ) } // loaded // = - const renderItem = ({item}: {item: FollowItem}) => ( - - ) return ( item.did} refreshControl={ ( - {view.isLoading && } + {(isFetching || isFetchingNextPage) && } )} - extraData={view.isLoading} // @ts-ignore our .web version only -prf desktopFixedHeight /> ) -}) +} const styles = StyleSheet.create({ footer: { From ddded23c62bc667800c1b6104aa86e119ad11169 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 14 Nov 2023 03:01:44 +0000 Subject: [PATCH 3/8] Start porting FollowButton to RQ --- src/view/com/profile/FollowButton.tsx | 74 +++++++++++++++++++-------- 1 file changed, 53 insertions(+), 21 deletions(-) diff --git a/src/view/com/profile/FollowButton.tsx b/src/view/com/profile/FollowButton.tsx index adb496f6d7..0e0ed53f2e 100644 --- a/src/view/com/profile/FollowButton.tsx +++ b/src/view/com/profile/FollowButton.tsx @@ -1,13 +1,14 @@ import React from 'react' import {StyleProp, TextStyle, View} from 'react-native' -import {observer} from 'mobx-react-lite' import {AppBskyActorDefs} from '@atproto/api' import {Button, ButtonType} from '../util/forms/Button' import * as Toast from '../util/Toast' -import {FollowState} from 'state/models/cache/my-follows' -import {useFollowProfile} from 'lib/hooks/useFollowProfile' +import { + useProfileFollowMutation, + useProfileUnfollowMutation, +} from '#/state/queries/profile' -export const FollowButton = observer(function FollowButtonImpl({ +export function FollowButton({ unfollowedType = 'inverted', followedType = 'default', profile, @@ -20,28 +21,59 @@ export const FollowButton = observer(function FollowButtonImpl({ onToggleFollow?: (v: boolean) => void labelStyle?: StyleProp }) { - const {state, following, toggle} = useFollowProfile(profile) + const followMutation = useProfileFollowMutation() + const unfollowMutation = useProfileUnfollowMutation() - const onPress = React.useCallback(async () => { + const onPressFollow = async () => { + if (profile.viewer?.following) { + return + } try { - const {following} = await toggle() - onToggleFollow?.(following) + await followMutation.mutateAsync({did: profile.did}) + onToggleFollow?.(false) } catch (e: any) { - Toast.show('An issue occurred, please try again.') + Toast.show(`An issue occurred, please try again.`) } - }, [toggle, onToggleFollow]) + } - if (state === FollowState.Unknown) { + const onPressUnfollow = async () => { + if (!profile.viewer?.following) { + return + } + try { + await unfollowMutation.mutateAsync({ + did: profile.did, + followUri: profile.viewer?.following, + }) + onToggleFollow?.(true) + } catch (e: any) { + Toast.show(`An issue occurred, please try again.`) + } + } + + if (!profile.viewer) { return } - return ( -