application/components/common/content-search/search.js

import React from 'react';
import Paper from 'material-ui/Paper';
import TextField from 'material-ui/TextField';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import IconButton from 'material-ui/IconButton';
import FlatButton from 'material-ui/FlatButton';
import Divider from 'material-ui/Divider';
import FontIcon from 'material-ui/FontIcon';

import {connect} from 'react-redux'

import {Col, Row} from '../../flexbox';
import BaseView from './../../base-view';

import {contentSearchFetch, contentSearchReset} from './../../../redux/actions/content-search-actions';

import ReduxPaginator from './../redux-paginator';
import ContentResults from './content-results';

class ContentSearch extends BaseView {

    constructor(props) {
        super(props);
        this.displayName = 'ContentSearch';

        this.state = {
            'keywords': '',
            'content_type': this.props.contentType ? this.props.contentType : false
        };

        this.handleSearch = this.handleSearch.bind(this);
        this.handleSelectContent = this.handleSelectContent.bind(this);
        this.handleKeyDown = this.handleKeyDown.bind(this);

        this.handlePagination = this.handlePagination.bind(this);
    }

    componentDidMount() {
        const {dispatch} = this.props;
        dispatch(contentSearchReset())
            .then(() => this.handleSearch());
    }

    handleChangeView(type, e) {
        this.setState({'viewType': type});
    }

    handlePagination(page) {
        console.log(page);
        this.state.page = page;
        this.handleSearch();
    }

    handleChangeType(type, e) {
        this.setState({'type': type}, () => {
            this.handleSearch();
        });
    }

    /**
     * Simple search handler. See the API search docs
     * for field specifications
     */
    handleSearch() {
        const page = this.state.page ? this.state.page : 1;
        let filters = null;
        if (this.state.content_type) {
            filters = {
                'content_type': this.state.content_type
            };
        }
        this.props.dispatch(contentSearchFetch({
            'keywords': this.refs.keywords.getValue(),
            'author': this.refs.author.getValue(),
            'tag': this.refs.tag.getValue(),
            'type': 'content',
            'filters': filters,
            'page': page
        })).then(() => {
            if (!window) {
                return;
            }
            // forces the modal reposition when the contents of the search box
            // update
            window.dispatchEvent(new Event('resize'))
        });
    }

    /**
     * Bubble the select media back up to the parent component
     */
    handleSelectContent(m) {
        if (this.props.onSelectContent) {
            this.props.onSelectContent(m);
        }
    }

    handleKeyDown(e) {
        if (e.which === 13) {
            this.handleSearch();
        }
    }
    handleFilterType(type, e) {
        this.setState({
            'content_type': type
        }, () => {
            this.handleSearch.call(this);
        });
    }

    render() {
        return (
            <div>
                <Row middle='xs'>
                    <Col xs={12}>
                        <strong>Search Content</strong>
                    </Col>
                </Row>
                <div>
                    <Row middle='xs'>
                        <Col xs={12}>
                            <TextField
                                ref='keywords'
                                onKeyDown={this.handleKeyDown}
                                placeholder='Keywords'
                                fullWidth={true}
                            />
                        </Col>
                    </Row>
                    <Row middle='xs'>
                        <Col xs={6}>
                            <TextField
                                ref='tag'
                                onKeyDown={this.handleKeyDown}
                                placeholder='Tag'
                            />
                        </Col>
                        <Col xs={6}>
                            <TextField
                                ref='author'
                                onKeyDown={this.handleKeyDown}
                                placeholder='Author'
                            />
                        </Col>
                    </Row>

                    <Divider />

                    <Row middle='xs' className='clear-bottom clear-top'>
                        <Col xs={6}>
                            Type:
                            <span className={'state-pill' + (!this.state.content_type ? ' active' : '')} onClick={this.handleFilterType.bind(this, false)}>Any</span>
                            <span className={'state-pill' + (this.state.content_type == 'article' ? ' active' : '')} onClick={this.handleFilterType.bind(this, 'article')}>Article</span>
                            <span className={'state-pill' + (this.state.content_type == 'media' ? ' active' : '')} onClick={this.handleFilterType.bind(this, 'media')}>Media</span>
                            <span className={'state-pill' + (this.state.content_type == 'post' ? ' active' : '')} onClick={this.handleFilterType.bind(this, 'post')}>Post</span>
                            <span className={'state-pill' + (this.state.content_type == 'page' ? ' active' : '')} onClick={this.handleFilterType.bind(this, 'page')}>Page</span>
                        </Col>
                        <Col xs={6} right='xs'>
                            <ReduxPaginator pagination={this.props.contentSearch.pagination} onPaginate={this.handlePagination.bind(this)} />
                        </Col>
                    </Row>

                    <ContentResults onSelectContent={this.handleSelectContent} view={this.state.viewType} />
                </div>
            </div>
        );
    }
}

// This is just to force the modal to resize on update
export default connect((state) => {
    return {
        contentSearch: state.contentSearch
    }
})(ContentSearch);