1import { makeStyles } from '@material-ui/styles';
 2import IconButton from '@material-ui/core/IconButton';
 3import Table from '@material-ui/core/Table/Table';
 4import TableBody from '@material-ui/core/TableBody/TableBody';
 5import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
 6import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
 7import React from 'react';
 8import BugRow from './BugRow';
 9
10const useStyles = makeStyles(theme => ({
11  main: {
12    maxWidth: 600,
13    margin: 'auto',
14    marginTop: theme.spacing(4),
15  },
16  pagination: {
17    ...theme.typography.overline,
18    display: 'flex',
19    alignItems: 'center',
20    justifyContent: 'flex-end',
21  },
22}));
23
24function List({ bugs, nextPage, prevPage }) {
25  const classes = useStyles();
26  const { hasNextPage, hasPreviousPage } = bugs.pageInfo;
27  return (
28    <main className={classes.main}>
29      <Table className={classes.table}>
30        <TableBody>
31          {bugs.edges.map(({ cursor, node }) => (
32            <BugRow bug={node} key={cursor} />
33          ))}
34        </TableBody>
35      </Table>
36
37      <div className={classes.pagination}>
38        <div>Total: {bugs.totalCount}</div>
39        <IconButton onClick={prevPage} disabled={!hasPreviousPage}>
40          <KeyboardArrowLeft />
41        </IconButton>
42        <IconButton onClick={nextPage} disabled={!hasNextPage}>
43          <KeyboardArrowRight />
44        </IconButton>
45      </div>
46    </main>
47  );
48}
49
50export default List;