Profile cleanup (react-query refactor) (#1891)
* Only fetch profile tab content when focused * Fix keys * Add missing behaviors to post tabs * Delete old profile mobx model
This commit is contained in:
Paul Frazee
GitHub
parent
47204d9551
commit
0501c2be77
7 changed files with 60 additions and 327 deletions
|
|
@ -1,306 +0,0 @@
|
|||
import {makeAutoObservable, runInAction} from 'mobx'
|
||||
import {
|
||||
AtUri,
|
||||
ComAtprotoLabelDefs,
|
||||
AppBskyGraphDefs,
|
||||
AppBskyActorGetProfile as GetProfile,
|
||||
AppBskyActorProfile,
|
||||
RichText,
|
||||
moderateProfile,
|
||||
ProfileModeration,
|
||||
} from '@atproto/api'
|
||||
import {RootStoreModel} from '../root-store'
|
||||
import * as apilib from 'lib/api/index'
|
||||
import {cleanError} from 'lib/strings/errors'
|
||||
import {FollowState} from '../cache/my-follows'
|
||||
import {Image as RNImage} from 'react-native-image-crop-picker'
|
||||
import {track} from 'lib/analytics/analytics'
|
||||
import {logger} from '#/logger'
|
||||
|
||||
export class ProfileViewerModel {
|
||||
muted?: boolean
|
||||
mutedByList?: AppBskyGraphDefs.ListViewBasic
|
||||
following?: string
|
||||
followedBy?: string
|
||||
blockedBy?: boolean
|
||||
blocking?: string
|
||||
blockingByList?: AppBskyGraphDefs.ListViewBasic;
|
||||
[key: string]: unknown
|
||||
|
||||
constructor() {
|
||||
makeAutoObservable(this)
|
||||
}
|
||||
}
|
||||
|
||||
export class ProfileModel {
|
||||
// state
|
||||
isLoading = false
|
||||
isRefreshing = false
|
||||
hasLoaded = false
|
||||
error = ''
|
||||
params: GetProfile.QueryParams
|
||||
|
||||
// data
|
||||
did: string = ''
|
||||
handle: string = ''
|
||||
creator: string = ''
|
||||
displayName?: string = ''
|
||||
description?: string = ''
|
||||
avatar?: string = ''
|
||||
banner?: string = ''
|
||||
followersCount: number = 0
|
||||
followsCount: number = 0
|
||||
postsCount: number = 0
|
||||
labels?: ComAtprotoLabelDefs.Label[] = undefined
|
||||
viewer = new ProfileViewerModel();
|
||||
[key: string]: unknown
|
||||
|
||||
// added data
|
||||
descriptionRichText?: RichText = new RichText({text: ''})
|
||||
|
||||
constructor(
|
||||
public rootStore: RootStoreModel,
|
||||
params: GetProfile.QueryParams,
|
||||
) {
|
||||
makeAutoObservable(
|
||||
this,
|
||||
{
|
||||
rootStore: false,
|
||||
params: false,
|
||||
},
|
||||
{autoBind: true},
|
||||
)
|
||||
this.params = params
|
||||
}
|
||||
|
||||
get hasContent() {
|
||||
return this.did !== ''
|
||||
}
|
||||
|
||||
get hasError() {
|
||||
return this.error !== ''
|
||||
}
|
||||
|
||||
get isEmpty() {
|
||||
return this.hasLoaded && !this.hasContent
|
||||
}
|
||||
|
||||
get moderation(): ProfileModeration {
|
||||
return moderateProfile(this, this.rootStore.preferences.moderationOpts)
|
||||
}
|
||||
|
||||
// public api
|
||||
// =
|
||||
|
||||
async setup() {
|
||||
const precache = await this.rootStore.profiles.cache.get(this.params.actor)
|
||||
if (precache) {
|
||||
await this._loadWithCache(precache)
|
||||
} else {
|
||||
await this._load()
|
||||
}
|
||||
}
|
||||
|
||||
async refresh() {
|
||||
await this._load(true)
|
||||
}
|
||||
|
||||
async toggleFollowing() {
|
||||
if (!this.rootStore.me.did) {
|
||||
throw new Error('Not logged in')
|
||||
}
|
||||
|
||||
const follows = this.rootStore.me.follows
|
||||
const followUri =
|
||||
(await follows.fetchFollowState(this.did)) === FollowState.Following
|
||||
? follows.getFollowUri(this.did)
|
||||
: undefined
|
||||
|
||||
// guard against this view getting out of sync with the follows cache
|
||||
if (followUri !== this.viewer.following) {
|
||||
this.viewer.following = followUri
|
||||
return
|
||||
}
|
||||
|
||||
if (followUri) {
|
||||
// unfollow
|
||||
await this.rootStore.agent.deleteFollow(followUri)
|
||||
runInAction(() => {
|
||||
this.followersCount--
|
||||
this.viewer.following = undefined
|
||||
this.rootStore.me.follows.removeFollow(this.did)
|
||||
})
|
||||
track('Profile:Unfollow', {
|
||||
username: this.handle,
|
||||
})
|
||||
} else {
|
||||
// follow
|
||||
const res = await this.rootStore.agent.follow(this.did)
|
||||
runInAction(() => {
|
||||
this.followersCount++
|
||||
this.viewer.following = res.uri
|
||||
this.rootStore.me.follows.hydrate(this.did, this)
|
||||
})
|
||||
track('Profile:Follow', {
|
||||
username: this.handle,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
async updateProfile(
|
||||
updates: AppBskyActorProfile.Record,
|
||||
newUserAvatar: RNImage | undefined | null,
|
||||
newUserBanner: RNImage | undefined | null,
|
||||
) {
|
||||
await this.rootStore.agent.upsertProfile(async existing => {
|
||||
existing = existing || {}
|
||||
existing.displayName = updates.displayName
|
||||
existing.description = updates.description
|
||||
if (newUserAvatar) {
|
||||
const res = await apilib.uploadBlob(
|
||||
this.rootStore.agent,
|
||||
newUserAvatar.path,
|
||||
newUserAvatar.mime,
|
||||
)
|
||||
existing.avatar = res.data.blob
|
||||
} else if (newUserAvatar === null) {
|
||||
existing.avatar = undefined
|
||||
}
|
||||
if (newUserBanner) {
|
||||
const res = await apilib.uploadBlob(
|
||||
this.rootStore.agent,
|
||||
newUserBanner.path,
|
||||
newUserBanner.mime,
|
||||
)
|
||||
existing.banner = res.data.blob
|
||||
} else if (newUserBanner === null) {
|
||||
existing.banner = undefined
|
||||
}
|
||||
return existing
|
||||
})
|
||||
await this.rootStore.me.load()
|
||||
await this.refresh()
|
||||
}
|
||||
|
||||
async muteAccount() {
|
||||
await this.rootStore.agent.mute(this.did)
|
||||
this.viewer.muted = true
|
||||
await this.refresh()
|
||||
}
|
||||
|
||||
async unmuteAccount() {
|
||||
await this.rootStore.agent.unmute(this.did)
|
||||
this.viewer.muted = false
|
||||
await this.refresh()
|
||||
}
|
||||
|
||||
async blockAccount() {
|
||||
const res = await this.rootStore.agent.app.bsky.graph.block.create(
|
||||
{
|
||||
repo: this.rootStore.me.did,
|
||||
},
|
||||
{
|
||||
subject: this.did,
|
||||
createdAt: new Date().toISOString(),
|
||||
},
|
||||
)
|
||||
this.viewer.blocking = res.uri
|
||||
await this.refresh()
|
||||
}
|
||||
|
||||
async unblockAccount() {
|
||||
if (!this.viewer.blocking) {
|
||||
return
|
||||
}
|
||||
const {rkey} = new AtUri(this.viewer.blocking)
|
||||
await this.rootStore.agent.app.bsky.graph.block.delete({
|
||||
repo: this.rootStore.me.did,
|
||||
rkey,
|
||||
})
|
||||
this.viewer.blocking = undefined
|
||||
await this.refresh()
|
||||
}
|
||||
|
||||
// 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 profile', {error: err})
|
||||
}
|
||||
}
|
||||
|
||||
// loader functions
|
||||
// =
|
||||
|
||||
async _load(isRefreshing = false) {
|
||||
this._xLoading(isRefreshing)
|
||||
try {
|
||||
const res = await this.rootStore.agent.getProfile(this.params)
|
||||
this.rootStore.profiles.overwrite(this.params.actor, res)
|
||||
if (res.data.handle) {
|
||||
this.rootStore.handleResolutions.cache.set(
|
||||
res.data.handle,
|
||||
res.data.did,
|
||||
)
|
||||
}
|
||||
this._replaceAll(res)
|
||||
await this._createRichText()
|
||||
this._xIdle()
|
||||
} catch (e: any) {
|
||||
this._xIdle(e)
|
||||
}
|
||||
}
|
||||
|
||||
async _loadWithCache(precache: GetProfile.Response) {
|
||||
// use cached value
|
||||
this._replaceAll(precache)
|
||||
await this._createRichText()
|
||||
this._xIdle()
|
||||
|
||||
// fetch latest
|
||||
try {
|
||||
const res = await this.rootStore.agent.getProfile(this.params)
|
||||
this.rootStore.profiles.overwrite(this.params.actor, res) // cache invalidation
|
||||
this._replaceAll(res)
|
||||
await this._createRichText()
|
||||
} catch (e: any) {
|
||||
this._xIdle(e)
|
||||
}
|
||||
}
|
||||
|
||||
_replaceAll(res: GetProfile.Response) {
|
||||
this.did = res.data.did
|
||||
this.handle = res.data.handle
|
||||
this.displayName = res.data.displayName
|
||||
this.description = res.data.description
|
||||
this.avatar = res.data.avatar
|
||||
this.banner = res.data.banner
|
||||
this.followersCount = res.data.followersCount || 0
|
||||
this.followsCount = res.data.followsCount || 0
|
||||
this.postsCount = res.data.postsCount || 0
|
||||
this.labels = res.data.labels
|
||||
if (res.data.viewer) {
|
||||
Object.assign(this.viewer, res.data.viewer)
|
||||
}
|
||||
this.rootStore.me.follows.hydrate(this.did, res.data)
|
||||
}
|
||||
|
||||
async _createRichText() {
|
||||
this.descriptionRichText = new RichText(
|
||||
{text: this.description || ''},
|
||||
{cleanNewlines: true},
|
||||
)
|
||||
await this.descriptionRichText.detectFacets(this.rootStore.agent)
|
||||
}
|
||||
}
|
||||
|
|
@ -7,8 +7,12 @@ type RQPageParam = string | undefined
|
|||
|
||||
export const RQKEY = (did: string) => ['profile-feedgens', did]
|
||||
|
||||
export function useProfileFeedgensQuery(did: string) {
|
||||
export function useProfileFeedgensQuery(
|
||||
did: string,
|
||||
opts?: {enabled?: boolean},
|
||||
) {
|
||||
const {agent} = useSession()
|
||||
const enabled = opts?.enabled !== false
|
||||
return useInfiniteQuery<
|
||||
AppBskyFeedGetActorFeeds.OutputSchema,
|
||||
Error,
|
||||
|
|
@ -27,5 +31,6 @@ export function useProfileFeedgensQuery(did: string) {
|
|||
},
|
||||
initialPageParam: undefined,
|
||||
getNextPageParam: lastPage => lastPage.cursor,
|
||||
enabled,
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,8 +7,9 @@ type RQPageParam = string | undefined
|
|||
|
||||
export const RQKEY = (did: string) => ['profile-lists', did]
|
||||
|
||||
export function useProfileListsQuery(did: string) {
|
||||
export function useProfileListsQuery(did: string, opts?: {enabled?: boolean}) {
|
||||
const {agent} = useSession()
|
||||
const enabled = opts?.enabled !== false
|
||||
return useInfiniteQuery<
|
||||
AppBskyGraphGetLists.OutputSchema,
|
||||
Error,
|
||||
|
|
@ -27,5 +28,6 @@ export function useProfileListsQuery(did: string) {
|
|||
},
|
||||
initialPageParam: undefined,
|
||||
getNextPageParam: lastPage => lastPage.cursor,
|
||||
enabled,
|
||||
})
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue