application/components/common/ssts-search-box.js

import React from 'react';
import TextField from 'material-ui/TextField';
import AutoComplete from 'material-ui/AutoComplete';

import {connect} from 'react-redux';

import {info} from './../../util/console';

import {
    sstssFetch
} from '../../redux/actions/ssts-actions';

class SstsSearchBox extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            fetching: false,
            isEditing: false,
            dataSource: []
        };
    }

    componentDidMount() {
        const {dispatch} = this.props;
        let nodes = [];
        dispatch(sstssFetch({'limit': 100, 'per_page': 100}))
            .then(() => {
                this.props.ssts.items.map((item) => {
                    nodes.push({
                        'label': item.get('path'),
                        'id': item.get('id')
                    });
                });

                this.setState({
                    dataSource: nodes
                });
            });
    }

    handleChangeFocus() {
        this.setState({isEditing: true});
    }

    render() {
        if (this.props.value && !this.state.isEditing) {
            return (
                <TextField
                    floatingLabelText='Section/Subsection/Topic/Subtopic'
                    fullWidth={true}
                    value={this.props.value}
                    onFocus={this.handleChangeFocus.bind(this)}
                    />
            );
        }
        return (
            <AutoComplete
                floatingLabelText='Section/Subsection/Topic/Subtopic'
                fullWidth={true}
                openOnFocus={true}
                dataSource={this.state.dataSource}
                dataSourceConfig={{text: 'label', value: 'id'}}
                onNewRequest={this.props.onChange}
                />
        );
    }


}

const mapStateToProps = (state) => {
    return {
        'application': state.application,
        'ssts': state.sstss
    };
}

export default connect(mapStateToProps)(SstsSearchBox);