{"size": 2788, "ext": "js", "max_stars_repo_path": "demo/src/index.js", "max_stars_repo_name": "zzacharo/react-searchkit", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "demo/src/index.js", "max_issues_repo_name": "zzacharo/react-searchkit", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "demo/src/index.js", "max_forks_repo_name": "zzacharo/react-searchkit", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 26.5523809524, "max_line_length": 75, "alphanum_fraction": 0.4332855093}
import React, { Component } from 'react';
import { render } from 'react-dom';
import { Segment, Container, Header, Grid } from 'semantic-ui-react';
import {
  ReactSearchKit,
  SearchBar,
  Aggregator,
  EmptyResults,
  Error,
  ResultsLoader,
} from '@app/components';
import { Results } from './Results';

class Demo extends Component {
  render() {
    const sortByValues = [
      {
        text: 'Best Match',
        value: 'bestmatch',
      },
      {
        text: 'Newest',
        value: 'mostrecent',
      },
    ];

    const sortOrderValues = [
      { text: 'asc', value: 'asc' },
      { text: 'desc', value: 'desc' },
    ];

    const resultsPerPageValues = [
      {
        text: '10',
        value: 10,
      },
      {
        text: '20',
        value: 20,
      },
      {
        text: '50',
        value: 50,
      },
    ];

    return (
      <div>
        <ReactSearchKit
          searchConfig={{
            url: 'https://zenodo.org/api/records/',
            timeout: 5000,
            headers: { Accept: 'application/vnd.zenodo.v1+json' },
          }}
          defaultSortByOnEmptyQuery="mostrecent"
        >
          <div>
            <Segment inverted>
              <Container>
                <Grid columns="equal" verticalAlign="middle">
                  <Grid.Row>
                    <Grid.Column width={5}>
                      <Header as="h1" content="React-searchkit" inverted />
                    </Grid.Column>
                    <Grid.Column width={10} textAlign="center">
                      <SearchBar />
                    </Grid.Column>
                  </Grid.Row>
                </Grid>
              </Container>
            </Segment>

            <Container>
              <Grid relaxed style={{ padding: '2em 0' }}>
                <Grid.Row columns={2}>
                  <Grid.Column width={3}>
                    <Aggregator title="File types" field="file_type" />
                    <br />
                    <Aggregator title="Keywords" field="keywords" />
                    <br />
                    <Aggregator title="Types" field="type" />
                    <br />
                  </Grid.Column>
                  <Grid.Column width={13}>
                    <Error />
                    <EmptyResults />
                    <ResultsLoader />
                    <Results
                      sortByValues={sortByValues}
                      sortOrderValues={sortOrderValues}
                      resultsPerPageValues={resultsPerPageValues}
                    />
                  </Grid.Column>
                </Grid.Row>
              </Grid>
            </Container>
          </div>
        </ReactSearchKit>
      </div>
    );
  }
}

render(<Demo />, document.querySelector('#demo'));
