City.js

city.js

import { decorate, observable, flow, onBecomeObserved, onBecomeUnobserved } from 'mobx'
import { log } from './log'

const APPID = '<secret>'

export class City {
    location
    temperature
    interval

    constructor(location) {
        this.location = location
        // only start data fetching if the temperature property is actually used!
        onBecomeObserved(this, 'temperature', this.resume)
        onBecomeUnobserved(this, 'temperature', this.suspend)
    }

    resume = () => {
        log(`Resuming ${this.location}`)
        this.interval = setInterval(
            () => this.fetchTemperature(),
            5000
        )
    }

    suspend = () => {
        log(`Suspending ${this.location}`)
        this.temperature = undefined
        clearInterval(this.interval)
    }

    // An async flow
    // Note that it works just like async / await, but with different syntax
    fetchTemperature = flow(function*() {
        const res = yield window.fetch(
            `https://api.openweathermap.org/data/2.5/weather?appid=${APPID}&q=${this.location}`
        )
        const json = yield res.json()
        try {
            this.temperature = Math.round(json.main.temp - 273.15)
            log(`Temperature in ${this.location}: ${this.temperature}`)
        } catch (e) {
            log(`Failed to fetch temperature: ${e}`)
        }
    })
}
// Decorate without decorate syntax
decorate(City, {
    location: observable,
    temperature: observable
})