How to use the esp-js.ObservationStage function in esp-js

console.log("Buying fruit, quantity: " + event.quantity);
                model.stockCount -= event.quantity;
                eventContext.commit();
            });

        router
            .getEventObservable('model1', 'buyFruitEvent', esp.ObservationStage.committed)
            .subscribe((event, eventContext, model) => {
                // reacting to the buyFruitEvent we check if the shelf quantity requires refilling
                var shouldRefreshFromStore = model.stockCount < 3;
                console.log("Checking if we should refresh from store. Should refresh: " + shouldRefreshFromStore);
                model.shouldRefreshFromStore = shouldRefreshFromStore;
            });

        router
            .getEventObservable('model1', 'buyFruitEvent', esp.ObservationStage.committed)
            .subscribe((event, eventContext, model) => {
                // given we've sold something we flip a dirty flag which could be used by another
                // // periodic event to determine if we should recalculate inventory
                console.log("Flagging inventory recalculate");
                model.shouldRecalculateInventory = true;
            });

        router.publishEvent('model1', 'buyFruitEvent', { quantity: 1 });
        console.log(store.toString()); // Stock count: 9, shouldRefreshFromStore: false, shouldRecalculateInventory: true

        router.publishEvent('model1', 'buyFruitEvent', { quantity: 8 });
        console.log(store.toString()); // Stock count: 1, shouldRefreshFromStore: true, shouldRecalculateInventory: true
        console.log();
    };

