How to use the esp-js-react.shouldUpdateMixin function in esp-js-react

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 * as React from 'react';
import * as classnames from 'classnames';
import { EventConst } from '../eventConst';
import { EpicListItemView } from './epicListItemView';
import { StoryListItemView } from './storyListItemView';
import { StoryDetailsView } from './storyDetailsView';
import { Router } from 'esp-js';
import { Workspace } from '../models/workspace';
import { shouldUpdateMixin } from 'esp-js-react';

export interface WorkspaceViewProps {
    model?: Workspace;
    router?: Router;
}

@shouldUpdateMixin((nextProps: WorkspaceViewProps) => {
    return {
        epics: nextProps.model.epics,
        displayedStories: nextProps.model.displayedStories,
        selectedStory: nextProps.model.selectedStory,
        showAllStoriesButton: nextProps.model.showAllStoriesButton
    };
})
export class WorkspaceView extends React.Component {
    render() {
        let workspace = this.props.model;
        let router = this.props.router;
        let epics = workspace.epics.map(epic => {
            return ();
        });
        let showAllClassName = classnames({'hide': !workspace.showAllStoriesButton});
        let displayedStories = workspace.displayedStories.map(story => {

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,
        status: 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);
    }

    render() {
        let story = this.props.story;

import * as React from 'react';
import * as classnames from 'classnames';
import {EventConst} from '../eventConst';
import {EpicLabel} from './epicLabel';
import {Epic} from '../models/epic';
import {Router} from 'esp-js';
import {shouldUpdateMixin} from 'esp-js-react';

export interface EpicListItemViewProps {
    epic: Epic;
    router: Router;
}

@shouldUpdateMixin((nextProps: EpicListItemViewProps) => {
    return {
        name: nextProps.epic.name,
        isSelected: nextProps.epic.isSelected,
        colour: nextProps.epic.colour,
        stories: nextProps.epic.stories,
        doneCount: nextProps.epic.doneCount
    };
})
export class EpicListItemView extends React.Component {
    render() {
        let epic = this.props.epic;
        let router = this.props.router;
        let className = classnames('epicListItem', {'selectedItem': epic.isSelected});
        return (
            <div> {</div>

import * as React from 'react';
import * as classnames from 'classnames';
import { EventConst } from '../eventConst';
import { EpicListItemView } from './epicListItemView';
import { StoryListItemView } from './storyListItemView';
import { StoryDetailsView } from './storyDetailsView';
import { Router } from 'esp-js';
import { Workspace } from '../models/workspace';
import { shouldUpdateMixin } from 'esp-js-react';

export interface WorkspaceViewProps {
    model: Workspace;
    router: Router;
}

@shouldUpdateMixin((nextProps: WorkspaceViewProps) => {
    return {
        epics: nextProps.model.epics,
        displayedStories: nextProps.model.displayedStories,
        selectedStory: nextProps.model.selectedStory,
        showAllStoriesButton: nextProps.model.showAllStoriesButton
    };
})
export class WorkspaceView extends React.Component {
    render() {
        let workspace = this.props.model;
        let router = this.props.router;
        let epics = workspace.epics.map(epic => {
            return ();
        });
        let showAllClassName = classnames({'hide': !workspace.showAllStoriesButton});
        let displayedStories = workspace.displayedStories.map(story => {

import * as React from 'react';
import * as classnames from 'classnames';
import { EventConst } from '../eventConst';
import { EpicLabel } from './epicLabel';
import { Epic } from '../models/epic';
import { Router } from 'esp-js';
import { shouldUpdateMixin } from 'esp-js-react';

export interface EpicListItemViewProps {
    epic: Epic;
    router: Router;
}

@shouldUpdateMixin((nextProps: EpicListItemViewProps) => {
    return {
        name: nextProps.epic.name,
        isSelected: nextProps.epic.isSelected,
        colour: nextProps.epic.colour,
        stories: nextProps.epic.stories,
        doneCount: nextProps.epic.doneCount
    };
})
export class EpicListItemView extends React.Component {
    render() {
        let epic = this.props.epic;
        let router = this.props.router;
        let className = classnames('epicListItem', {'selectedItem': epic.isSelected});
        return (
            <div> {router.publishEvent(epic.modelId, EventConst.EPIC_SELECTED, {epic});}}&gt;</div>