Add followers and follows list

src/state/models/liked-by-view.ts

@@ -73,7 +73,11 @@ export class LikedByViewModel implements bsky.LikedByView.Response {
   }
 
   async refresh() {
-    await this._refresh()
+    await this._fetch(true)
+  }
+
+  async loadMore() {
+    // TODO
   }
 
   // state transitions
@@ -105,8 +109,8 @@ export class LikedByViewModel implements bsky.LikedByView.Response {
     })
   }
 
-  private async _fetch() {
-    this._xLoading()
+  private async _fetch(isRefreshing = false) {
+    this._xLoading(isRefreshing)
     await new Promise(r => setTimeout(r, 250)) // DEBUG
     try {
       const res = (await this.rootStore.api.mainPds.view(
@@ -120,13 +124,6 @@ export class LikedByViewModel implements bsky.LikedByView.Response {
     }
   }
 
-  private async _refresh() {
-    this._xLoading(true)
-    // TODO: refetch and update items
-    await new Promise(r => setTimeout(r, 250)) // DEBUG
-    this._xIdle()
-  }
-
   private _replaceAll(res: bsky.LikedByView.Response) {
     this.likedBy.length = 0
     let counter = 0

src/state/models/reposted-by-view.ts

@@ -73,7 +73,11 @@ export class RepostedByViewModel implements bsky.RepostedByView.Response {
   }
 
   async refresh() {
-    await this._refresh()
+    await this._fetch(true)
+  }
+
+  async loadMore() {
+    // TODO
   }
 
   // state transitions
@@ -105,8 +109,8 @@ export class RepostedByViewModel implements bsky.RepostedByView.Response {
     })
   }
 
-  private async _fetch() {
-    this._xLoading()
+  private async _fetch(isRefreshing = false) {
+    this._xLoading(isRefreshing)
     await new Promise(r => setTimeout(r, 250)) // DEBUG
     try {
       const res = (await this.rootStore.api.mainPds.view(

src/state/models/user-followers-view.ts

@@ -0,0 +1,111 @@
+import {makeAutoObservable} from 'mobx'
+import {bsky} from '@adxp/mock-api'
+import {RootStoreModel} from './root-store'
+
+type Subject = bsky.UserFollowersView.Response['subject']
+export type FollowerItem =
+  bsky.UserFollowersView.Response['followers'][number] & {_reactKey: string}
+
+export class UserFollowersViewModel implements bsky.UserFollowersView.Response {
+  // state
+  isLoading = false
+  isRefreshing = false
+  hasLoaded = false
+  error = ''
+  params: bsky.UserFollowersView.Params
+
+  // data
+  subject: Subject = {did: '', name: '', displayName: ''}
+  followers: FollowerItem[] = []
+
+  constructor(
+    public rootStore: RootStoreModel,
+    params: bsky.UserFollowersView.Params,
+  ) {
+    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)
+    await new Promise(r => setTimeout(r, 250)) // DEBUG
+    try {
+      const res = (await this.rootStore.api.mainPds.view(
+        'blueskyweb.xyz:UserFollowersView',
+        this.params,
+      )) as bsky.UserFollowersView.Response
+      this._replaceAll(res)
+      this._xIdle()
+    } catch (e: any) {
+      this._xIdle(`Failed to load feed: ${e.toString()}`)
+    }
+  }
+
+  private _replaceAll(res: bsky.UserFollowersView.Response) {
+    this.subject.did = res.subject.did
+    this.subject.name = res.subject.name
+    this.subject.displayName = res.subject.displayName
+    this.followers.length = 0
+    let counter = 0
+    for (const item of res.followers) {
+      this._append({_reactKey: `item-${counter++}`, ...item})
+    }
+  }
+
+  private _append(item: FollowerItem) {
+    this.followers.push(item)
+  }
+}

src/state/models/user-follows-view.ts

@@ -0,0 +1,112 @@
+import {makeAutoObservable} from 'mobx'
+import {bsky} from '@adxp/mock-api'
+import {RootStoreModel} from './root-store'
+
+type Subject = bsky.UserFollowsView.Response['subject']
+export type FollowItem = bsky.UserFollowsView.Response['follows'][number] & {
+  _reactKey: string
+}
+
+export class UserFollowsViewModel implements bsky.UserFollowsView.Response {
+  // state
+  isLoading = false
+  isRefreshing = false
+  hasLoaded = false
+  error = ''
+  params: bsky.UserFollowsView.Params
+
+  // data
+  subject: Subject = {did: '', name: '', displayName: ''}
+  follows: FollowItem[] = []
+
+  constructor(
+    public rootStore: RootStoreModel,
+    params: bsky.UserFollowsView.Params,
+  ) {
+    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)
+    await new Promise(r => setTimeout(r, 250)) // DEBUG
+    try {
+      const res = (await this.rootStore.api.mainPds.view(
+        'blueskyweb.xyz:UserFollowsView',
+        this.params,
+      )) as bsky.UserFollowsView.Response
+      this._replaceAll(res)
+      this._xIdle()
+    } catch (e: any) {
+      this._xIdle(`Failed to load feed: ${e.toString()}`)
+    }
+  }
+
+  private _replaceAll(res: bsky.UserFollowsView.Response) {
+    this.subject.did = res.subject.did
+    this.subject.name = res.subject.name
+    this.subject.displayName = res.subject.displayName
+    this.follows.length = 0
+    let counter = 0
+    for (const item of res.follows) {
+      this._append({_reactKey: `item-${counter++}`, ...item})
+    }
+  }
+
+  private _append(item: FollowItem) {
+    this.follows.push(item)
+  }
+}