trc-client-core/src/requiredRoles/RequiredRoleView.jsx

The core of the TRC Client

import React from 'react';
import Reflux from 'reflux';
import {State, Navigation} from 'react-router';

import Loader from 'trc-client-core/src/components/Loader';
import Markdown from 'trc-client-core/src/components/Markdown';

import RequiredRolesActions from 'trc-client-core/src/requiredRoles/RequiredRolesActions';
import RequiredRolesStore from 'trc-client-core/src/requiredRoles/RequiredRolesStore';

var RequiredRoleView = React.createClass({
    displayName : 'RequiredRoleView',
    mixins: [
        Navigation,
        State,
        Reflux.listenTo(RequiredRolesStore, 'onStoreUpdate')
    ],
    onStoreUpdate() {
        if(!this.props.new){
            this.setState(this.getStoreState());
        } 
        if(this.props.dirty){
            this.setState(this.getStoreState());
        }
    },
    getStoreState() {
        return {
            role: RequiredRolesStore.getRole()
        };
    },
    getPropState(){
      return {
            role: this.props.role
        };  
    },
    getInitialState: function () {
        if(this.props.role){
            return this.getPropState();
        }
        return this.getStoreState();
    },
    componentDidMount: function () {
        if(!this.props.role){
            this.getData();
        }
    },
    getData(){        
        RequiredRolesActions.fetchRequiredRole(this.props.params.roleId);
    },
    render: function() {
        var role = this.state.role;
        if(!this.state.role){
            return <Loader />;
        }
        return (
            <div>
                <h1>{role.name}</h1>
                <Markdown html={role.description}/>
            </div>
        );

    }

});

module.exports = RequiredRoleView;