scratch-www/src/views/search/search.jsx

var injectIntl = require('react-intl').injectIntl;
var FormattedMessage = require('react-intl').FormattedMessage;
var React = require('react');
var connect = require('react-redux').connect;
var render = require('../../lib/render.jsx');

var api = require('../../lib/api');

var Page = require('../../components/page/www/page.jsx');
var TitleBanner = require('../../components/title-banner/title-banner.jsx');
var Button = require('../../components/forms/button.jsx');
var Tabs = require('../../components/tabs/tabs.jsx');
var Grid = require('../../components/grid/grid.jsx');
var navigationActions = require('../../redux/navigation.js');

require('./search.scss');

// @todo migrate to React-Router once available
var Search = injectIntl(React.createClass({
    type: 'Search',
    getDefaultProps: function () {
        var pathname = window.location.pathname.toLowerCase();
        if (pathname[pathname.length - 1] === '/') {
            pathname = pathname.substring(0, pathname.length - 1);
        }
        var start = pathname.lastIndexOf('/');
        var type = pathname.substring(start + 1, pathname.length);
        return {
            tab: type,
            loadNumber: 16
        };
    },
    getInitialState: function () {
        return {
            loaded: [],
            offset: 0,
            loadMore: false
        };
    },
    componentDidMount: function () {
        var query = window.location.search;
        var q = query.lastIndexOf('q=');
        var term = '';
        if (q !== -1) {
            term = query.substring(q + 2, query.length).toLowerCase();
        }
        while (term.indexOf('/') > -1) {
            term = term.substring(0, term.indexOf('/'));
        }
        while (term.indexOf('&') > -1) {
            term = term.substring(0, term.indexOf('&'));
        }
        term = decodeURI(term.split('+').join(' '));
        this.props.dispatch(navigationActions.setSearchTerm(term));
    },
    componentDidUpdate: function (prevProps) {
        if (this.props.searchTerm !== prevProps.searchTerm) this.getSearchMore();
    },
    getSearchMore: function () {
        var termText = '';
        if (this.props.searchTerm !== '') {
            termText = '&q=' + encodeURIComponent(this.props.searchTerm.split(' ').join('+'));
        }
        api({
            uri: '/search/' + this.props.tab +
                 '?limit=' + this.props.loadNumber +
                 '&offset=' + this.state.offset +
                 '&language=' + this.props.intl.locale +
                 '&mode=popular' +
                 termText
        }, function (err, body) {
            var loadedSoFar = this.state.loaded;
            Array.prototype.push.apply(loadedSoFar, body);
            var currentOffset = this.state.offset + this.props.loadNumber;
            var willLoadMore = body.length === this.props.loadNumber;
            this.setState({loaded: loadedSoFar, offset: currentOffset, loadMore: willLoadMore});
        }.bind(this));
    },
    onSearchSubmit: function (formData) {
        window.location.href = '/search/projects?q=' + encodeURIComponent(formData.q);
    },
    getTab: function (type) {
        var term = this.props.searchTerm.split(' ').join('+');
        var allTab = <a href={'/search/' + type + '?q=' + term + '/'}>
                        <li>
                            <img src={'/svgs/tabs/' + type + '-inactive.svg'} className={'tab-icon ' + type} />
                            <FormattedMessage id={'general.' + type} />
                        </li>
                    </a>;
        if (this.props.tab == type) {
            allTab = <a href={'/search/' + type + '?q=' + term + '/'}>
                        <li className='active'>
                            <img src={'/svgs/tabs/' + type + '-active.svg'} className={'tab-icon ' + type} />
                            <FormattedMessage id={'general.' + type} />
                        </li>
                    </a>;
        }
        return allTab;
    },
    getProjectBox: function () {
        var results = <Grid
            items={this.state.loaded}
            itemType={this.props.tab}
            cards={true}
            showAvatar={true}
            showLoves={false}
            showFavorites={false}
            showViews={false}
        />;
        var searchAction = null;
        if (this.state.loaded.length === 0 && this.state.offset !== 0) {
            searchAction = <h2 className="search-prompt"><FormattedMessage id="general.searchEmpty" /></h2>;
        } else if (this.state.loadMore) {
            searchAction = <Button onClick={this.getSearchMore} className="white">
                              <FormattedMessage id='general.loadMore' />
                            </Button>;
        }
        return (
          <div id='projectBox' key='projectBox'>
            {results}
            {searchAction}
          </div>
        );
    },
    render: function () {
        return (
            <div>
                <div className='outer'>
                        <TitleBanner className="masthead">
                            <div className="inner">
                                <h1 className="title-banner-h1"><FormattedMessage id="general.search" /></h1>
                            </div>
                        </TitleBanner>
                        <Tabs>
                            {this.getTab('projects')}
                            {this.getTab('studios')}
                        </Tabs>
                        {this.getProjectBox()}
                </div>
            </div>
        );
    }
}));

var mapStateToProps = function (state) {
    return {
        searchTerm: state.navigation
    };
};

var ConnectedSearch = connect(mapStateToProps)(Search);

render(
    <Page><ConnectedSearch /></Page>,
    document.getElementById('app'),
    {navigation: navigationActions.navigationReducer}
);