Handle pending invites correctly

src/state/models/get-assertions-view.ts

@@ -0,0 +1,121 @@
+import {makeAutoObservable} from 'mobx'
+import * as GetAssertions from '../../third-party/api/src/client/types/app/bsky/graph/getAssertions'
+import {RootStoreModel} from './root-store'
+
+type ResponseAssertion = GetAssertions.OutputSchema['assertions'][number]
+export type Assertion = ResponseAssertion & {
+  _reactKey: string
+}
+
+export class GetAssertionsView {
+  // state
+  isLoading = false
+  isRefreshing = false
+  hasLoaded = false
+  error = ''
+  params: GetAssertions.QueryParams
+
+  // data
+  assertions: Assertion[] = []
+
+  constructor(
+    public rootStore: RootStoreModel,
+    params: GetAssertions.QueryParams,
+  ) {
+    makeAutoObservable(
+      this,
+      {
+        rootStore: false,
+        params: false,
+      },
+      {autoBind: true},
+    )
+    this.params = params
+  }
+
+  get hasContent() {
+    return this.assertions.length > 0
+  }
+
+  get hasError() {
+    return this.error !== ''
+  }
+
+  get isEmpty() {
+    return this.hasLoaded && !this.hasContent
+  }
+
+  getBySubject(did: string) {
+    return this.assertions.find(assertion => assertion.subject.did === did)
+  }
+
+  get confirmed() {
+    return this.assertions.filter(assertion => !!assertion.confirmation)
+  }
+
+  get unconfirmed() {
+    return this.assertions.filter(assertion => !assertion.confirmation)
+  }
+
+  // public api
+  // =
+
+  async setup() {
+    await this._fetch()
+  }
+
+  async refresh() {
+    await this._fetch(true)
+  }
+
+  async loadMore() {
+    // TODO
+  }
+
+  // state transitions
+  // =
+
+  private _xLoading(isRefreshing = false) {
+    this.isLoading = true
+    this.isRefreshing = isRefreshing
+    this.error = ''
+  }
+
+  private _xIdle(err: string = '') {
+    this.isLoading = false
+    this.isRefreshing = false
+    this.hasLoaded = true
+    this.error = err
+  }
+
+  // loader functions
+  // =
+
+  private async _fetch(isRefreshing = false) {
+    this._xLoading(isRefreshing)
+    try {
+      const res = await this.rootStore.api.app.bsky.graph.getAssertions(
+        this.params,
+      )
+      this._replaceAll(res)
+      this._xIdle()
+    } catch (e: any) {
+      this._xIdle(e.toString())
+    }
+  }
+
+  private _replaceAll(res: GetAssertions.Response) {
+    this.assertions.length = 0
+    let counter = 0
+    for (const item of res.data.assertions) {
+      this._append({
+        _reactKey: `item-${counter++}`,
+        ...item,
+      })
+    }
+  }
+
+  private _append(item: Assertion) {
+    this.assertions.push(item)
+  }
+}

src/state/models/members-view.ts

@@ -46,6 +46,10 @@ export class MembersViewModel {
     return this.hasLoaded && !this.hasContent
   }
 
+  isMember(did: string) {
+    return this.members.find(member => member.did === did)
+  }
+
   // public api
   // =
 

src/state/models/suggested-actors-view.ts

@@ -1,7 +1,6 @@
 import {makeAutoObservable} from 'mobx'
 import * as GetSuggestions from '../../third-party/api/src/client/types/app/bsky/actor/getSuggestions'
 import {RootStoreModel} from './root-store'
-import {Declaration} from './_common'
 
 type ResponseSuggestedActor = GetSuggestions.OutputSchema['actors'][number]
 export type SuggestedActor = ResponseSuggestedActor & {

src/state/models/suggested-invites-view.ts

@@ -1,27 +1,30 @@
 import {makeAutoObservable, runInAction} from 'mobx'
 import {RootStoreModel} from './root-store'
-import {MembersViewModel} from './members-view'
 import {UserFollowsViewModel, FollowItem} from './user-follows-view'
-import {APP_BSKY_SYSTEM} from '../../third-party/api'
+import {GetAssertionsView} from './get-assertions-view'
+import {APP_BSKY_SYSTEM, APP_BSKY_GRAPH} from '../../third-party/api'
 
-export interface SuggestedInvites {
+export interface SuggestedInvitesViewParams {
   sceneDid: string
 }
 
-export class SuggestedInvites {
+export class SuggestedInvitesView {
   // state
   isLoading = false
   isRefreshing = false
   hasLoaded = false
   error = ''
-  params: SuggestedInvites
-  sceneMembersView: MembersViewModel
+  params: SuggestedInvitesViewParams
+  sceneAssertionsView: GetAssertionsView
   myFollowsView: UserFollowsViewModel
 
   // data
   suggestions: FollowItem[] = []
 
-  constructor(public rootStore: RootStoreModel, params: SuggestedInvites) {
+  constructor(
+    public rootStore: RootStoreModel,
+    params: SuggestedInvitesViewParams,
+  ) {
     makeAutoObservable(
       this,
       {
@@ -31,8 +34,9 @@ export class SuggestedInvites {
       {autoBind: true},
     )
     this.params = params
-    this.sceneMembersView = new MembersViewModel(rootStore, {
-      actor: params.sceneDid,
+    this.sceneAssertionsView = new GetAssertionsView(rootStore, {
+      author: params.sceneDid,
+      assertion: APP_BSKY_GRAPH.AssertMember,
     })
     this.myFollowsView = new UserFollowsViewModel(rootStore, {
       user: rootStore.me.did || '',
@@ -51,6 +55,10 @@ export class SuggestedInvites {
     return this.hasLoaded && !this.hasContent
   }
 
+  get unconfirmed() {
+    return this.sceneAssertionsView.unconfirmed
+  }
+
   // public api
   // =
 
@@ -88,7 +96,8 @@ export class SuggestedInvites {
   private async _fetch(isRefreshing = false) {
     this._xLoading(isRefreshing)
     try {
-      await this.sceneMembersView.setup()
+      // TODO need to fetch all!
+      await this.sceneAssertionsView.setup()
     } catch (e) {
       console.error(e)
       this._xIdle(
@@ -112,9 +121,7 @@ export class SuggestedInvites {
       if (follow.declaration.actorType !== APP_BSKY_SYSTEM.ActorUser) {
         continue
       }
-      if (
-        !this.sceneMembersView.members.find(member => member.did === follow.did)
-      ) {
+      if (!this.sceneAssertionsView.getBySubject(follow.did)) {
         newSuggestions.push(follow)
       }
     }