SearchPage.jsx

import React from 'react';
import { navigateAction, handleRoute } from 'fluxible-router';
import connectToStores from 'fluxible/addons/connectToStores';
import _debounce from 'lodash/function/debounce';

import SearchStore from '../../../stores/SearchStore';
import SearchPageList from './SearchPageList';


class SearchPage extends React.Component {
    constructor(...args) {
        super(...args);

        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleSubmitDebounced = _debounce(this.handleSubmit, 200);


        this.state = {
            queryValue: this.props.query.params.query
        };
    }

    handleSubmit(e) {
        if (e && e.nativeEvent) {
            e.preventDefault();
        }

        this.doSearch({
            query: this.state.queryValue,
        });
    }

    handleInputChange(e) {
        const searchInput = React.findDOMNode(this.refs.searchInput);
        const value = searchInput.value;

        this.setState({
            queryValue: value,
        });

        this.handleSubmitDebounced();
    }

    getPath() {
        return '/search';
    }

    doSearch(queryParams) {
        let uri = this.getPath();

        let isFirst = true;
        for (var key in queryParams) {
            let value = encodeURIComponent(queryParams[key]);

            uri += isFirst ? '?' : '&';
            uri += `${key}=${value}`;
            isFirst = false;
        }


        this.context.executeAction(navigateAction, {
            method: 'GET',
            url   : uri,
        });
    }

    componentDidMount() {
        if (this.props.isModal) {
            this.setState({mounted: true});
        }
        let searchInput = React.findDOMNode(this.refs.searchInput);
        if (searchInput) {
            searchInput.focus();
        }
    }

    render() {
        return (
            <form method="GET" action={this.getPath()} onSubmit={this.handleSubmit}>
                <input
                    className="searchbox__input"
                    name="query"
                    type="text"
                    placeholder="Find a gig.."
                    ref="searchInput"
                    onKeyUp={this.handleInputChange}
                    onChange={this.handleInputChange}
                    value={this.state.queryValue}
                    />
            </form>
        );
    }
}


SearchPage.contextTypes = {
    executeAction: React.PropTypes.func,
};


export default handleRoute(connectToStores(
    SearchPage,
    [SearchStore],
    {
        SearchStore: function (store) {
            return {
                query: store.getCurrent(),
            };
        }
    }
));