How to use esp-js-react - 10 common examples

import {observeEvent} from 'esp-js';
import {viewBinding} from 'esp-js-react';
import {RegionManager} from 'esp-js-ui';
import {CashTileView} from '../views/cashTileView';
import {
    Logger,
    ModelBase,
    IdFactory
} from 'esp-js-ui';
import {CashTileState} from './cashTileState';

const _log = Logger.create('CashTileModel');
const _log2 = Logger.create('CashTileModel2');

@viewBinding(CashTileView)
export class CashTileModel extends ModelBase {
    private _regionManager: RegionManager;
    private _initialState: CashTileState;

    constructor(
        router,
        regionManager: RegionManager,
        initialState: CashTileState // needs to be last due to how it's resolved via the container
    ) {
        super(IdFactory.createId('cashTileModel'), router);
        this._regionManager = regionManager;
        this._initialState = initialState;
    }

    public getTitle(): string {
        return 'Cash Tile';

import {viewBinding} from 'esp-js-react';
import {RegionManager, RegionItem} from 'esp-js-ui';
import {BlotterView} from '../views/blotterView';
import {
    Logger,
    ModelBase,
    IdFactory
} from 'esp-js-ui';
import {BlotterState} from './blotterState';

@viewBinding(BlotterView)
export class BlotterModel extends ModelBase {
    private _regionManager: RegionManager;
    private _initialState: BlotterState;
    private _regionItem: RegionItem;

    constructor(
        router,
        regionManager: RegionManager,
        initialState: BlotterState // needs to be last due to how it's resolved via the container
    ) {
        super(IdFactory.createId('blotterModel'), router);
        this._regionManager = regionManager;
        this._initialState = initialState;
    }

    public getTitle(): string {

import { observeEvent } from 'esp-js';
import { viewBinding } from 'esp-js-react';
import { RegionManager } from 'esp-js-ui';
import CashTileView from '../views/cashTileView';
import {
    Logger,
    ModelBase,
    IdFactory
} from 'esp-js-ui';
import CashTileState from './cashTileState';

let _log = Logger.create('CashTileModel');
let _log2 = Logger.create('CashTileModel2');

@viewBinding(CashTileView)
export default class CashTileModel extends ModelBase {
    private _regionManager:RegionManager;
    private _initialState:CashTileState;
    constructor(
        router,
        regionManager:RegionManager,
        initialState:CashTileState // needs to be last due to how it's resolved via the container
    ) {
        super(IdFactory.createId('cashTileModel'), router);
        this._regionManager = regionManager;
        this._initialState = initialState;
    }
    public getTitle(): string {
        return 'Cash Tile';
    }

import * as classnames from 'classnames';
import * as React from 'react';
import { EventConst } from '../eventConst';
import { EpicLabel } from './epicLabel';
import { Story } from '../models/story';
import { StoryStatus } from '../models/storyStatus';
import { Router } from 'esp-js';
import { shouldUpdateMixin } from 'esp-js-react';

export interface StoryListItemViewProps {
    story: Story;
    router: Router;
}

@shouldUpdateMixin((nextProps: StoryListItemViewProps) => {
    return {
        isSelected: nextProps.story.isSelected,
        name: nextProps.story.name,
        description: nextProps.story.description,
        sataus: nextProps.story.status,
        epicName: nextProps.story.epic.name,
        epicColour: nextProps.story.epic.colour
    };
})
export class StoryListItemView extends React.Component {
    _publishEvent(eventName, event) {
        this.props.router.publishEvent(this.props.story.modelId, eventName, event);
    }

    shouldComponentUpdate(nextProps, nextState) {
        // return nextProps.story.isDirty; when https://github.com/esp/esp-js-react/issues/1 is implemented

import ModelBase from './modelBase';
import ModalView from '../views/modalView.jsx';
import { viewBinding } from 'esp-js-react';
import idFactory from './idFactory';

/**
 * Model for app wide modal dialogs
 */
@viewBinding(ModalView)
export default class Modal extends ModelBase {
    constructor(router) {
        super(idFactory('modal'), router);
        this.modelIdToDisplay = null;
        this.modelViewContext = null;
        this.modalTitle = null;
    }

    observeEvents() {
        super.observeEvents();
        this.router.addModel(this.modelId, this);
    }

    open(modelIdToDisplay, modelViewContext) {
        return this.router.createObservableFor(this.modelId, () => {
            this.modelIdToDisplay = modelIdToDisplay;

import { viewBinding } from 'esp-js-react';
import { ModelBase } from './modelBase';
import { Epic } from './epic';
import { EventConst } from '../eventConst';
import { ItemNameDialog, ItemNameDialogResultType } from './itemNameDialog';
import { WorkspaceView } from '../views/workspaceView';
import { idFactory } from './idFactory';
import { List } from 'immutable';
import { Modal } from './modal';
import { Story } from './story';
import { observeEvent } from 'esp-js';

@viewBinding(WorkspaceView)
export class Workspace extends ModelBase {
    private _modal: Modal;
    private _epics: List;
    private _allStories: List;
    private _displayedStories: List;
    private _selectedEpic: Epic;
    private _selectedStory: Story;
    private _showAllStoriesButton: boolean;
    private _createEpicDialog: ItemNameDialog;
    private _createStoryDialog: ItemNameDialog;

    constructor(router, modal: Modal) {
        super(idFactory('workspace'), router);
        this._modal = modal;
        this._epics = List();
        this._allStories = List();

import * as esp from 'esp-js';
import ModelBase from './modelBase';
import EventConsts from '../eventConsts';
import { viewBinding } from 'esp-js-react';
import ItemNameDialogResultType from './itemNameDialogResultType';
import ItemNameDialogView from '../views/itemNameDialogView.jsx';
import idFactory from './idFactory';

/**
 * A dialog for getting the name of something
 */
@viewBinding(ItemNameDialogView)
export default class ItemNameDialog extends ModelBase {
    constructor(router, modal, modalTitle, saveButtonText) {
        super(idFactory('itemNameDialog'), router);
        this.itemName = '';
        this.modalTitle = modalTitle;
        this.saveButtonText = saveButtonText;
        this.modal = modal;
        this._resultsSubject = router.createSubject();
        this.canSave = false;
        this._modalSubscription = null;
    }

    observeEvents() {
        this.router.addModel(this.modelId, this);
        super.observeEvents();
    }

import { observeEvent } from 'esp-js';
import { viewBinding } from 'esp-js-react';
import { logger } from '../../../system';
import { ConnectionStatus } from '../../../system/service';
import { ModelBase } from '../../common';
import { WellKnownModelIds } from '../../../';
import ShellView from '../views/shellView';

var _log = logger.create('ShellModel');

@viewBinding(ShellView)
export default class ShellModel extends ModelBase {
  _connection;
  sessionExpired;
  wellKnownModelIds;

  _blotterRegionModel;
  _sidebarRegionModel;

  constructor(
    modelId,
    router,
    connection,
    blotterRegionModel,
    sidebarRegionModel
  ) {
    super(modelId, router);

import _ from 'lodash';
import { observeEvent } from 'esp-js';
import { viewBinding } from 'esp-js-react';
import { Environment } from '../../../system';
import { ModelBase, RegionManagerHelper } from '../../common';
import { RegionNames, view  } from '../../regions';
import { TradeRow, TradeStatus, TradeNotification, RegionSettings } from '../../../services/model';
import { BlotterView } from '../views';

import logger from '../../../system/logger';
var _log = logger.create('BlotterModel');

const HIGHLIGHT_TRADE_FOR_IN_MS = 200;

@viewBinding(BlotterView)
export default class BlotterModel extends ModelBase {
  _blotterService;
  _regionManagerHelper;
  _regionManager;
  _regionName;
  _regionSettings;
  _schedulerService;
  trades;
  isConnected;

  constructor(
    modelId,
    router,
    blotterService,
    regionManager,
    openFin,

import _ from 'lodash';
import esp from 'esp-js';
import { viewBinding } from 'esp-js-react';
import ModelBase from './modelBase';
import Epic from './epic';
import EventConsts from '../eventConsts';
import ItemNameDialog from './itemNameDialog';
import ItemNameDialogResultType from './itemNameDialogResultType';
import WorkspaceView from '../views/workspaceView.jsx';
import idFactory from './idFactory';

@viewBinding(WorkspaceView)
export default class Workspace extends ModelBase {
    constructor(router, modal) {
        super(idFactory('workspace'), router);
        this.modal = modal;
        this.epics = [];
        this.allStories = [];
        this.displayedStories = [];
        this.selectedEpic = null;
        this.selectedStory = null;
        this.showAllStoriesButton = false;
        this._createEpicDialog = new ItemNameDialog(router, modal, 'Create Epic', 'Create Epic');
        this._createStoryDialog = new ItemNameDialog(router, modal, 'Create Story', 'Create Story');
    }

    observeEvents() {
        this.router.addModel(this.modelId, this);