Implement scene member/memberships listings

src/state/models/members-view.ts

@@ -0,0 +1,110 @@
+import {makeAutoObservable} from 'mobx'
+import * as GetMembers from '../../third-party/api/src/client/types/app/bsky/graph/getMembers'
+import {RootStoreModel} from './root-store'
+
+type Subject = GetMembers.OutputSchema['subject']
+export type MemberItem = GetMembers.OutputSchema['members'][number] & {
+  _reactKey: string
+}
+
+export class MembersViewModel {
+  // state
+  isLoading = false
+  isRefreshing = false
+  hasLoaded = false
+  error = ''
+  params: GetMembers.QueryParams
+
+  // data
+  subject: Subject = {did: '', handle: '', displayName: ''}
+  members: MemberItem[] = []
+
+  constructor(
+    public rootStore: RootStoreModel,
+    params: GetMembers.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 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.getMembers(
+        this.params,
+      )
+      this._replaceAll(res)
+      this._xIdle()
+    } catch (e: any) {
+      this._xIdle(`Failed to load feed: ${e.toString()}`)
+    }
+  }
+
+  private _replaceAll(res: GetMembers.Response) {
+    this.subject.did = res.data.subject.did
+    this.subject.handle = res.data.subject.handle
+    this.subject.displayName = res.data.subject.displayName
+    this.members.length = 0
+    let counter = 0
+    for (const item of res.data.members) {
+      this._append({_reactKey: `item-${counter++}`, ...item})
+    }
+  }
+
+  private _append(item: MemberItem) {
+    this.members.push(item)
+  }
+}

src/state/models/profile-ui.ts

@@ -1,6 +1,8 @@
 import {makeAutoObservable} from 'mobx'
 import {RootStoreModel} from './root-store'
 import {ProfileViewModel} from './profile-view'
+import {MembersViewModel} from './members-view'
+import {MembershipsViewModel} from './memberships-view'
 import {FeedModel} from './feed-view'
 
 export enum Sections {
@@ -21,6 +23,8 @@ export class ProfileUiModel {
   // data
   profile: ProfileViewModel
   feed: FeedModel
+  memberships: MembershipsViewModel
+  members: MembersViewModel
 
   // ui state
   selectedViewIndex = 0
@@ -42,15 +46,23 @@ export class ProfileUiModel {
       author: params.user,
       limit: 10,
     })
+    this.memberships = new MembershipsViewModel(rootStore, {actor: params.user})
+    this.members = new MembersViewModel(rootStore, {actor: params.user})
   }
 
-  get currentView(): FeedModel {
+  get currentView(): FeedModel | MembershipsViewModel | MembersViewModel {
     if (
       this.selectedView === Sections.Posts ||
       this.selectedView === Sections.Trending
     ) {
       return this.feed
     }
+    if (this.selectedView === Sections.Scenes) {
+      return this.memberships
+    }
+    if (this.selectedView === Sections.Members) {
+      return this.members
+    }
     throw new Error(`Invalid selector value: ${this.selectedViewIndex}`)
   }
 
@@ -101,10 +113,25 @@ export class ProfileUiModel {
         .setup()
         .catch(err => console.error('Failed to fetch feed', err)),
     ])
+    if (this.isUser) {
+      await this.memberships
+        .setup()
+        .catch(err => console.error('Failed to fetch members', err))
+    }
+    if (this.isScene) {
+      await this.members
+        .setup()
+        .catch(err => console.error('Failed to fetch members', err))
+    }
   }
 
   async update() {
-    await this.currentView.update()
+    const view = this.currentView
+    if (view instanceof FeedModel) {
+      await view.update()
+    } else {
+      await view.refresh()
+    }
   }
 
   async refresh() {

src/state/models/profile-view.ts

@@ -31,6 +31,7 @@ export class ProfileViewModel {
   description?: string
   followersCount: number = 0
   followsCount: number = 0
+  membersCount: number = 0
   postsCount: number = 0
   myState = new ProfileViewMyStateModel()
 
@@ -140,12 +141,15 @@ export class ProfileViewModel {
   }
 
   private _replaceAll(res: GetProfile.Response) {
+    console.log(res.data)
     this.did = res.data.did
     this.handle = res.data.handle
+    this.actorType = res.data.actorType
     this.displayName = res.data.displayName
     this.description = res.data.description
     this.followersCount = res.data.followersCount
     this.followsCount = res.data.followsCount
+    this.membersCount = res.data.membersCount
     this.postsCount = res.data.postsCount
     if (res.data.myState) {
       Object.assign(this.myState, res.data.myState)