bsky-social-app/src/state/models/profile-view.ts

import {makeAutoObservable, runInAction} from 'mobx'
import {Image as PickedImage} from 'react-native-image-crop-picker'
import {
  AppBskyActorGetProfile as GetProfile,
  AppBskyActorProfile as Profile,
  AppBskySystemDeclRef,
  AppBskyFeedPost,
} from '@atproto/api'
type DeclRef = AppBskySystemDeclRef.Main
type Entity = AppBskyFeedPost.Entity
import {extractEntities} from '../../lib/strings'
import {RootStoreModel} from './root-store'
import * as apilib from '../lib/api'

export const ACTOR_TYPE_USER = 'app.bsky.system.actorUser'

export class ProfileViewMyStateModel {
  follow?: string
  muted?: boolean

  constructor() {
    makeAutoObservable(this)
  }
}

export class ProfileViewModel {
  // state
  isLoading = false
  isRefreshing = false
  hasLoaded = false
  error = ''
  params: GetProfile.QueryParams

  // data
  did: string = ''
  handle: string = ''
  declaration: DeclRef = {
    cid: '',
    actorType: '',
  }
  creator: string = ''
  displayName?: string
  description?: string
  avatar?: string
  banner?: string
  followersCount: number = 0
  followsCount: number = 0
  postsCount: number = 0
  myState = new ProfileViewMyStateModel()

  // added data
  descriptionEntities?: Entity[]

  constructor(
    public rootStore: RootStoreModel,
    params: GetProfile.QueryParams,
  ) {
    makeAutoObservable(
      this,
      {
        rootStore: false,
        params: false,
      },
      {autoBind: true},
    )
    this.params = params
  }

  get hasContent() {
    return this.did !== ''
  }

  get hasError() {
    return this.error !== ''
  }

  get isEmpty() {
    return this.hasLoaded && !this.hasContent
  }

  get isUser() {
    return this.declaration.actorType === ACTOR_TYPE_USER
  }

  // public api
  // =

  async setup() {
    await this._load()
  }

  async refresh() {
    await this._load(true)
  }

  async toggleFollowing() {
    if (!this.rootStore.me.did) {
      throw new Error('Not logged in')
    }
    if (this.myState.follow) {
      await apilib.unfollow(this.rootStore, this.myState.follow)
      runInAction(() => {
        this.followersCount--
        this.myState.follow = undefined
      })
    } else {
      const res = await apilib.follow(
        this.rootStore,
        this.did,
        this.declaration.cid,
      )
      runInAction(() => {
        this.followersCount++
        this.myState.follow = res.uri
      })
    }
  }

  async updateProfile(
    updates: Profile.Record,
    newUserAvatar: PickedImage | undefined,
    newUserBanner: PickedImage | undefined,
  ) {
    if (newUserAvatar) {
      const res = await this.rootStore.api.com.atproto.blob.upload(
        newUserAvatar.path, // this will be special-cased by the fetch monkeypatch in /src/state/lib/api.ts
        {
          encoding: newUserAvatar.mime,
        },
      )
      updates.avatar = {
        cid: res.data.cid,
        mimeType: newUserAvatar.mime,
      }
    }
    if (newUserBanner) {
      const res = await this.rootStore.api.com.atproto.blob.upload(
        newUserBanner.path, // this will be special-cased by the fetch monkeypatch in /src/state/lib/api.ts
        {
          encoding: newUserBanner.mime,
        },
      )
      updates.banner = {
        cid: res.data.cid,
        mimeType: newUserBanner.mime,
      }
    }
    await this.rootStore.api.app.bsky.actor.updateProfile(updates)
    await this.rootStore.me.load()
    await this.refresh()
  }

  async muteAccount() {
    await this.rootStore.api.app.bsky.graph.mute({user: this.did})
    this.myState.muted = true
    await this.refresh()
  }

  async unmuteAccount() {
    await this.rootStore.api.app.bsky.graph.unmute({user: this.did})
    this.myState.muted = false
    await this.refresh()
  }

  // state transitions
  // =

  private _xLoading(isRefreshing = false) {
    this.isLoading = true
    this.isRefreshing = isRefreshing
    this.error = ''
  }

  private _xIdle(err?: any) {
    this.isLoading = false
    this.isRefreshing = false
    this.hasLoaded = true
    this.error = err ? err.toString() : ''
    if (err) {
      this.rootStore.log.error('Failed to fetch profile', err)
    }
  }

  // loader functions
  // =

  private async _load(isRefreshing = false) {
    this._xLoading(isRefreshing)
    try {
      const res = await this.rootStore.api.app.bsky.actor.getProfile(
        this.params,
      )
      this.rootStore.profiles.overwrite(this.params.actor, res) // cache invalidation
      this._replaceAll(res)
      this._xIdle()
    } catch (e: any) {
      this._xIdle(e)
    }
  }

  private _replaceAll(res: GetProfile.Response) {
    this.did = res.data.did
    this.handle = res.data.handle
    Object.assign(this.declaration, res.data.declaration)
    this.creator = res.data.creator
    this.displayName = res.data.displayName
    this.description = res.data.description
    this.avatar = res.data.avatar
    this.banner = res.data.banner
    this.followersCount = res.data.followersCount
    this.followsCount = res.data.followsCount
    this.postsCount = res.data.postsCount
    if (res.data.myState) {
      Object.assign(this.myState, res.data.myState)
    }
    this.descriptionEntities = extractEntities(this.description || '')
  }
}