Refactor lists to use new queries (#1875)
* Refactor lists queries to react-query * Delete old lists-list model * Implement list, list-members, and list-memberships react-queries * Update CreateOrEditList modal * First pass at my-follows and actor-autocomplete queries * Update ListAddUserModal to use new queries, change to ListAddRemoveUsersModal * Update UserAddRemoveLists modal * Remove old TODO * Fix indent, autocomplete query * Add a todo --------- Co-authored-by: Eric Bailey <git@esb.lol>
This commit is contained in:
Paul Frazee
GitHub
parent
05b728fffc
commit
d9e0a927c1
25 changed files with 1303 additions and 1545 deletions
|
|
@ -1,11 +1,10 @@
|
|||
import React from 'react'
|
||||
import {AppBskyActorDefs, ModerationUI} from '@atproto/api'
|
||||
import {AppBskyActorDefs, AppBskyGraphDefs, ModerationUI} from '@atproto/api'
|
||||
import {StyleProp, ViewStyle, DeviceEventEmitter} from 'react-native'
|
||||
import {Image as RNImage} from 'react-native-image-crop-picker'
|
||||
|
||||
import {ProfileModel} from '#/state/models/content/profile'
|
||||
import {ImageModel} from '#/state/models/media/image'
|
||||
import {ListModel} from '#/state/models/content/list'
|
||||
import {GalleryModel} from '#/state/models/media/gallery'
|
||||
|
||||
export interface ConfirmModal {
|
||||
|
|
@ -55,7 +54,7 @@ export type ReportModal = {
|
|||
export interface CreateOrEditListModal {
|
||||
name: 'create-or-edit-list'
|
||||
purpose?: string
|
||||
list?: ListModel
|
||||
list?: AppBskyGraphDefs.ListView
|
||||
onSave?: (uri: string) => void
|
||||
}
|
||||
|
||||
|
|
@ -67,10 +66,13 @@ export interface UserAddRemoveListsModal {
|
|||
onRemove?: (listUri: string) => void
|
||||
}
|
||||
|
||||
export interface ListAddUserModal {
|
||||
name: 'list-add-user'
|
||||
list: ListModel
|
||||
onAdd?: (profile: AppBskyActorDefs.ProfileViewBasic) => void
|
||||
export interface ListAddRemoveUsersModal {
|
||||
name: 'list-add-remove-users'
|
||||
list: AppBskyGraphDefs.ListView
|
||||
onChange?: (
|
||||
type: 'add' | 'remove',
|
||||
profile: AppBskyActorDefs.ProfileViewBasic,
|
||||
) => void
|
||||
}
|
||||
|
||||
export interface EditImageModal {
|
||||
|
|
@ -184,7 +186,7 @@ export type Modal =
|
|||
// Lists
|
||||
| CreateOrEditListModal
|
||||
| UserAddRemoveListsModal
|
||||
| ListAddUserModal
|
||||
| ListAddRemoveUsersModal
|
||||
|
||||
// Posts
|
||||
| AltTextImageModal
|
||||
|
|
|
|||
|
|
@ -1,130 +0,0 @@
|
|||
import {makeAutoObservable} from 'mobx'
|
||||
import {AtUri, AppBskyGraphListitem} from '@atproto/api'
|
||||
import {runInAction} from 'mobx'
|
||||
import {RootStoreModel} from '../root-store'
|
||||
|
||||
const PAGE_SIZE = 100
|
||||
interface Membership {
|
||||
uri: string
|
||||
value: AppBskyGraphListitem.Record
|
||||
}
|
||||
|
||||
interface ListitemRecord {
|
||||
uri: string
|
||||
value: AppBskyGraphListitem.Record
|
||||
}
|
||||
|
||||
interface ListitemListResponse {
|
||||
cursor?: string
|
||||
records: ListitemRecord[]
|
||||
}
|
||||
|
||||
export class ListMembershipModel {
|
||||
// data
|
||||
memberships: Membership[] = []
|
||||
|
||||
constructor(public rootStore: RootStoreModel, public subject: string) {
|
||||
makeAutoObservable(
|
||||
this,
|
||||
{
|
||||
rootStore: false,
|
||||
},
|
||||
{autoBind: true},
|
||||
)
|
||||
}
|
||||
|
||||
// public api
|
||||
// =
|
||||
|
||||
async fetch() {
|
||||
// NOTE
|
||||
// this approach to determining list membership is too inefficient to work at any scale
|
||||
// it needs to be replaced with server side list membership queries
|
||||
// -prf
|
||||
let cursor
|
||||
let records: ListitemRecord[] = []
|
||||
for (let i = 0; i < 100; i++) {
|
||||
const res: ListitemListResponse =
|
||||
await this.rootStore.agent.app.bsky.graph.listitem.list({
|
||||
repo: this.rootStore.me.did,
|
||||
cursor,
|
||||
limit: PAGE_SIZE,
|
||||
})
|
||||
records = records.concat(
|
||||
res.records.filter(record => record.value.subject === this.subject),
|
||||
)
|
||||
cursor = res.cursor
|
||||
if (!cursor) {
|
||||
break
|
||||
}
|
||||
}
|
||||
runInAction(() => {
|
||||
this.memberships = records
|
||||
})
|
||||
}
|
||||
|
||||
getMembership(listUri: string) {
|
||||
return this.memberships.find(m => m.value.list === listUri)
|
||||
}
|
||||
|
||||
isMember(listUri: string) {
|
||||
return !!this.getMembership(listUri)
|
||||
}
|
||||
|
||||
async add(listUri: string) {
|
||||
if (this.isMember(listUri)) {
|
||||
return
|
||||
}
|
||||
const res = await this.rootStore.agent.app.bsky.graph.listitem.create(
|
||||
{
|
||||
repo: this.rootStore.me.did,
|
||||
},
|
||||
{
|
||||
subject: this.subject,
|
||||
list: listUri,
|
||||
createdAt: new Date().toISOString(),
|
||||
},
|
||||
)
|
||||
const {rkey} = new AtUri(res.uri)
|
||||
const record = await this.rootStore.agent.app.bsky.graph.listitem.get({
|
||||
repo: this.rootStore.me.did,
|
||||
rkey,
|
||||
})
|
||||
runInAction(() => {
|
||||
this.memberships = this.memberships.concat([record])
|
||||
})
|
||||
}
|
||||
|
||||
async remove(listUri: string) {
|
||||
const membership = this.getMembership(listUri)
|
||||
if (!membership) {
|
||||
return
|
||||
}
|
||||
const {rkey} = new AtUri(membership.uri)
|
||||
await this.rootStore.agent.app.bsky.graph.listitem.delete({
|
||||
repo: this.rootStore.me.did,
|
||||
rkey,
|
||||
})
|
||||
runInAction(() => {
|
||||
this.memberships = this.memberships.filter(m => m.value.list !== listUri)
|
||||
})
|
||||
}
|
||||
|
||||
async updateTo(
|
||||
uris: string[],
|
||||
): Promise<{added: string[]; removed: string[]}> {
|
||||
const added = []
|
||||
const removed = []
|
||||
for (const uri of uris) {
|
||||
await this.add(uri)
|
||||
added.push(uri)
|
||||
}
|
||||
for (const membership of this.memberships) {
|
||||
if (!uris.includes(membership.value.list)) {
|
||||
await this.remove(membership.value.list)
|
||||
removed.push(membership.value.list)
|
||||
}
|
||||
}
|
||||
return {added, removed}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,508 +0,0 @@
|
|||
import {makeAutoObservable, runInAction} from 'mobx'
|
||||
import {
|
||||
AtUri,
|
||||
AppBskyActorDefs,
|
||||
AppBskyGraphGetList as GetList,
|
||||
AppBskyGraphDefs as GraphDefs,
|
||||
AppBskyGraphList,
|
||||
AppBskyGraphListitem,
|
||||
RichText,
|
||||
} from '@atproto/api'
|
||||
import {Image as RNImage} from 'react-native-image-crop-picker'
|
||||
import chunk from 'lodash.chunk'
|
||||
import {RootStoreModel} from '../root-store'
|
||||
import * as apilib from 'lib/api/index'
|
||||
import {cleanError} from 'lib/strings/errors'
|
||||
import {bundleAsync} from 'lib/async/bundle'
|
||||
import {track} from 'lib/analytics/analytics'
|
||||
import {until} from 'lib/async/until'
|
||||
import {logger} from '#/logger'
|
||||
|
||||
const PAGE_SIZE = 30
|
||||
|
||||
interface ListitemRecord {
|
||||
uri: string
|
||||
value: AppBskyGraphListitem.Record
|
||||
}
|
||||
|
||||
interface ListitemListResponse {
|
||||
cursor?: string
|
||||
records: ListitemRecord[]
|
||||
}
|
||||
|
||||
export class ListModel {
|
||||
// state
|
||||
isLoading = false
|
||||
isRefreshing = false
|
||||
hasLoaded = false
|
||||
error = ''
|
||||
loadMoreError = ''
|
||||
hasMore = true
|
||||
loadMoreCursor?: string
|
||||
|
||||
// data
|
||||
data: GraphDefs.ListView | null = null
|
||||
items: GraphDefs.ListItemView[] = []
|
||||
descriptionRT: RichText | null = null
|
||||
|
||||
static async createList(
|
||||
rootStore: RootStoreModel,
|
||||
{
|
||||
purpose,
|
||||
name,
|
||||
description,
|
||||
avatar,
|
||||
}: {
|
||||
purpose: string
|
||||
name: string
|
||||
description: string
|
||||
avatar: RNImage | null | undefined
|
||||
},
|
||||
) {
|
||||
if (
|
||||
purpose !== 'app.bsky.graph.defs#curatelist' &&
|
||||
purpose !== 'app.bsky.graph.defs#modlist'
|
||||
) {
|
||||
throw new Error('Invalid list purpose: must be curatelist or modlist')
|
||||
}
|
||||
const record: AppBskyGraphList.Record = {
|
||||
purpose,
|
||||
name,
|
||||
description,
|
||||
avatar: undefined,
|
||||
createdAt: new Date().toISOString(),
|
||||
}
|
||||
if (avatar) {
|
||||
const blobRes = await apilib.uploadBlob(
|
||||
rootStore,
|
||||
avatar.path,
|
||||
avatar.mime,
|
||||
)
|
||||
record.avatar = blobRes.data.blob
|
||||
}
|
||||
const res = await rootStore.agent.app.bsky.graph.list.create(
|
||||
{
|
||||
repo: rootStore.me.did,
|
||||
},
|
||||
record,
|
||||
)
|
||||
|
||||
// wait for the appview to update
|
||||
await until(
|
||||
5, // 5 tries
|
||||
1e3, // 1s delay between tries
|
||||
(v: GetList.Response, _e: any) => {
|
||||
return typeof v?.data?.list.uri === 'string'
|
||||
},
|
||||
() =>
|
||||
rootStore.agent.app.bsky.graph.getList({
|
||||
list: res.uri,
|
||||
limit: 1,
|
||||
}),
|
||||
)
|
||||
return res
|
||||
}
|
||||
|
||||
constructor(public rootStore: RootStoreModel, public uri: string) {
|
||||
makeAutoObservable(
|
||||
this,
|
||||
{
|
||||
rootStore: false,
|
||||
},
|
||||
{autoBind: true},
|
||||
)
|
||||
}
|
||||
|
||||
get hasContent() {
|
||||
return this.items.length > 0
|
||||
}
|
||||
|
||||
get hasError() {
|
||||
return this.error !== ''
|
||||
}
|
||||
|
||||
get isEmpty() {
|
||||
return this.hasLoaded && !this.hasContent
|
||||
}
|
||||
|
||||
get isCuratelist() {
|
||||
return this.data?.purpose === 'app.bsky.graph.defs#curatelist'
|
||||
}
|
||||
|
||||
get isModlist() {
|
||||
return this.data?.purpose === 'app.bsky.graph.defs#modlist'
|
||||
}
|
||||
|
||||
get isOwner() {
|
||||
return this.data?.creator.did === this.rootStore.me.did
|
||||
}
|
||||
|
||||
get isBlocking() {
|
||||
return !!this.data?.viewer?.blocked
|
||||
}
|
||||
|
||||
get isMuting() {
|
||||
return !!this.data?.viewer?.muted
|
||||
}
|
||||
|
||||
get isPinned() {
|
||||
return this.rootStore.preferences.isPinnedFeed(this.uri)
|
||||
}
|
||||
|
||||
get creatorDid() {
|
||||
return this.data?.creator.did
|
||||
}
|
||||
|
||||
getMembership(did: string) {
|
||||
return this.items.find(item => item.subject.did === did)
|
||||
}
|
||||
|
||||
isMember(did: string) {
|
||||
return !!this.getMembership(did)
|
||||
}
|
||||
|
||||
// public api
|
||||
// =
|
||||
|
||||
async refresh() {
|
||||
return this.loadMore(true)
|
||||
}
|
||||
|
||||
loadMore = bundleAsync(async (replace: boolean = false) => {
|
||||
if (!replace && !this.hasMore) {
|
||||
return
|
||||
}
|
||||
this._xLoading(replace)
|
||||
try {
|
||||
await this._resolveUri()
|
||||
const res = await this.rootStore.agent.app.bsky.graph.getList({
|
||||
list: this.uri,
|
||||
limit: PAGE_SIZE,
|
||||
cursor: replace ? undefined : this.loadMoreCursor,
|
||||
})
|
||||
if (replace) {
|
||||
this._replaceAll(res)
|
||||
} else {
|
||||
this._appendAll(res)
|
||||
}
|
||||
this._xIdle()
|
||||
} catch (e: any) {
|
||||
this._xIdle(replace ? e : undefined, !replace ? e : undefined)
|
||||
}
|
||||
})
|
||||
|
||||
async loadAll() {
|
||||
for (let i = 0; i < 1000; i++) {
|
||||
if (!this.hasMore) {
|
||||
break
|
||||
}
|
||||
await this.loadMore()
|
||||
}
|
||||
}
|
||||
|
||||
async updateMetadata({
|
||||
name,
|
||||
description,
|
||||
avatar,
|
||||
}: {
|
||||
name: string
|
||||
description: string
|
||||
avatar: RNImage | null | undefined
|
||||
}) {
|
||||
if (!this.data) {
|
||||
return
|
||||
}
|
||||
if (!this.isOwner) {
|
||||
throw new Error('Cannot edit this list')
|
||||
}
|
||||
await this._resolveUri()
|
||||
|
||||
// get the current record
|
||||
const {rkey} = new AtUri(this.uri)
|
||||
const {value: record} = await this.rootStore.agent.app.bsky.graph.list.get({
|
||||
repo: this.rootStore.me.did,
|
||||
rkey,
|
||||
})
|
||||
|
||||
// update the fields
|
||||
record.name = name
|
||||
record.description = description
|
||||
if (avatar) {
|
||||
const blobRes = await apilib.uploadBlob(
|
||||
this.rootStore,
|
||||
avatar.path,
|
||||
avatar.mime,
|
||||
)
|
||||
record.avatar = blobRes.data.blob
|
||||
} else if (avatar === null) {
|
||||
record.avatar = undefined
|
||||
}
|
||||
return await this.rootStore.agent.com.atproto.repo.putRecord({
|
||||
repo: this.rootStore.me.did,
|
||||
collection: 'app.bsky.graph.list',
|
||||
rkey,
|
||||
record,
|
||||
})
|
||||
}
|
||||
|
||||
async delete() {
|
||||
if (!this.data) {
|
||||
return
|
||||
}
|
||||
await this._resolveUri()
|
||||
|
||||
// fetch all the listitem records that belong to this list
|
||||
let cursor
|
||||
let records: ListitemRecord[] = []
|
||||
for (let i = 0; i < 100; i++) {
|
||||
const res: ListitemListResponse =
|
||||
await this.rootStore.agent.app.bsky.graph.listitem.list({
|
||||
repo: this.rootStore.me.did,
|
||||
cursor,
|
||||
limit: PAGE_SIZE,
|
||||
})
|
||||
records = records.concat(
|
||||
res.records.filter(record => record.value.list === this.uri),
|
||||
)
|
||||
cursor = res.cursor
|
||||
if (!cursor) {
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// batch delete the list and listitem records
|
||||
const createDel = (uri: string) => {
|
||||
const urip = new AtUri(uri)
|
||||
return {
|
||||
$type: 'com.atproto.repo.applyWrites#delete',
|
||||
collection: urip.collection,
|
||||
rkey: urip.rkey,
|
||||
}
|
||||
}
|
||||
const writes = records
|
||||
.map(record => createDel(record.uri))
|
||||
.concat([createDel(this.uri)])
|
||||
|
||||
// apply in chunks
|
||||
for (const writesChunk of chunk(writes, 10)) {
|
||||
await this.rootStore.agent.com.atproto.repo.applyWrites({
|
||||
repo: this.rootStore.me.did,
|
||||
writes: writesChunk,
|
||||
})
|
||||
}
|
||||
|
||||
/* dont await */ this.rootStore.preferences.removeSavedFeed(this.uri)
|
||||
this.rootStore.emitListDeleted(this.uri)
|
||||
}
|
||||
|
||||
async addMember(profile: AppBskyActorDefs.ProfileViewBasic) {
|
||||
if (this.isMember(profile.did)) {
|
||||
return
|
||||
}
|
||||
await this.rootStore.agent.app.bsky.graph.listitem.create(
|
||||
{
|
||||
repo: this.rootStore.me.did,
|
||||
},
|
||||
{
|
||||
subject: profile.did,
|
||||
list: this.uri,
|
||||
createdAt: new Date().toISOString(),
|
||||
},
|
||||
)
|
||||
runInAction(() => {
|
||||
this.items = this.items.concat([
|
||||
{_reactKey: profile.did, subject: profile},
|
||||
])
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Just adds to local cache; used to reflect changes affected elsewhere
|
||||
*/
|
||||
cacheAddMember(profile: AppBskyActorDefs.ProfileViewBasic) {
|
||||
if (!this.isMember(profile.did)) {
|
||||
this.items = this.items.concat([
|
||||
{_reactKey: profile.did, subject: profile},
|
||||
])
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Just removes from local cache; used to reflect changes affected elsewhere
|
||||
*/
|
||||
cacheRemoveMember(profile: AppBskyActorDefs.ProfileViewBasic) {
|
||||
if (this.isMember(profile.did)) {
|
||||
this.items = this.items.filter(item => item.subject.did !== profile.did)
|
||||
}
|
||||
}
|
||||
|
||||
async pin() {
|
||||
try {
|
||||
await this.rootStore.preferences.addPinnedFeed(this.uri)
|
||||
} catch (error) {
|
||||
logger.error('Failed to pin feed', {error})
|
||||
} finally {
|
||||
track('CustomFeed:Pin', {
|
||||
name: this.data?.name || '',
|
||||
uri: this.uri,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
async togglePin() {
|
||||
if (!this.isPinned) {
|
||||
track('CustomFeed:Pin', {
|
||||
name: this.data?.name || '',
|
||||
uri: this.uri,
|
||||
})
|
||||
return this.rootStore.preferences.addPinnedFeed(this.uri)
|
||||
} else {
|
||||
track('CustomFeed:Unpin', {
|
||||
name: this.data?.name || '',
|
||||
uri: this.uri,
|
||||
})
|
||||
// TODO TEMPORARY
|
||||
// lists are temporarily piggybacking on the saved/pinned feeds preferences
|
||||
// we'll eventually replace saved feeds with the bookmarks API
|
||||
// until then, we need to unsave lists instead of just unpin them
|
||||
// -prf
|
||||
// return this.rootStore.preferences.removePinnedFeed(this.uri)
|
||||
return this.rootStore.preferences.removeSavedFeed(this.uri)
|
||||
}
|
||||
}
|
||||
|
||||
async mute() {
|
||||
if (!this.data) {
|
||||
return
|
||||
}
|
||||
await this._resolveUri()
|
||||
await this.rootStore.agent.muteModList(this.data.uri)
|
||||
track('Lists:Mute')
|
||||
runInAction(() => {
|
||||
if (this.data) {
|
||||
const d = this.data
|
||||
this.data = {...d, viewer: {...(d.viewer || {}), muted: true}}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async unmute() {
|
||||
if (!this.data) {
|
||||
return
|
||||
}
|
||||
await this._resolveUri()
|
||||
await this.rootStore.agent.unmuteModList(this.data.uri)
|
||||
track('Lists:Unmute')
|
||||
runInAction(() => {
|
||||
if (this.data) {
|
||||
const d = this.data
|
||||
this.data = {...d, viewer: {...(d.viewer || {}), muted: false}}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async block() {
|
||||
if (!this.data) {
|
||||
return
|
||||
}
|
||||
await this._resolveUri()
|
||||
const res = await this.rootStore.agent.blockModList(this.data.uri)
|
||||
track('Lists:Block')
|
||||
runInAction(() => {
|
||||
if (this.data) {
|
||||
const d = this.data
|
||||
this.data = {...d, viewer: {...(d.viewer || {}), blocked: res.uri}}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async unblock() {
|
||||
if (!this.data || !this.data.viewer?.blocked) {
|
||||
return
|
||||
}
|
||||
await this._resolveUri()
|
||||
await this.rootStore.agent.unblockModList(this.data.uri)
|
||||
track('Lists:Unblock')
|
||||
runInAction(() => {
|
||||
if (this.data) {
|
||||
const d = this.data
|
||||
this.data = {...d, viewer: {...(d.viewer || {}), blocked: undefined}}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Attempt to load more again after a failure
|
||||
*/
|
||||
async retryLoadMore() {
|
||||
this.loadMoreError = ''
|
||||
this.hasMore = true
|
||||
return this.loadMore()
|
||||
}
|
||||
|
||||
// state transitions
|
||||
// =
|
||||
|
||||
_xLoading(isRefreshing = false) {
|
||||
this.isLoading = true
|
||||
this.isRefreshing = isRefreshing
|
||||
this.error = ''
|
||||
}
|
||||
|
||||
_xIdle(err?: any, loadMoreErr?: any) {
|
||||
this.isLoading = false
|
||||
this.isRefreshing = false
|
||||
this.hasLoaded = true
|
||||
this.error = cleanError(err)
|
||||
this.loadMoreError = cleanError(loadMoreErr)
|
||||
if (err) {
|
||||
logger.error('Failed to fetch user items', {error: err})
|
||||
}
|
||||
if (loadMoreErr) {
|
||||
logger.error('Failed to fetch user items', {
|
||||
error: loadMoreErr,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// helper functions
|
||||
// =
|
||||
|
||||
async _resolveUri() {
|
||||
const urip = new AtUri(this.uri)
|
||||
if (!urip.host.startsWith('did:')) {
|
||||
try {
|
||||
urip.host = await apilib.resolveName(this.rootStore, urip.host)
|
||||
} catch (e: any) {
|
||||
runInAction(() => {
|
||||
this.error = e.toString()
|
||||
})
|
||||
}
|
||||
}
|
||||
runInAction(() => {
|
||||
this.uri = urip.toString()
|
||||
})
|
||||
}
|
||||
|
||||
_replaceAll(res: GetList.Response) {
|
||||
this.items = []
|
||||
this._appendAll(res)
|
||||
}
|
||||
|
||||
_appendAll(res: GetList.Response) {
|
||||
this.loadMoreCursor = res.data.cursor
|
||||
this.hasMore = !!this.loadMoreCursor
|
||||
this.data = res.data.list
|
||||
this.items = this.items.concat(
|
||||
res.data.items.map(item => ({...item, _reactKey: item.subject.did})),
|
||||
)
|
||||
if (this.data.description) {
|
||||
this.descriptionRT = new RichText({
|
||||
text: this.data.description,
|
||||
facets: (this.data.descriptionFacets || [])?.slice(),
|
||||
})
|
||||
} else {
|
||||
this.descriptionRT = null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -158,7 +158,7 @@ export class ProfileModel {
|
|||
existing.description = updates.description
|
||||
if (newUserAvatar) {
|
||||
const res = await apilib.uploadBlob(
|
||||
this.rootStore,
|
||||
this.rootStore.agent,
|
||||
newUserAvatar.path,
|
||||
newUserAvatar.mime,
|
||||
)
|
||||
|
|
@ -168,7 +168,7 @@ export class ProfileModel {
|
|||
}
|
||||
if (newUserBanner) {
|
||||
const res = await apilib.uploadBlob(
|
||||
this.rootStore,
|
||||
this.rootStore.agent,
|
||||
newUserBanner.path,
|
||||
newUserBanner.mime,
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,244 +0,0 @@
|
|||
import {makeAutoObservable} from 'mobx'
|
||||
import {AppBskyGraphDefs as GraphDefs} from '@atproto/api'
|
||||
import {RootStoreModel} from '../root-store'
|
||||
import {cleanError} from 'lib/strings/errors'
|
||||
import {bundleAsync} from 'lib/async/bundle'
|
||||
import {accumulate} from 'lib/async/accumulate'
|
||||
import {logger} from '#/logger'
|
||||
|
||||
const PAGE_SIZE = 30
|
||||
|
||||
export class ListsListModel {
|
||||
// state
|
||||
isLoading = false
|
||||
isRefreshing = false
|
||||
hasLoaded = false
|
||||
error = ''
|
||||
loadMoreError = ''
|
||||
hasMore = true
|
||||
loadMoreCursor?: string
|
||||
|
||||
// data
|
||||
lists: GraphDefs.ListView[] = []
|
||||
|
||||
constructor(
|
||||
public rootStore: RootStoreModel,
|
||||
public source: 'mine' | 'my-curatelists' | 'my-modlists' | string,
|
||||
) {
|
||||
makeAutoObservable(
|
||||
this,
|
||||
{
|
||||
rootStore: false,
|
||||
},
|
||||
{autoBind: true},
|
||||
)
|
||||
}
|
||||
|
||||
get hasContent() {
|
||||
return this.lists.length > 0
|
||||
}
|
||||
|
||||
get hasError() {
|
||||
return this.error !== ''
|
||||
}
|
||||
|
||||
get isEmpty() {
|
||||
return this.hasLoaded && !this.hasContent
|
||||
}
|
||||
|
||||
get curatelists() {
|
||||
return this.lists.filter(
|
||||
list => list.purpose === 'app.bsky.graph.defs#curatelist',
|
||||
)
|
||||
}
|
||||
|
||||
get isCuratelistsEmpty() {
|
||||
return this.hasLoaded && this.curatelists.length === 0
|
||||
}
|
||||
|
||||
get modlists() {
|
||||
return this.lists.filter(
|
||||
list => list.purpose === 'app.bsky.graph.defs#modlist',
|
||||
)
|
||||
}
|
||||
|
||||
get isModlistsEmpty() {
|
||||
return this.hasLoaded && this.modlists.length === 0
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes posts from the feed upon deletion.
|
||||
*/
|
||||
onListDeleted(uri: string) {
|
||||
this.lists = this.lists.filter(l => l.uri !== uri)
|
||||
}
|
||||
|
||||
// public api
|
||||
// =
|
||||
|
||||
/**
|
||||
* Register any event listeners. Returns a cleanup function.
|
||||
*/
|
||||
registerListeners() {
|
||||
const sub = this.rootStore.onListDeleted(this.onListDeleted.bind(this))
|
||||
return () => sub.remove()
|
||||
}
|
||||
|
||||
async refresh() {
|
||||
return this.loadMore(true)
|
||||
}
|
||||
|
||||
loadMore = bundleAsync(async (replace: boolean = false) => {
|
||||
if (!replace && !this.hasMore) {
|
||||
return
|
||||
}
|
||||
this._xLoading(replace)
|
||||
try {
|
||||
let cursor: string | undefined
|
||||
let lists: GraphDefs.ListView[] = []
|
||||
if (
|
||||
this.source === 'mine' ||
|
||||
this.source === 'my-curatelists' ||
|
||||
this.source === 'my-modlists'
|
||||
) {
|
||||
const promises = [
|
||||
accumulate(cursor =>
|
||||
this.rootStore.agent.app.bsky.graph
|
||||
.getLists({
|
||||
actor: this.rootStore.me.did,
|
||||
cursor,
|
||||
limit: 50,
|
||||
})
|
||||
.then(res => ({cursor: res.data.cursor, items: res.data.lists})),
|
||||
),
|
||||
]
|
||||
if (this.source === 'my-modlists') {
|
||||
promises.push(
|
||||
accumulate(cursor =>
|
||||
this.rootStore.agent.app.bsky.graph
|
||||
.getListMutes({
|
||||
cursor,
|
||||
limit: 50,
|
||||
})
|
||||
.then(res => ({
|
||||
cursor: res.data.cursor,
|
||||
items: res.data.lists,
|
||||
})),
|
||||
),
|
||||
)
|
||||
promises.push(
|
||||
accumulate(cursor =>
|
||||
this.rootStore.agent.app.bsky.graph
|
||||
.getListBlocks({
|
||||
cursor,
|
||||
limit: 50,
|
||||
})
|
||||
.then(res => ({
|
||||
cursor: res.data.cursor,
|
||||
items: res.data.lists,
|
||||
})),
|
||||
),
|
||||
)
|
||||
}
|
||||
const resultset = await Promise.all(promises)
|
||||
for (const res of resultset) {
|
||||
for (let list of res) {
|
||||
if (
|
||||
this.source === 'my-curatelists' &&
|
||||
list.purpose !== 'app.bsky.graph.defs#curatelist'
|
||||
) {
|
||||
continue
|
||||
}
|
||||
if (
|
||||
this.source === 'my-modlists' &&
|
||||
list.purpose !== 'app.bsky.graph.defs#modlist'
|
||||
) {
|
||||
continue
|
||||
}
|
||||
if (!lists.find(l => l.uri === list.uri)) {
|
||||
lists.push(list)
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const res = await this.rootStore.agent.app.bsky.graph.getLists({
|
||||
actor: this.source,
|
||||
limit: PAGE_SIZE,
|
||||
cursor: replace ? undefined : this.loadMoreCursor,
|
||||
})
|
||||
lists = res.data.lists
|
||||
cursor = res.data.cursor
|
||||
}
|
||||
if (replace) {
|
||||
this._replaceAll({lists, cursor})
|
||||
} else {
|
||||
this._appendAll({lists, cursor})
|
||||
}
|
||||
this._xIdle()
|
||||
} catch (e: any) {
|
||||
this._xIdle(replace ? e : undefined, !replace ? e : undefined)
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* Attempt to load more again after a failure
|
||||
*/
|
||||
async retryLoadMore() {
|
||||
this.loadMoreError = ''
|
||||
this.hasMore = true
|
||||
return this.loadMore()
|
||||
}
|
||||
|
||||
// state transitions
|
||||
// =
|
||||
|
||||
_xLoading(isRefreshing = false) {
|
||||
this.isLoading = true
|
||||
this.isRefreshing = isRefreshing
|
||||
this.error = ''
|
||||
}
|
||||
|
||||
_xIdle(err?: any, loadMoreErr?: any) {
|
||||
this.isLoading = false
|
||||
this.isRefreshing = false
|
||||
this.hasLoaded = true
|
||||
this.error = cleanError(err)
|
||||
this.loadMoreError = cleanError(loadMoreErr)
|
||||
if (err) {
|
||||
logger.error('Failed to fetch user lists', {error: err})
|
||||
}
|
||||
if (loadMoreErr) {
|
||||
logger.error('Failed to fetch user lists', {
|
||||
error: loadMoreErr,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// helper functions
|
||||
// =
|
||||
|
||||
_replaceAll({
|
||||
lists,
|
||||
cursor,
|
||||
}: {
|
||||
lists: GraphDefs.ListView[]
|
||||
cursor: string | undefined
|
||||
}) {
|
||||
this.lists = []
|
||||
this._appendAll({lists, cursor})
|
||||
}
|
||||
|
||||
_appendAll({
|
||||
lists,
|
||||
cursor,
|
||||
}: {
|
||||
lists: GraphDefs.ListView[]
|
||||
cursor: string | undefined
|
||||
}) {
|
||||
this.loadMoreCursor = cursor
|
||||
this.hasMore = !!this.loadMoreCursor
|
||||
this.lists = this.lists.concat(
|
||||
lists.map(list => ({...list, _reactKey: list.uri})),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,6 @@ import {makeAutoObservable, runInAction} from 'mobx'
|
|||
import {RootStoreModel} from '../root-store'
|
||||
import {ProfileModel} from '../content/profile'
|
||||
import {ActorFeedsModel} from '../lists/actor-feeds'
|
||||
import {ListsListModel} from '../lists/lists-list'
|
||||
import {logger} from '#/logger'
|
||||
|
||||
export enum Sections {
|
||||
|
|
|
|||
66
src/state/queries/actor-autocomplete.ts
Normal file
66
src/state/queries/actor-autocomplete.ts
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
import {AppBskyActorDefs} from '@atproto/api'
|
||||
import {useQuery} from '@tanstack/react-query'
|
||||
import {useSession} from '../session'
|
||||
import {useMyFollowsQuery} from './my-follows'
|
||||
|
||||
export const RQKEY = (prefix: string) => ['actor-autocomplete', prefix]
|
||||
|
||||
export function useActorAutocompleteQuery(prefix: string) {
|
||||
const {agent} = useSession()
|
||||
const {data: follows, isFetching} = useMyFollowsQuery()
|
||||
return useQuery<AppBskyActorDefs.ProfileViewBasic[]>({
|
||||
queryKey: RQKEY(prefix || ''),
|
||||
async queryFn() {
|
||||
const res = await agent.searchActorsTypeahead({
|
||||
term: prefix,
|
||||
limit: 8,
|
||||
})
|
||||
return computeSuggestions(prefix, follows, res.data.actors)
|
||||
},
|
||||
enabled: !isFetching && !!prefix,
|
||||
})
|
||||
}
|
||||
|
||||
function computeSuggestions(
|
||||
prefix: string,
|
||||
follows: AppBskyActorDefs.ProfileViewBasic[] = [],
|
||||
searched: AppBskyActorDefs.ProfileViewBasic[] = [],
|
||||
) {
|
||||
if (prefix) {
|
||||
const items: AppBskyActorDefs.ProfileViewBasic[] = []
|
||||
for (const item of follows) {
|
||||
if (prefixMatch(prefix, item)) {
|
||||
items.push(item)
|
||||
}
|
||||
if (items.length >= 8) {
|
||||
break
|
||||
}
|
||||
}
|
||||
for (const item of searched) {
|
||||
if (!items.find(item2 => item2.handle === item.handle)) {
|
||||
items.push({
|
||||
did: item.did,
|
||||
handle: item.handle,
|
||||
displayName: item.displayName,
|
||||
avatar: item.avatar,
|
||||
})
|
||||
}
|
||||
}
|
||||
return items
|
||||
} else {
|
||||
return follows
|
||||
}
|
||||
}
|
||||
|
||||
function prefixMatch(
|
||||
prefix: string,
|
||||
info: AppBskyActorDefs.ProfileViewBasic,
|
||||
): boolean {
|
||||
if (info.handle.includes(prefix)) {
|
||||
return true
|
||||
}
|
||||
if (info.displayName?.toLocaleLowerCase().includes(prefix)) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
31
src/state/queries/list-members.ts
Normal file
31
src/state/queries/list-members.ts
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import {AppBskyGraphGetList} 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 = (uri: string) => ['list-members', uri]
|
||||
|
||||
export function useListMembersQuery(uri: string) {
|
||||
const {agent} = useSession()
|
||||
return useInfiniteQuery<
|
||||
AppBskyGraphGetList.OutputSchema,
|
||||
Error,
|
||||
InfiniteData<AppBskyGraphGetList.OutputSchema>,
|
||||
QueryKey,
|
||||
RQPageParam
|
||||
>({
|
||||
queryKey: RQKEY(uri),
|
||||
async queryFn({pageParam}: {pageParam: RQPageParam}) {
|
||||
const res = await agent.app.bsky.graph.getList({
|
||||
list: uri,
|
||||
limit: PAGE_SIZE,
|
||||
cursor: pageParam,
|
||||
})
|
||||
return res.data
|
||||
},
|
||||
initialPageParam: undefined,
|
||||
getNextPageParam: lastPage => lastPage.cursor,
|
||||
})
|
||||
}
|
||||
190
src/state/queries/list-memberships.ts
Normal file
190
src/state/queries/list-memberships.ts
Normal file
|
|
@ -0,0 +1,190 @@
|
|||
/**
|
||||
* NOTE
|
||||
*
|
||||
* This query is a temporary solution to our lack of server API for
|
||||
* querying user membership in an API. It is extremely inefficient.
|
||||
*
|
||||
* THIS SHOULD ONLY BE USED IN MODALS FOR MODIFYING A USER'S LIST MEMBERSHIP!
|
||||
* Use the list-members query for rendering a list's members.
|
||||
*
|
||||
* It works by fetching *all* of the user's list item records and querying
|
||||
* or manipulating that cache. For users with large lists, it will fall
|
||||
* down completely, so be very conservative about how you use it.
|
||||
*
|
||||
* -prf
|
||||
*/
|
||||
|
||||
import {AtUri} from '@atproto/api'
|
||||
import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
|
||||
import {useSession} from '../session'
|
||||
import {RQKEY as LIST_MEMBERS_RQKEY} from './list-members'
|
||||
|
||||
// sanity limit is SANITY_PAGE_LIMIT*PAGE_SIZE total records
|
||||
const SANITY_PAGE_LIMIT = 1000
|
||||
const PAGE_SIZE = 100
|
||||
// ...which comes 100,000k list members
|
||||
|
||||
export const RQKEY = () => ['list-memberships']
|
||||
|
||||
export interface ListMembersip {
|
||||
membershipUri: string
|
||||
listUri: string
|
||||
actorDid: string
|
||||
}
|
||||
|
||||
/**
|
||||
* This API is dangerous! Read the note above!
|
||||
*/
|
||||
export function useDangerousListMembershipsQuery() {
|
||||
const {agent, currentAccount} = useSession()
|
||||
return useQuery<ListMembersip[]>({
|
||||
queryKey: RQKEY(),
|
||||
async queryFn() {
|
||||
if (!currentAccount) {
|
||||
return []
|
||||
}
|
||||
let cursor
|
||||
let arr: ListMembersip[] = []
|
||||
for (let i = 0; i < SANITY_PAGE_LIMIT; i++) {
|
||||
const res = await agent.app.bsky.graph.listitem.list({
|
||||
repo: currentAccount.did,
|
||||
limit: PAGE_SIZE,
|
||||
cursor,
|
||||
})
|
||||
arr = arr.concat(
|
||||
res.records.map(r => ({
|
||||
membershipUri: r.uri,
|
||||
listUri: r.value.list,
|
||||
actorDid: r.value.subject,
|
||||
})),
|
||||
)
|
||||
cursor = res.cursor
|
||||
if (!cursor) {
|
||||
break
|
||||
}
|
||||
}
|
||||
return arr
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns undefined for pending, false for not a member, and string for a member (the URI of the membership record)
|
||||
*/
|
||||
export function getMembership(
|
||||
memberships: ListMembersip[] | undefined,
|
||||
list: string,
|
||||
actor: string,
|
||||
): string | false | undefined {
|
||||
if (!memberships) {
|
||||
return undefined
|
||||
}
|
||||
const membership = memberships.find(
|
||||
m => m.listUri === list && m.actorDid === actor,
|
||||
)
|
||||
return membership ? membership.membershipUri : false
|
||||
}
|
||||
|
||||
export function useListMembershipAddMutation() {
|
||||
const {agent, currentAccount} = useSession()
|
||||
const queryClient = useQueryClient()
|
||||
return useMutation<
|
||||
{uri: string; cid: string},
|
||||
Error,
|
||||
{listUri: string; actorDid: string}
|
||||
>({
|
||||
mutationFn: async ({listUri, actorDid}) => {
|
||||
if (!currentAccount) {
|
||||
throw new Error('Not logged in')
|
||||
}
|
||||
const res = await agent.app.bsky.graph.listitem.create(
|
||||
{repo: currentAccount.did},
|
||||
{
|
||||
subject: actorDid,
|
||||
list: listUri,
|
||||
createdAt: new Date().toISOString(),
|
||||
},
|
||||
)
|
||||
// TODO
|
||||
// we need to wait for appview to update, but there's not an efficient
|
||||
// query for that, so we use a timeout below
|
||||
// -prf
|
||||
return res
|
||||
},
|
||||
onSuccess(data, variables) {
|
||||
// manually update the cache; a refetch is too expensive
|
||||
let memberships = queryClient.getQueryData<ListMembersip[]>(RQKEY())
|
||||
if (memberships) {
|
||||
memberships = memberships
|
||||
// avoid dups
|
||||
.filter(
|
||||
m =>
|
||||
!(
|
||||
m.actorDid === variables.actorDid &&
|
||||
m.listUri === variables.listUri
|
||||
),
|
||||
)
|
||||
.concat([
|
||||
{
|
||||
...variables,
|
||||
membershipUri: data.uri,
|
||||
},
|
||||
])
|
||||
queryClient.setQueryData(RQKEY(), memberships)
|
||||
}
|
||||
// invalidate the members queries (used for rendering the listings)
|
||||
// use a timeout to wait for the appview (see above)
|
||||
setTimeout(() => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: LIST_MEMBERS_RQKEY(variables.listUri),
|
||||
})
|
||||
}, 1e3)
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export function useListMembershipRemoveMutation() {
|
||||
const {agent, currentAccount} = useSession()
|
||||
const queryClient = useQueryClient()
|
||||
return useMutation<
|
||||
void,
|
||||
Error,
|
||||
{listUri: string; actorDid: string; membershipUri: string}
|
||||
>({
|
||||
mutationFn: async ({membershipUri}) => {
|
||||
if (!currentAccount) {
|
||||
throw new Error('Not logged in')
|
||||
}
|
||||
const membershipUrip = new AtUri(membershipUri)
|
||||
await agent.app.bsky.graph.listitem.delete({
|
||||
repo: currentAccount.did,
|
||||
rkey: membershipUrip.rkey,
|
||||
})
|
||||
// TODO
|
||||
// we need to wait for appview to update, but there's not an efficient
|
||||
// query for that, so we use a timeout below
|
||||
// -prf
|
||||
},
|
||||
onSuccess(data, variables) {
|
||||
// manually update the cache; a refetch is too expensive
|
||||
let memberships = queryClient.getQueryData<ListMembersip[]>(RQKEY())
|
||||
if (memberships) {
|
||||
memberships = memberships.filter(
|
||||
m =>
|
||||
!(
|
||||
m.actorDid === variables.actorDid &&
|
||||
m.listUri === variables.listUri
|
||||
),
|
||||
)
|
||||
queryClient.setQueryData(RQKEY(), memberships)
|
||||
}
|
||||
// invalidate the members queries (used for rendering the listings)
|
||||
// use a timeout to wait for the appview (see above)
|
||||
setTimeout(() => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: LIST_MEMBERS_RQKEY(variables.listUri),
|
||||
})
|
||||
}, 1e3)
|
||||
},
|
||||
})
|
||||
}
|
||||
285
src/state/queries/list.ts
Normal file
285
src/state/queries/list.ts
Normal file
|
|
@ -0,0 +1,285 @@
|
|||
import {
|
||||
AtUri,
|
||||
AppBskyGraphGetList,
|
||||
AppBskyGraphList,
|
||||
AppBskyGraphDefs,
|
||||
BskyAgent,
|
||||
} from '@atproto/api'
|
||||
import {Image as RNImage} from 'react-native-image-crop-picker'
|
||||
import {useQuery, useMutation, useQueryClient} from '@tanstack/react-query'
|
||||
import chunk from 'lodash.chunk'
|
||||
import {useSession} from '../session'
|
||||
import {invalidate as invalidateMyLists} from './my-lists'
|
||||
import {RQKEY as PROFILE_LISTS_RQKEY} from './profile-lists'
|
||||
import {uploadBlob} from '#/lib/api'
|
||||
import {until} from '#/lib/async/until'
|
||||
|
||||
export const RQKEY = (uri: string) => ['list', uri]
|
||||
|
||||
export function useListQuery(uri?: string) {
|
||||
const {agent} = useSession()
|
||||
return useQuery<AppBskyGraphDefs.ListView, Error>({
|
||||
queryKey: RQKEY(uri || ''),
|
||||
async queryFn() {
|
||||
if (!uri) {
|
||||
throw new Error('URI not provided')
|
||||
}
|
||||
const res = await agent.app.bsky.graph.getList({
|
||||
list: uri,
|
||||
limit: 1,
|
||||
})
|
||||
return res.data.list
|
||||
},
|
||||
enabled: !!uri,
|
||||
})
|
||||
}
|
||||
|
||||
export interface ListCreateMutateParams {
|
||||
purpose: string
|
||||
name: string
|
||||
description: string
|
||||
avatar: RNImage | null | undefined
|
||||
}
|
||||
export function useListCreateMutation() {
|
||||
const {agent, currentAccount} = useSession()
|
||||
const queryClient = useQueryClient()
|
||||
return useMutation<{uri: string; cid: string}, Error, ListCreateMutateParams>(
|
||||
{
|
||||
async mutationFn({purpose, name, description, avatar}) {
|
||||
if (!currentAccount) {
|
||||
throw new Error('Not logged in')
|
||||
}
|
||||
if (
|
||||
purpose !== 'app.bsky.graph.defs#curatelist' &&
|
||||
purpose !== 'app.bsky.graph.defs#modlist'
|
||||
) {
|
||||
throw new Error('Invalid list purpose: must be curatelist or modlist')
|
||||
}
|
||||
const record: AppBskyGraphList.Record = {
|
||||
purpose,
|
||||
name,
|
||||
description,
|
||||
avatar: undefined,
|
||||
createdAt: new Date().toISOString(),
|
||||
}
|
||||
if (avatar) {
|
||||
const blobRes = await uploadBlob(agent, avatar.path, avatar.mime)
|
||||
record.avatar = blobRes.data.blob
|
||||
}
|
||||
const res = await agent.app.bsky.graph.list.create(
|
||||
{
|
||||
repo: currentAccount.did,
|
||||
},
|
||||
record,
|
||||
)
|
||||
|
||||
// wait for the appview to update
|
||||
await whenAppViewReady(
|
||||
agent,
|
||||
res.uri,
|
||||
(v: AppBskyGraphGetList.Response) => {
|
||||
return typeof v?.data?.list.uri === 'string'
|
||||
},
|
||||
)
|
||||
return res
|
||||
},
|
||||
onSuccess() {
|
||||
invalidateMyLists(queryClient)
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: PROFILE_LISTS_RQKEY(currentAccount!.did),
|
||||
})
|
||||
},
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
export interface ListMetadataMutateParams {
|
||||
uri: string
|
||||
name: string
|
||||
description: string
|
||||
avatar: RNImage | null | undefined
|
||||
}
|
||||
export function useListMetadataMutation() {
|
||||
const {agent, currentAccount} = useSession()
|
||||
const queryClient = useQueryClient()
|
||||
return useMutation<
|
||||
{uri: string; cid: string},
|
||||
Error,
|
||||
ListMetadataMutateParams
|
||||
>({
|
||||
async mutationFn({uri, name, description, avatar}) {
|
||||
const {hostname, rkey} = new AtUri(uri)
|
||||
if (!currentAccount) {
|
||||
throw new Error('Not logged in')
|
||||
}
|
||||
if (currentAccount.did !== hostname) {
|
||||
throw new Error('You do not own this list')
|
||||
}
|
||||
|
||||
// get the current record
|
||||
const {value: record} = await agent.app.bsky.graph.list.get({
|
||||
repo: currentAccount.did,
|
||||
rkey,
|
||||
})
|
||||
|
||||
// update the fields
|
||||
record.name = name
|
||||
record.description = description
|
||||
if (avatar) {
|
||||
const blobRes = await uploadBlob(agent, avatar.path, avatar.mime)
|
||||
record.avatar = blobRes.data.blob
|
||||
} else if (avatar === null) {
|
||||
record.avatar = undefined
|
||||
}
|
||||
const res = (
|
||||
await agent.com.atproto.repo.putRecord({
|
||||
repo: currentAccount.did,
|
||||
collection: 'app.bsky.graph.list',
|
||||
rkey,
|
||||
record,
|
||||
})
|
||||
).data
|
||||
|
||||
// wait for the appview to update
|
||||
await whenAppViewReady(
|
||||
agent,
|
||||
res.uri,
|
||||
(v: AppBskyGraphGetList.Response) => {
|
||||
const list = v.data.list
|
||||
return (
|
||||
list.name === record.name && list.description === record.description
|
||||
)
|
||||
},
|
||||
)
|
||||
return res
|
||||
},
|
||||
onSuccess(data, variables) {
|
||||
invalidateMyLists(queryClient)
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: PROFILE_LISTS_RQKEY(currentAccount!.did),
|
||||
})
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: RQKEY(variables.uri),
|
||||
})
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export function useListDeleteMutation() {
|
||||
const {agent, currentAccount} = useSession()
|
||||
const queryClient = useQueryClient()
|
||||
return useMutation<void, Error, {uri: string}>({
|
||||
mutationFn: async ({uri}) => {
|
||||
if (!currentAccount) {
|
||||
return
|
||||
}
|
||||
// fetch all the listitem records that belong to this list
|
||||
let cursor
|
||||
let listitemRecordUris: string[] = []
|
||||
for (let i = 0; i < 100; i++) {
|
||||
const res = await agent.app.bsky.graph.listitem.list({
|
||||
repo: currentAccount.did,
|
||||
cursor,
|
||||
limit: 100,
|
||||
})
|
||||
listitemRecordUris = listitemRecordUris.concat(
|
||||
res.records
|
||||
.filter(record => record.value.list === uri)
|
||||
.map(record => record.uri),
|
||||
)
|
||||
cursor = res.cursor
|
||||
if (!cursor) {
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// batch delete the list and listitem records
|
||||
const createDel = (uri: string) => {
|
||||
const urip = new AtUri(uri)
|
||||
return {
|
||||
$type: 'com.atproto.repo.applyWrites#delete',
|
||||
collection: urip.collection,
|
||||
rkey: urip.rkey,
|
||||
}
|
||||
}
|
||||
const writes = listitemRecordUris
|
||||
.map(uri => createDel(uri))
|
||||
.concat([createDel(uri)])
|
||||
|
||||
// apply in chunks
|
||||
for (const writesChunk of chunk(writes, 10)) {
|
||||
await agent.com.atproto.repo.applyWrites({
|
||||
repo: currentAccount.did,
|
||||
writes: writesChunk,
|
||||
})
|
||||
}
|
||||
|
||||
// wait for the appview to update
|
||||
await whenAppViewReady(agent, uri, (v: AppBskyGraphGetList.Response) => {
|
||||
return !v?.success
|
||||
})
|
||||
},
|
||||
onSuccess() {
|
||||
invalidateMyLists(queryClient)
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: PROFILE_LISTS_RQKEY(currentAccount!.did),
|
||||
})
|
||||
// TODO!! /* dont await */ this.rootStore.preferences.removeSavedFeed(this.uri)
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export function useListMuteMutation() {
|
||||
const {agent} = useSession()
|
||||
const queryClient = useQueryClient()
|
||||
return useMutation<void, Error, {uri: string; mute: boolean}>({
|
||||
mutationFn: async ({uri, mute}) => {
|
||||
if (mute) {
|
||||
await agent.muteModList(uri)
|
||||
} else {
|
||||
await agent.unmuteModList(uri)
|
||||
}
|
||||
},
|
||||
onSuccess(data, variables) {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: RQKEY(variables.uri),
|
||||
})
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export function useListBlockMutation() {
|
||||
const {agent} = useSession()
|
||||
const queryClient = useQueryClient()
|
||||
return useMutation<void, Error, {uri: string; block: boolean}>({
|
||||
mutationFn: async ({uri, block}) => {
|
||||
if (block) {
|
||||
await agent.blockModList(uri)
|
||||
} else {
|
||||
await agent.unblockModList(uri)
|
||||
}
|
||||
},
|
||||
onSuccess(data, variables) {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: RQKEY(variables.uri),
|
||||
})
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
async function whenAppViewReady(
|
||||
agent: BskyAgent,
|
||||
uri: string,
|
||||
fn: (res: AppBskyGraphGetList.Response) => boolean,
|
||||
) {
|
||||
await until(
|
||||
5, // 5 tries
|
||||
1e3, // 1s delay between tries
|
||||
fn,
|
||||
() =>
|
||||
agent.app.bsky.graph.getList({
|
||||
list: uri,
|
||||
limit: 1,
|
||||
}),
|
||||
)
|
||||
}
|
||||
43
src/state/queries/my-follows.ts
Normal file
43
src/state/queries/my-follows.ts
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
import {AppBskyActorDefs} from '@atproto/api'
|
||||
import {useQuery} from '@tanstack/react-query'
|
||||
import {useSession} from '../session'
|
||||
|
||||
// sanity limit is SANITY_PAGE_LIMIT*PAGE_SIZE total records
|
||||
const SANITY_PAGE_LIMIT = 1000
|
||||
const PAGE_SIZE = 100
|
||||
// ...which comes 10,000k follows
|
||||
|
||||
export const RQKEY = () => ['my-follows']
|
||||
|
||||
export function useMyFollowsQuery() {
|
||||
const {agent, currentAccount} = useSession()
|
||||
return useQuery<AppBskyActorDefs.ProfileViewBasic[]>({
|
||||
queryKey: RQKEY(),
|
||||
async queryFn() {
|
||||
if (!currentAccount) {
|
||||
return []
|
||||
}
|
||||
let cursor
|
||||
let arr: AppBskyActorDefs.ProfileViewBasic[] = []
|
||||
for (let i = 0; i < SANITY_PAGE_LIMIT; i++) {
|
||||
const res = await agent.getFollows({
|
||||
actor: currentAccount.did,
|
||||
cursor,
|
||||
limit: PAGE_SIZE,
|
||||
})
|
||||
// TODO
|
||||
// res.data.follows = res.data.follows.filter(
|
||||
// profile =>
|
||||
// !moderateProfile(profile, this.rootStore.preferences.moderationOpts)
|
||||
// .account.filter,
|
||||
// )
|
||||
arr = arr.concat(res.data.follows)
|
||||
if (!res.data.cursor) {
|
||||
break
|
||||
}
|
||||
cursor = res.data.cursor
|
||||
}
|
||||
return arr
|
||||
},
|
||||
})
|
||||
}
|
||||
89
src/state/queries/my-lists.ts
Normal file
89
src/state/queries/my-lists.ts
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
import {AppBskyGraphDefs} from '@atproto/api'
|
||||
import {useQuery, QueryClient} from '@tanstack/react-query'
|
||||
import {accumulate} from 'lib/async/accumulate'
|
||||
import {useSession} from '../session'
|
||||
|
||||
export type MyListsFilter = 'all' | 'curate' | 'mod'
|
||||
export const RQKEY = (filter: MyListsFilter) => ['my-lists', filter]
|
||||
|
||||
export function useMyListsQuery(filter: MyListsFilter) {
|
||||
const {agent, currentAccount} = useSession()
|
||||
return useQuery<AppBskyGraphDefs.ListView[]>({
|
||||
queryKey: RQKEY(filter),
|
||||
async queryFn() {
|
||||
let lists: AppBskyGraphDefs.ListView[] = []
|
||||
const promises = [
|
||||
accumulate(cursor =>
|
||||
agent.app.bsky.graph
|
||||
.getLists({
|
||||
actor: currentAccount!.did,
|
||||
cursor,
|
||||
limit: 50,
|
||||
})
|
||||
.then(res => ({
|
||||
cursor: res.data.cursor,
|
||||
items: res.data.lists,
|
||||
})),
|
||||
),
|
||||
]
|
||||
if (filter === 'all' || filter === 'mod') {
|
||||
promises.push(
|
||||
accumulate(cursor =>
|
||||
agent.app.bsky.graph
|
||||
.getListMutes({
|
||||
cursor,
|
||||
limit: 50,
|
||||
})
|
||||
.then(res => ({
|
||||
cursor: res.data.cursor,
|
||||
items: res.data.lists,
|
||||
})),
|
||||
),
|
||||
)
|
||||
promises.push(
|
||||
accumulate(cursor =>
|
||||
agent.app.bsky.graph
|
||||
.getListBlocks({
|
||||
cursor,
|
||||
limit: 50,
|
||||
})
|
||||
.then(res => ({
|
||||
cursor: res.data.cursor,
|
||||
items: res.data.lists,
|
||||
})),
|
||||
),
|
||||
)
|
||||
}
|
||||
const resultset = await Promise.all(promises)
|
||||
for (const res of resultset) {
|
||||
for (let list of res) {
|
||||
if (
|
||||
filter === 'curate' &&
|
||||
list.purpose !== 'app.bsky.graph.defs#curatelist'
|
||||
) {
|
||||
continue
|
||||
}
|
||||
if (
|
||||
filter === 'mod' &&
|
||||
list.purpose !== 'app.bsky.graph.defs#modlist'
|
||||
) {
|
||||
continue
|
||||
}
|
||||
if (!lists.find(l => l.uri === list.uri)) {
|
||||
lists.push(list)
|
||||
}
|
||||
}
|
||||
}
|
||||
return lists
|
||||
},
|
||||
enabled: !!currentAccount,
|
||||
})
|
||||
}
|
||||
|
||||
export function invalidate(qc: QueryClient, filter?: MyListsFilter) {
|
||||
if (filter) {
|
||||
qc.invalidateQueries({queryKey: RQKEY(filter)})
|
||||
} else {
|
||||
qc.invalidateQueries({queryKey: ['my-lists']})
|
||||
}
|
||||
}
|
||||
31
src/state/queries/profile-lists.ts
Normal file
31
src/state/queries/profile-lists.ts
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import {AppBskyGraphGetLists} 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-lists', did]
|
||||
|
||||
export function useProfileListsQuery(did: string) {
|
||||
const {agent} = useSession()
|
||||
return useInfiniteQuery<
|
||||
AppBskyGraphGetLists.OutputSchema,
|
||||
Error,
|
||||
InfiniteData<AppBskyGraphGetLists.OutputSchema>,
|
||||
QueryKey,
|
||||
RQPageParam
|
||||
>({
|
||||
queryKey: RQKEY(did),
|
||||
async queryFn({pageParam}: {pageParam: RQPageParam}) {
|
||||
const res = await agent.app.bsky.graph.getLists({
|
||||
actor: did,
|
||||
limit: PAGE_SIZE,
|
||||
cursor: pageParam,
|
||||
})
|
||||
return res.data
|
||||
},
|
||||
initialPageParam: undefined,
|
||||
getNextPageParam: lastPage => lastPage.cursor,
|
||||
})
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue