trc-client-core/src/management/fdlp/FDLP.jsx

The core of the TRC Client

import React from 'react';
import _ from 'lodash';
import {State} from 'react-router';
import Reflux from 'reflux';
import StoreMixin from 'reflux-immutable/StoreMixin';

import FDLPStore from 'trc-client-core/src/management/fdlp/FDLPStore';
import FdlpActions from 'trc-client-core/src/management/fdlp/FdlpActions';
import User from 'trc-client-core/src/user/UserStore';
import FDLPSession from 'trc-client-core/src/management/fdlp/FDLPSession';
import FDLPParticipants from 'trc-client-core/src/management/fdlp/FDLPParticipants';
import Loader from 'trc-client-core/src/components/Loader';
import Select from 'trc-client-core/src/components/Select';
import LocalStorage from 'trc-client-core/src/utils/LocalStorage';

var LSCurrentGroupID = 'Management::FDLP::currentGroup';

var FDLP = React.createClass({
    displayName: 'FDLP',
    updateHash: true,
    mixins: [
        State,
        StoreMixin,
        Reflux.listenTo(FDLPStore, 'onStoreChange')
    ],
    getStoreState() {
        var currentGroup;
        if (User.isAny(['ROLE_SUPER_ADMIN', 'ROLE_TMCA_ADMIN'])) {
            currentGroup = LocalStorage.getData(LSCurrentGroupID);
        }

        return {
            sessions: FDLPStore.get('sessions'),
            firstGroup: FDLPStore.get('firstGroupName'),
            currentGroup: currentGroup
        }
    },
    componentWillMount() {
        FdlpActions.getSessionData();  
    },
    onChangeGroup: function(ee, details) {
        this.setState({currentGroup: details.value});
        LocalStorage.setData(LSCurrentGroupID, details.value);
    },
    render: function() {
        if(!this.state.sessions.size) {
            return <Loader></Loader>;
        }

        var view = this.renderSession(this.state.sessions.toJS());

        if(this.props.history.isActive('/management/fdlp/participants')) {
            view = <FDLPParticipants group={this.state.currentGroup || this.state.firstGroup}></FDLPParticipants>;                
        }

        return (
            <div>
                {this.renderGroupSelect()}
                {view}
            </div>
        );
    },
    renderSession: function (data) {
        var sessions = data[this.state.currentGroup || this.state.firstGroup];
        var currentSessionIndex = (this.props.params.id) ? this.props.params.id : _.find(sessions, {tag: 'current'}).index;

        if(currentSessionIndex > sessions.length || sessions[currentSessionIndex].tag === 'not_ready') {
            currentSessionIndex = _.find(sessions, {tag: 'current'}).index;
        }

        return <FDLPSession sessions={sessions} currentSession={currentSessionIndex} group={this.state.currentGroup || this.state.firstGroup}></FDLPSession>;
    },
    renderGroupSelect: function () {
        if(User.isAny(['ROLE_SUPER_ADMIN', 'ROLE_TMCA_ADMIN'])) {
            return <div className="Widget Widget-teal w15 l-right row hug-top">
                <Select name="group" className="hug w100" onChange={this.onChangeGroup} value={this.state.currentGroup} options={this.renderGroupSelectOption()}/>
            </div>;
        }
    },
    renderGroupSelectOption() {
        return this.state.sessions.toSeq().map((session, key) => {
            return {
                label: key.replace(/(fdlp_)(.*)(_)(\d)/, '$2 $4'), 
                value: key
            };
        }).toList().toJS();
    }
});

module.exports = FDLP;