Implement scenes listing in main menu

src/state/models/me.ts

@@ -1,5 +1,6 @@
 import {makeAutoObservable, runInAction} from 'mobx'
 import {RootStoreModel} from './root-store'
+import {MembershipsViewModel} from './memberships-view'
 
 export class MeModel {
   did?: string
@@ -7,6 +8,7 @@ export class MeModel {
   displayName?: string
   description?: string
   notificationCount: number = 0
+  memberships?: MembershipsViewModel
 
   constructor(public rootStore: RootStoreModel) {
     makeAutoObservable(this, {rootStore: false}, {autoBind: true})
@@ -18,6 +20,7 @@ export class MeModel {
     this.displayName = undefined
     this.description = undefined
     this.notificationCount = 0
+    this.memberships = undefined
   }
 
   async load() {
@@ -37,6 +40,10 @@ export class MeModel {
           this.description = ''
         }
       })
+      this.memberships = new MembershipsViewModel(this.rootStore, {
+        actor: this.did,
+      })
+      await this.memberships?.setup()
     } else {
       this.clear()
     }
@@ -48,4 +55,8 @@ export class MeModel {
       this.notificationCount = res.data.count
     })
   }
+
+  async refreshMemberships() {
+    return this.memberships?.refresh()
+  }
 }

src/state/models/memberships-view.ts

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