gistfile1.js

var Spaces = React.createClass({
    propTypes: {
        appState: React.PropTypes.object.isRequired,
        updateAppState: React.PropTypes.func.isRequired
    },



    // TODO temporary to fluidify the carousel swipes, probably not so good
    shouldComponentUpdate: function(nextProps,nextState) {
        var importantPropsChange = !AppStateUtils.isOnlyPaneSwipeDiff(this.props.appState, nextProps.appState);
        var importantStateChange = (this.state != nextState);
        return importantPropsChange || importantStateChange;
    },



    getInitialState: function() {
        var rootPane = this.buildSpaceRootPane();
        return {
            // TODO maybe the first root pane should not be in the state!
            spacePanes: [ rootPane ]
        };
    },


    buildSpaceRootPane: function() {
        var pane = (
            <SpacesRootPane
            onAllClick={this.selectAllSpace}
            onHomeClick={this.selectHomeCategorySpace}
            onHomeForwardClick={this.addHomeCategoryPane}
            onSharedWithMeClick={this.selectAllSharingUsersSpace}
            onSharedWithMeForwardClick={this.addAllUserSharingsPane}
            onFavoritesClick={this.selectFavoritesSpace}
            />
            );
        return {
            name: "SpacesRoot",
            type: PaneTypes.ROOT,
            content: pane
        };
    },

    selectAllSpace: function() {
        this.props.updateAppState(
            AppStateUpdater.selectAllSpace(this.props.appState)
        );
    },
    selectSharingUserSpace: function(userData) {
        this.props.updateAppState(
            AppStateUpdater.selecdSharingUserSpace(this.props.appState,userData)
        );
    },
    selectAllSharingUsersSpace: function() {
        this.props.updateAppState(
            AppStateUpdater.selectAllSharingUsersSpace(this.props.appState)
        );
    },
    selectCategorySpace: function(categoryData) {
        this.props.updateAppState(
            AppStateUpdater.selectCategorySpace(this.props.appState,categoryData)
        );
    },
    selectFavoritesSpace: function() {
        this.props.updateAppState(
            AppStateUpdater.selectFavoritesSpace(this.props.appState)
        );
    },

    selectHomeCategorySpace: function() {
        this.selectCategorySpace(this.props.appState.currentUser.rootCategories.Home);
    },
    addHomeCategoryPane: function() {
        var homeCategoryData = this.props.appState.currentUser.rootCategories.Home;
        this.addCategoryPane(homeCategoryData);
    },


    addPane: function(pane) {
        Preconditions.checkMandatoryParameter(pane,"categoryData must be provided!");
        var newPanes = this.state.spacePanes.concat([pane]);
        this.setState({
            spacePanes: newPanes
        });
    },

    removePane: function(pane) {
        // TODO maybe the first root pane should not be in the state!
        Preconditions.checkCondition( this.state.spacePanes.length > 1 ,"Can't remove the first root pane");
        var newPanes = _.without(this.state.spacePanes,pane);
        this.setState({
            spacePanes: newPanes
        });
    },


    addCategoryPane: function(categoryData) {
        Preconditions.checkMandatoryParameter(categoryData,"categoryData must be provided!");
        var self = this;
        var categoryPane = {};
        var removePaneCallback = function() {
            self.removePane(categoryPane);
        };
        categoryPane.name = "category_"+categoryData.id;
        categoryPane.type = PaneTypes.CATEGORY;
        categoryPane.content = (
            <SpacesCategoryPane
            appState={this.props.appState}
            categoryData={categoryData}
            onBack={removePaneCallback}
            onSubCategoryClick={this.selectCategorySpace}
            onSubCategoryForwardClick={this.addCategoryPane}
            />);
        categoryPane.categoryId = categoryData.id;
        this.addPane(categoryPane);
    },

    addAllUserSharingsPane: function() {
        var self = this;
        var userSharingPane = {};
        var removePaneCallback = function() {
            self.removePane(userSharingPane);
        };
        userSharingPane.name = "all_user_sharings";
        userSharingPane.type = PaneTypes.ALL_USER_SHARINGS;
        userSharingPane.content = (
            <SpacesAllUserSharingsPane
            appState={this.props.appState}
            onBack={removePaneCallback}
            onUserSharingClick={this.selectSharingUserSpace}
            onUserSharingForwardClick={this.addUserSharingPane}
            />);
        this.addPane(userSharingPane);
    },

    // TODO use this when it's ready
    addUserSharingPane: function(userSharingData) {
        Preconditions.checkMandatoryParameter(userSharingData,"userSharingData must be provided!");
        var self = this;
        var userSharingPane = {};
        var removePaneCallback = function() {
            self.removePane(userSharingPane);
        };
        userSharingPane.name = "user_sharing_"+userSharingData.id;
        userSharingPane.type = PaneTypes.USER_SHARING;
        userSharingPane.content = (
            <SpacesCategoryPane
            appState={this.props.appState}
            userSharingData={userSharingData}
            onBack={removePaneCallback}
            onSubCategoryClick={this.selectCategorySpace}
            onSubCategoryForwardClick={this.addCategoryPane}
            />);
        userSharingPane.userId = userSharingData.id;
        this.addPane(userSharingPane);
    },


    renderCarousel: function() {
        var panes = this.state.spacePanes;
        //console.debug("Rendering spaces carousel with panes",this.state);
        var selectedPaneIndex = panes.length - 1; // We always select the last pane of the list!
        var doNothingBecauseNoMenuOrSwipe = function() { throw new Error("Not expected to be called!") };
        return (
            <div id="spacesCarousel">
                <Carousel
                panes={panes}
                selectedPaneIndex={selectedPaneIndex}
                onPaneSelected={doNothingBecauseNoMenuOrSwipe}
                includeMenu={false}
                swipeable={false} />
            </div>
            );
    },


    render: function() {
        return (
            <div className="reactComponentContainer mainCarouselPaneContent spaces">
                {this.renderCarousel()}
            </div>
            );
    }


});




var SpacesRootPane = React.createClass({
    propTypes: {
        onAllClick: React.PropTypes.func.isRequired,
        onHomeClick: React.PropTypes.func.isRequired,
        onHomeForwardClick: React.PropTypes.func.isRequired,
        onSharedWithMeClick: React.PropTypes.func.isRequired,
        onSharedWithMeForwardClick: React.PropTypes.func.isRequired,
        onFavoritesClick: React.PropTypes.func.isRequired
    },

    render: function() {
        return (
            <div className="reactComponentContainer spacesCarouselPaneContent spacesRootPane">
                <div className="verticalListContainer">
                    <ul className="verticalList">
                        <li>
                            <div className="liContent">
                                <span className="allCategories" onClick={this.props.onAllClick.bind(null)}>All</span>
                            </div>
                        </li>
                        <li>
                            <div className="liContent">
                                <span className="homeCategory" onClick={this.props.onHomeClick.bind(null)}>My spaces</span>
                                <ForwardIcon onClick={this.props.onHomeForwardClick.bind(null)}/>
                            </div>
                        </li>
                        <li>
                            <div className="liContent">
                                <span className="sharedWithMe" onClick={this.props.onSharedWithMeClick.bind(null)}>Shared with me</span>
                                <ForwardIcon onClick={this.props.onSharedWithMeForwardClick.bind(null)}/>
                            </div>
                        </li>
                    </ul>
                </div>
                <br/>
                <div className="verticalListContainer">
                    <ul className="verticalList">
                        <li onClick={this.props.onFavoritesClick}><div className="liContent">Favorites</div></li>
                    </ul>
                </div>
            </div>
            );
    }

});