trc-client-core/src/development/Endpoint.jsx

The core of the TRC Client

var React = require('react');
var Reflux = require('reflux');
var _ = require('lodash');

var {State, Link} = require('react-router');

var Code = require('bd-stampy/components/Code');
var Table = require('bd-stampy/components/Table');

var EndpointsActions = require('trc-client-core/src/development/EndpointsActions');
var EndpointsStore = require('trc-client-core/src/development/EndpointsStore');

var Table = require('bd-stampy/components/Table');
var Input = require('bd-stampy/components/InputElement');
var Button = require('bd-stampy/components/Button');

var Endpoint = React.createClass({
    displayName: 'Endpoint',
    mixins: [
        Reflux.listenTo(EndpointsStore, 'onStoreUpdate'),
        State
    ],
    getInitialState() {
        var state = this.getStoreState();
        return state;
    },
    getStoreState() {
        return {
            endpoint: EndpointsStore.getEndpoint(this.getEndpointUrl()),
            request: EndpointsStore.getRequest()
        };
    },
    getEndpointUrl() {
        return decodeURIComponent(this.props.params.id);
    },
    onStoreUpdate() {
        this.setState(this.getStoreState());
    },
    onFormChange(options, e, details) {
        var newState = this.state;
        newState[options.type] = newState[options.type] || {};
        newState[options.type][options.in] = newState[options.type][options.in] || {};
        newState[options.type][options.in][details.key] = newState[options.type][options.in][details.key] || {};
        newState[options.type][options.in][details.key] = details.value;
        this.setState(newState);
    },
    onSubmitRequest(method) {
        EndpointsActions.testEndpoint(method, this.getEndpointUrl(), this.state[method]);
    },
    render: function () {
        if(!this.state.endpoint) {
            return null;
        }
        
        return (
            <div>
                <Link to="/endpoints" className="cta-back">Back</Link>
                <div className="alpha">{decodeURIComponent(this.props.params.id)}</div>
                {this.renderRequest()}
                {this.renderRequestTypes()}
            </div>
        );
    },
    renderRequest() {
        if (this.state.request) {
            return <Code colorScheme="dark">{this.state.request}</Code>;       
        }
    },
    renderRequestTypes() {
        return _.map(this.state.endpoint, (request, key) => {
            return <div>
                <h2 className="t-uppercase">{key}</h2>
                <p>{request.description}</p>
                <Table modifier="data" className="">
                    <tr><td className="w20">Consumes</td><td><code>{request.consumes.join(', ')}</code></td></tr>
                    <tr><td>Produces</td><td><code>{request.produces.join(', ')}</code></td></tr>
                </Table>
                {this.renderParameters(request.parameters, key)}
            </div>;
        });
    },
    renderParameters(parameters, type) {
        var button = (type === 'get') ? <Button onClick={this.onSubmitRequest.bind(null, type)}>Submit</Button> : null;
        if(parameters) {
            var rows = parameters.map((pp, key)=>{
                var options = {in: pp.in, type: type};
                var definitionId;
                // var definitiopn
                if(pp.schema && pp.schema.$ref) {
                    definitionId = pp.schema.$ref.substr(pp.schema.$ref.lastIndexOf('/') + 1);                    
                }

                var row = {
                    _id: key,
                    Name: pp.name,
                    Description: pp.description,
                    required: pp.required.toString(),
                    type: pp.type || <Link to={`/definition/${definitionId || ''}`} className="link">{definitionId}</Link>
                };

                var inputType = {
                    integer: 'number',
                    boolean: 'checkbox'
                };


                if(type === 'get') {
                    row.Input = <Input type={inputType[pp.type]} name={pp.name} onChange={this.onFormChange.bind(null, options)} className="hug"></Input>;
                }

                return row;
            });

            return <div>
                <Table type="data" modifier="data">{rows}</Table>
                {button}
            </div>;
        }
    }
});

module.exports = Endpoint;