gistfile1.js

var Stamples = React.createClass({

    mixins: [ScrollbarNearBottomMixin],

    NumberOfItemsParPage: 10,

    propTypes: {
        appState: React.PropTypes.object.isRequired,
        updateAppState: React.PropTypes.func.isRequired
    },


    getInitialState: function() {
        return {
            loading: false,
            allStamplesLoaded: false,
            loadingError: undefined,
            timelineStamples: []
        }
    },

    componentDidMount: function() {
        var self = this;
        this.onScrollbarNearBottom(function(e) {
            if ( !self.state.loading && !self.state.allStamplesLoaded ) {
                var fromStample = self.state.timelineStamples.length;
                self.loadNextStamples(self.props,fromStample);
            }
        });
        this.reloadStamplesFromBeginning(this.props);
    },


    componentWillReceiveProps: function(nextProps) {
        var newFilters = nextProps.appState.timelineFilters;
        var oldFilters = this.props.appState.timelineFilters;
        if ( newFilters != oldFilters ) {
            console.debug("Reloading timeline from beginning, because filters have changed from",oldFilters,"to",newFilters);
            this.reloadStamplesFromBeginning(nextProps);
        }
    },

    reloadStamplesFromBeginning: function(props) {
        this.replaceState(this.getInitialState());
        var fromStample = 0;
        this.loadNextStamples(props,fromStample);
    },


    loadNextStamples: function(props,fromStample) {
        var self = this;
        this.setState({
            loading: true
        });
        var requestFilters = props.appState.timelineFilters;
        StampleRepository.getTimeline(requestFilters, fromStample, this.NumberOfItemsParPage)
            .then(function(stamples) {
                var currentFilters = self.props.appState.timelineFilters;
                if ( requestFilters != currentFilters )  {
                    return;
                }
                // TODO we should probably use a better way to load stamples, probably using from=logicalTime,
                // or we could have stamples in this list which have the same id if the timeline changes on the server...
                var newTimelineStamples = self.state.timelineStamples.concat(stamples);
                var allStamplesLoaded = (stamples.length == 0);
                if ( allStamplesLoaded ) {
                    console.debug("All stamples have now been loaded!",newTimelineStamples.length);
                }
                self.setState({
                    allStamplesLoaded: allStamplesLoaded,
                    loading: false,
                    timelineStamples: newTimelineStamples
                })
            })
            .fail(function(error) {
                var currentFilters = self.props.appState.timelineFilters;
                if ( requestFilters != currentFilters )  {
                    return;
                }
                self.setState({
                    loading: false,
                    loadingError: error
                })
            })
            .done();
    },




    renderLoadingSpinner: function() {
        if ( this.state.loading ) {
            return <Spinner/>;
        }
    },

    renderLoadingError: function() {
        if ( this.state.loadingError ) {
            return (
                <div className="loadingError">
                    {this.state.loadingError.message}
                </div>
                );
        }
    },

    render: function() {
        var stamples = this.state.timelineStamples.map(function(timelineStample) {
            return <Stample key={timelineStample.id} timelineStample={timelineStample.id} stampleData={timelineStample}/>
        });
        return (
            <div className="reactComponentContainer mainCarouselPaneContent stamples">
                <div>{stamples}</div>
                {this.renderLoadingSpinner()}
                {this.renderLoadingError()}
            </div>
            );
    }
});