{"size": 1479, "ext": "js", "max_stars_repo_path": "src/pages/index.js", "max_stars_repo_name": "Tonerolima/nigerian-senators", "max_stars_repo_stars_event_min_datetime": "2019-11-24T04:18:06.000Z", "max_stars_repo_stars_event_max_datetime": "2019-11-25T07:32:08.000Z", "max_issues_repo_path": "src/pages/index.js", "max_issues_repo_name": "Tonerolima/nigerian-senators", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/pages/index.js", "max_forks_repo_name": "Tonerolima/nigerian-senators", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 2, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 25.9473684211, "max_line_length": 73, "alphanum_fraction": 0.6159567275}
import { Container } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import React from 'react';
import 'typeface-roboto';
import Layout from '../components/Layout';
import Navbar from '../components/Navbar';
import SenatorsComponent from '../components/Senators';
import SEO from '../components/seo';
import '../css/index.css';
import senatorsList from '../data/senators.js';

const useStyles = makeStyles({
  main: {
    padding: '100px 0 50px'
  }
});

const IndexPage = () => {
  const [senators, setSenators] = React.useState(senatorsList);
  const [timeoutId, setTimeoutId] = React.useState(senatorsList);

  const classes = useStyles();

  const filter = value => {
    clearTimeout(timeoutId);

    if (value === '') {
      setSenators(senatorsList);
    } else {
      const id = setTimeout(() => {
        const data = senatorsList.filter(({ name, state, district }) => {
          const searchString = `${name}${state}${district}`;
          return searchString.toLowerCase().includes(value);
        });
        setSenators(data);
      }, 500);
      setTimeoutId(id);
    }
  };

  return (
    <Layout>
      <SEO title='Home' />
      <header>
        <Navbar filter={e => filter(e.target.value.toLowerCase())} />
      </header>
      <main className={classes.main}>
        <Container fixed>
          <SenatorsComponent senators={senators} />
        </Container>
      </main>
    </Layout>
  );
};

export default IndexPage;
