mobx#IReactionDisposer TypeScript Examples

disposers: IReactionDisposer[] = []

private disposers:IReactionDisposer[] = []

private readonly disposers: IReactionDisposer[] = []

private readonly disposers: IReactionDisposer[] = []

private disposers: IReactionDisposer[] = []

componentWillUnmount(): void {
    this.disposers.forEach((dispose: IReactionDisposer) => dispose());
  }

// We need to mount and unmount several reactions (listeners) on componentDidMount/componentWillUnmount
  disposers: IReactionDisposer[] = [];

dirtyReactionDisposer?: IReactionDisposer;

autorunDisposer: IReactionDisposer;

reactionDisposer: IReactionDisposer;

// start observing participants store
  enable() {
    this.updateAll = true

    // track local change
    const localChangeDisposer = autorun(() => {
      const local = participants.local
      this.local = extractPropsFromLocalParticipant(local)

      this.updateAll = true
    })

    // track remote changes
    let oldRemoteParticipants = new Map<string, RemoteParticipant>()
    const remoteChangeDisposer = autorun(() => {
      const newRemoteParticipants = new Map<string, RemoteParticipant>(participants.remote)
      const added = diffMap(newRemoteParticipants, oldRemoteParticipants)
      const removed = diffMap(oldRemoteParticipants, newRemoteParticipants)
      removed.forEach(onRemoveParticipant)
      added.forEach(onAddParticipant)
      oldRemoteParticipants = newRemoteParticipants
      //  priorityLog('prioirty remote chagned:', newRemoteParticipants)
    })

    let oldRemoteContents = new Map<string, Set<JitsiRemoteTrack>>()
    const remoteContentsChangeDisposer = autorun(() => {
      const newRemoteContents = new Map<string, Set<JitsiRemoteTrack>>(contents.tracks.remoteContents)
      const added = diffMap(newRemoteContents, oldRemoteContents)
      const removed = diffMap(oldRemoteContents, newRemoteContents)
      removed.forEach(onRemoveContent)
      added.forEach(onAddContent)
      oldRemoteContents = newRemoteContents
    })

    const remoteDiposers = new Map<string, IReactionDisposer>()
    const onRemoveParticipant = (rp: RemoteParticipant) => {
      const disposer = remoteDiposers.get(rp.id)
      if (disposer === undefined) {
        throw new Error(`Cannot find disposer for remote participant with id: ${rp.id}`)
      }
      disposer()
      this.priorityMaps.forEach(priorityMap => priorityMap.delete(rp.id))
      remoteDiposers.delete(rp.id)
      this.updateSet.add(rp.id)
      priorityLog('onRemoveParticipant:', rp, this.priorityMaps[0])
    }
    const onRemoveContent = (tracks: Set<JitsiRemoteTrack>, id:string) => {
      const disposer = remoteDiposers.get(id)
      if (disposer === undefined) {
        throw new Error(`Cannot find disposer for remote participant with id: ${id}`)
      }
      disposer()
      this.priorityMapForContent.delete(id)
      this.priorityMaps[1].delete(id)
      remoteDiposers.delete(id)
      this.updateSet.add(id)
      priorityLog('onRemoveContent:', id, this.priorityMapForContent)
    }

    const onAddParticipant = (rp: RemoteParticipant) => {
      remoteDiposers.set(rp.id, autorun(() => {
        if (rp.tracks.audio || rp.tracks.avatar) {
          // eslint-disable-next-line @typescript-eslint/no-unused-vars
          const important = rp.physics.onStage || participants.yarnPhones.has(rp.id)
          // eslint-disable-next-line @typescript-eslint/no-unused-vars
          const moved = rp.pose.position
          this.updateSet.add(rp.id)
        }
      }))
      priorityLog('onAddParticipant:', rp, this.priorityMaps[0])
    }
    const onAddContent = (tracks: Set<JitsiRemoteTrack>, id:string) => {
      remoteDiposers.set(id, autorun(() => {
        // tslint:disable-next-line: max-line-length
        //  priorityLog(`prioirty ${id} chagned v=${(rp.tracks.avatar as JitsiRemoteTrack)?.getSSRC()} a=${(rp.tracks.audio as JitsiRemoteTrack)?.getSSRC()}`)
        if (tracks.size) { //  update when number of the tracks changed
          // eslint-disable-next-line @typescript-eslint/no-unused-vars
          const content = contents.find(id) //  or content changed.
          this.updateSet.add((tracks.values().next().value as JitsiRemoteTrack).getParticipantId())
        }
      }))
      priorityLog('onAddContent:', id, this.priorityMapForContent)
    }

    this.disposers = [localChangeDisposer, remoteChangeDisposer, remoteContentsChangeDisposer]
    this._enabled = true
  }