class Subject {
    constructor() {
        this.observers = []
    }
    subscribe(observer) {
        this.observers.push(observer)
    }
    unsubscribe(observer) {
        if (!observer) return

        this.observers = this.observers.filter(el => !this.observers.includes(el))
    }
    notify(data) {
        if (this.observers.length > 0) {
            this.observers.forEach(el => el.update(data))
        }
    }
}

class Observer {
    update() {}
}

class Client extends Observer {
    update(data) {
        this.doSomethingWithIt(data)
    }
    doSomethingWithIt(data) {
        console.log(data, 'This is from client 1')
    }
}


class Client2 extends Observer {
    update(data) {
        this.domeSomethingTotalyDifferent(data)
    }
    domeSomethingTotalyDifferent(data) {
        console.log(data, 'This is from client 2')
    }
}


class State extends Subject {
    constructor() {
        super()
        this._state = {}
    }
    setState(data) {
        this._state = Object.assign(this._state, data)
        this.notify(this._state)
    }

    get state() {
        return this._state
    }
}


const dummyState = { name: 'John Doe' }
const dummyState2 = { name: 'Jane Doe' }

const client = new Client()
const client2 = new Client2()
const state = new State()

state.setState(dummyState)
state.subscribe(client)
state.setState(dummyState)
state.unsubscribe(client)
state.subscribe(client2)
state.setState(dummyState)
state.setState(dummyState2)
state.setState(dummyState)