console.log("Buying fruit, quantity: " + event.quantity);
                model.stockCount -= event.quantity;
                eventContext.commit();
            });

        router
            .getEventObservable('model1', 'buyFruitEvent', esp.ObservationStage.committed)
            .subscribe((event, eventContext, model) => {
                // reacting to the buyFruitEvent we check if the shelf quantity requires refilling
                var shouldRefreshFromStore = model.stockCount < 3;
                console.log("Checking if we should refresh from store. Should refresh: " + shouldRefreshFromStore);
                model.shouldRefreshFromStore = shouldRefreshFromStore;
            });

        router
            .getEventObservable('model1', 'buyFruitEvent', esp.ObservationStage.committed)
            .subscribe((event, eventContext, model) => {
                // given we've sold something we flip a dirty flag which could be used by another
                // // periodic event to determine if we should recalculate inventory
                console.log("Flagging inventory recalculate");
                model.shouldRecalculateInventory = true;
            });

        router.publishEvent('model1', 'buyFruitEvent', { quantity: 1 });
        console.log(store.toString()); // Stock count: 9, shouldRefreshFromStore: false, shouldRecalculateInventory: true

        router.publishEvent('model1', 'buyFruitEvent', { quantity: 8 });
        console.log(store.toString()); // Stock count: 1, shouldRefreshFromStore: true, shouldRecalculateInventory: true
        console.log();
    };

}
    @esp.observeEvent('MessageSent')
    _observeMessageSent(event, context, model) {
        this._messageService
            .sendMessage(event.text, model.selectedThreadId, model.messageSection.threadName)
            .subscribe(ack => {
                /* ack received from send operation */
            }
        );
    }
    @esp.observeEvent('MessagesReceived')
    _observeMessagesReceived(event, context, model) {
        this._updateMessages(model);
        this.hasChanges = true;
    }
    @esp.observeEvent('ThreadSelected',  esp.ObservationStage.committed)
    _observeThreadSelected(event, context, model) {
        this._updateMessages(model);
        this.threadName = event.threadName;
        this.hasChanges = true;
    };
    _updateMessages(model) {
        var rawMessages = model.rawMessagesByThreadId[model.selectedThreadId];
        var messages = rawMessages.map(rawMessage => {
            return new Message(
                rawMessage.id,
                rawMessage.authorName,
                rawMessage.text,
                new Date(rawMessage.timestamp));
        }).sort(function (a, b) {
            return a.time < b.time ? -1 : a.time > b.time ? 1 : 0;
        });

export default class MessageSection extends esp.DisposableBase {
    constructor(router, messageService) {
        super();
        this._router = router;
        this._messageService = messageService;
        this.sortedMessages = [];
        this.threadName = null;
        this.hasChanges = false;
    }
    initialise() {
        this.addDisposable(this._router.observeEventsOn(this));
    }
    preProcess() {
        this.hasChanges = false;
    }
    @esp.observeEvent('InitEvent', esp.ObservationStage.committed)
    _observeThreadSelected(event, context, model) {
        this._updateMessages(model);
        this.threadName = event.threadName;
        this.hasChanges = true;
    }
    @esp.observeEvent('MessageSent')
    _observeMessageSent(event, context, model) {
        this._messageService
            .sendMessage(event.text, model.selectedThreadId, model.messageSection.threadName)
            .subscribe(ack => {
                /* ack received from send operation */
            }
        );
    }
    @esp.observeEvent('MessagesReceived')
    _observeMessagesReceived(event, context, model) {

var previewStageExample = () => {

        console.log("** preview stage example");

        var router = new esp.Router();

        var store = new FruitStore();
        router.addModel('model1', store);

        router
            .getEventObservable('model1', 'fruitExpiredEvent', esp.ObservationStage.normal)
            .subscribe((event, eventContext, model) => {
                console.log("Setting hasExpired to " + event);
                model.hasExpired = event;
            });

        router
            .getEventObservable('model1', 'buyFruitEvent', esp.ObservationStage.preview)
            .subscribe((event, eventContext, model) => {
                if(model.hasExpired) {
                    console.log("Cancelling buyFruitEvent event as all fruit has expired");
                    eventContext.cancel();
                }
            });

        router
            .getEventObservable('model1', 'buyFruitEvent', esp.ObservationStage.normal)

var previewStageExample = () => {

        console.log("** preview stage example");

        var router = new esp.Router();

        var store = new FruitStore();
        router.addModel('model1', store);

        router
            .getEventObservable('model1', 'fruitExpiredEvent', esp.ObservationStage.normal)
            .subscribe((event, eventContext, model) => {
                console.log("Setting hasExpired to " + event);
                model.hasExpired = event;
            });

        router
            .getEventObservable('model1', 'buyFruitEvent', esp.ObservationStage.preview)
            .subscribe((event, eventContext, model) => {
                if(model.hasExpired) {
                    console.log("Cancelling buyFruitEvent event as all fruit has expired");
                    eventContext.cancel();
                }
            });

        router
            .getEventObservable('model1', 'buyFruitEvent', esp.ObservationStage.normal)

thread.lastMessageTime = messageTime;
                    thread.lastMessageText = rawMessage.text;
                }
            }
            if (thread.id === model.selectedThreadId) {
                thread.isRead = true;
            }
        }
        this.sortedThreads.sort(function (a, b) {
            return a.lastMessageTime > b.lastMessageTime ? -1 : a.lastMessageTime < b.lastMessageTime ? 1 : 0;
        });
        this._updateActiveFlags(model);
        this._updateUnreadCount(model);
        this.hasChanges = true;
    };
    @esp.observeEvent('ThreadSelected', esp.ObservationStage.committed)
    _observeThreadSelected(event, context, model) {
        this.threadsById[model.selectedThreadId].isRead = true;
        this._updateActiveFlags(model);
        this._updateUnreadCount(model);
        this.hasChanges = true;
    };
    _updateActiveFlags(model) {
        for (var i = 0; i < this.sortedThreads.length; i++) {
            var thread = this.sortedThreads[i];
            thread.isActive = thread.id === model.selectedThreadId;
        }
    };
    _updateUnreadCount() {
        var unreadCount = this.sortedThreads.reduce(function (total, thread) { return thread.isRead ? total : total + 1; }, 0);
        this.unreadCount.value = unreadCount;
        this.unreadCount.isVisible = unreadCount > 0;

thread.lastMessageTime = messageTime;
                    thread.lastMessageText = rawMessage.text;
                }
            }
            if (thread.id === model.selectedThreadId) {
                thread.isRead = true;
            }
        }
        this.sortedThreads.sort(function (a, b) {
            return a.lastMessageTime > b.lastMessageTime ? -1 : a.lastMessageTime < b.lastMessageTime ? 1 : 0;
        });
        this._updateActiveFlags(model);
        this._updateUnreadCount(model);
        this.hasChanges = true;
    };
    @esp.observeEvent('ThreadSelected', esp.ObservationStage.committed)
    _observeThreadSelected(event, context, model) {
        this.threadsById[model.selectedThreadId].isRead = true;
        this._updateActiveFlags(model);
        this._updateUnreadCount(model);
        this.hasChanges = true;
    };
    _updateActiveFlags(model) {
        for (var i = 0; i < this.sortedThreads.length; i++) {
            var thread = this.sortedThreads[i];
            thread.isActive = thread.id === model.selectedThreadId;
        }
    };
    _updateUnreadCount() {
        var unreadCount = this.sortedThreads.reduce(function (total, thread) { return thread.isRead ? total : total + 1; }, 0);
        this.unreadCount.value = unreadCount;
        this.unreadCount.isVisible = unreadCount > 0;

ThreadSectionEventProcessor.prototype.observeMessagesReceived = function () {
    this.addDisposable(modelRouter
        .getEventObservable("messagesReceived", esp.ObservationStage.commited)
        .observe(function (model, event) {
            for (var i = 0; i < event.rawMessages.length; i++) {
                var rawMessage = event.rawMessages[i];
                var thread = model.threadSection.threadsById[rawMessage.threadId];
                var messageTime = new Date(rawMessage.timestamp);
                if (thread === undefined) {
                    thread = new entities.Thread(
                        rawMessage.threadId,
                        rawMessage.threadName,
                        messageTime,
                        rawMessage.text);
                    model.threadSection.threadsById[rawMessage.threadId] = thread;
                    model.threadSection.sortedThreads.push(thread);
                } else {
                    if (thread.lastMessageTime <= messageTime) {
                        thread.lastMessageTime = messageTime;

MessageSectionEventProcessor.prototype.observeThreadSelected = function () {
    this.addDisposable(modelRouter
        .getEventObservable("threadSelected", esp.ObservationStage.commited)
        .observe(function (model, event) {
            this._updateMessages(model);
            model.messageSection.threadName = event.threadName;
            model.messageSection.hasChanges = true;
        }.bind(this))
        );
};