Firebase value as custom MobX observable

firebase-mobx.ts

import { Atom } from 'mobx'
import * as firebase from 'firebase'

// Custom observable for Firebase value
// see https://mobx.js.org/refguide/extending.html
export class FirebaseWatcher<T> {
  private atom: Atom
  private ref?: firebase.database.Reference
  private _value: T

  get value () {
    if (this.atom.reportObserved()) {
      return this._value
    } else {
      return this.defaultValue
    }
  }

  constructor (public path: string, private defaultValue: T) {
    this._value = defaultValue
    this.atom = new Atom(
      "FirebaseWatcher",
      () => this.connect(),
      () => this.disconnect()
    )
  }

  private connect () {
    this.ref = firebase.database().ref(this.path)
    this.ref.on('value', snapshot => {
      if (snapshot) {
        this._value = snapshot.val()
        this.atom.reportChanged()
      }
    })
  }

  private disconnect () {
    if (this.ref) {
      this.ref.off()
      this.ref = undefined
    }
  }
}

const watcher = new FirebaseWatcher<Foo>('foo', defaultFoo)
autorun(() => {
  console.log(watcher.value)
})