renderControls()

in frontend/src/js/components/Search/Search.js [169:219]

• 48 lines of code
• 3 McCabe index (conditional complexity)

    renderControls() {
        // TODO replace with user preferences for page size
        const pageSize = this.props.urlParams.pageSize || '100';
        // TODO replace with user preferences for sort order
        const sortBy = this.props.urlParams.sortBy || 'relevance';

        return (
            <div className='search__controls'>
                <Checkbox
                    selected={this.props.preferences.searchResultHistogram}
                    onClick={this.toggleHistogram}>
                   Show Date Created Graph
                </Checkbox>
                <Checkbox
                    selected={this.props.preferences.compactSearchResults}
                    onClick={this.toggleCompactSearchResults}>
                   Compact
                </Checkbox>
                <Select
                    className='search__control'
                    value={sortBy}
                    options={[
                        { value: 'relevance', label: 'Sort by relevance'},
                        { value: 'size-asc', label: 'Sort by size (smallest first)'},
                        { value: 'size-desc', label: 'Sort by size (largest first)'},
                        { value: 'date-created-asc', label: 'Sort by date created (oldest first)'},
                        { value: 'date-created-desc', label: 'Sort by date created (newest first)'}
                    ]}
                    onChange={v => {
                        this.props.updatePage('1');
                        this.props.updateSortBy(v.value);
                    }}
                    clearable={false}
                />
                <Select
                    className='search__control'
                    value={pageSize}
                    options={[
                        { value: '25', label: '25 results per page'},
                        { value: '50', label: '50 results per page'},
                        { value: '100', label: '100 results per page'}
                    ]}
                    onChange={v => {
                        this.props.updatePage('1');
                        this.props.updatePageSize(v.value);
                    }}
                    clearable={false}
                />
            </div>
        );
    }