ConsolePage.js

import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {browserHistory} from 'react-router';
import JSONTree from 'react-json-tree';
import parseJson from 'parse-json';
import * as dbActions from '../../actions/dbActions';
import SelectInput from '../common/SelectInput';
import QueryInput from './QueryInput';
import {databasesFormattedForDropdown, simpleFormattedForDropdown} from '../../selectors/selectors.js';

class ConsolePage extends React.Component{
    constructor(props, context){
        super(props, context);

        this.state = {
            query: "",
            queryIsValid: false
        };

        this.onDatabaseChange = this.onDatabaseChange.bind(this);
        this.onOperationChange = this.onOperationChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
        this.onQueryChange = this.onQueryChange.bind(this);
        this.onCollectionChange = this.onCollectionChange.bind(this);
    }

    onDatabaseChange(event){
        let selected = event.target.value;
        this.props.actions.selectDatabase(selected);       
    }

    onCollectionChange(event){
        let selected = event.target.value;
        this.props.actions.selectCollection(selected);       
    }

    onOperationChange(event){
        let selected = event.target.value;
        this.props.actions.selectOperation(selected);
    }

    onQueryChange(event){
        let query = '[' + event.target.value + ']';
        try{
            parseJson(query);
            this.setState({queryIsValid: true});        
        }
        catch(err){            
            this.setState({queryIsValid: false});
        }        
        this.setState({query: query});
    }

    onSubmit(event){     
        const {selectedDatabase, selectedOperation} = this.props;  
        this.props.actions.queryDatabase(selectedDatabase, selectedOperation, JSON.parse(this.state.query)); //TODO: make the query persist in the app state instead of just local
    }

    render(){
        const {databases, selectedDatabase, collections, selectedCollection, selectedOperation, results} = this.props;
        const operations = ['insert', 'update', 'find', 'remove', 'aggregate'];
        return (
            <div>
                <h1>Console</h1>
                <SelectInput 
                    name="database" 
                    label="Database" 
                    defaultOption="Select Database"
                    value={selectedDatabase}
                    options={databasesFormattedForDropdown(databases)}
                    onChange={this.onDatabaseChange}/>

                <SelectInput 
                    name="operation" 
                    label="Operation" 
                    defaultOption="Select Operation"
                    value={selectedOperation}
                    options={simpleFormattedForDropdown(operations)}
                    onChange={this.onOperationChange}/>

                <SelectInput 
                    name="collection" 
                    label="Collection" 
                    defaultOption="Select Collection"
                    value={selectedCollection}
                    options={simpleFormattedForDropdown(collections)}
                    onChange={this.onCollectionChange}/>
               
                <QueryInput 
                    name="queryInput"
                    onChange={this.onQueryChange}
                    isValidJson={this.state.queryIsValid}/>
                    
                <JSONTree data={results} />

                <input type="button" className={this.state.queryIsValid ? "btn btn-default" : "btn btn-default disabled"} value="Submit" onClick={this.onSubmit} />
                
            </div>
        );
    }
}

/*eslint-disable react/forbid-prop-types */
ConsolePage.propTypes = {
    databases: PropTypes.any.isRequired, 
    collections: PropTypes.array,
    actions: PropTypes.object.isRequired,
    selectedDatabase: PropTypes.string,
    selectedCollection: PropTypes.string,
    selectedOperation: PropTypes.string,
    results: PropTypes.array
};

function mapStateToProps(state, ownProps){    
    return {
        databases: state.databases,
        collections: state.collections,
        selectedDatabase: state.selectedDatabase,
        selectedCollection: state.selectedCollection,
        selectedOperation: state.selectedOperation,
        results: state.results
    };
}
function mapDispatchToProps(dispatch){
    return {
        actions: bindActionCreators(dbActions, dispatch)
    };
}
export default connect(mapStateToProps, mapDispatchToProps)(ConsolePage);

SelectInput.js

import React, {PropTypes} from 'react';

//pure function / stupid component
const SelectInput = ({name, label, onChange, defaultOption, value, error, options}) => {
    return (
        <div className="form-group">
            <label htmlFor={name}>{label}</label>
            <div className="field">
                <select
                    name={name}
                    value={value}
                    onChange={onChange}
                    className="form-control">
                    <option value="">{defaultOption}</option>
                    {options.map((option) => {
                        return <option key={option.value} value={option.value}>{option.text}</option>;
                    })}
                </select>
                {error && <div className="alert alert-danger">{error}</div>}                    
            </div>
        </div>
    );
};

SelectInput.propTypes = {
    name: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    onChange: PropTypes.func.isRequired,
    defaultOption: PropTypes.string,
    value: PropTypes.string,
    error: PropTypes.string,
    options: PropTypes.arrayOf(PropTypes.object)
};

export default SelectInput;