path: root/webui/src/list/List.js

import { withStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table/Table';
import TableBody from '@material-ui/core/TableBody/TableBody';
import TablePagination from '@material-ui/core/TablePagination/TablePagination';
import React from 'react';
import BugRow from './BugRow';

const styles = theme => ({
  main: {
    maxWidth: 600,
    margin: 'auto',
    marginTop: theme.spacing.unit * 4,
  },
});

class List extends React.Component {
  props: {
    bugs: Array,
    fetchMore: any => any,
    classes: any,
  };

  state = {
    page: 0,
    rowsPerPage: 10,
    lastQuery: {},
  };

  handleChangePage = (event, page) => {
    const { bugs, fetchMore } = this.props;
    const { rowsPerPage } = this.state;
    const pageInfo = bugs.pageInfo;

    if (page === this.state.page + 1) {
      if (!pageInfo.hasNextPage) {
        return;
      }

      const variables = {
        after: pageInfo.endCursor,
        first: rowsPerPage,
      };

      fetchMore({
        variables,
        updateQuery: this.updateQuery,
      });

      this.setState({ page, lastQuery: variables });
      return;
    }

    if (page === this.state.page - 1) {
      if (!pageInfo.hasPreviousPage) {
        return;
      }

      const variables = {
        before: pageInfo.startCursor,
        last: rowsPerPage,
      };

      fetchMore({
        variables,
        updateQuery: this.updateQuery,
      });

      this.setState({ page, lastQuery: variables });
      return;
    }

    throw new Error('non neighbour page pagination is not supported');
  };

  handleChangeRowsPerPage = event => {
    const { fetchMore } = this.props;
    const { lastQuery } = this.state;
    const rowsPerPage = event.target.value;

    const variables = lastQuery;

    if (lastQuery.first) {
      variables.first = rowsPerPage;
    } else if (lastQuery.last) {
      variables.last = rowsPerPage;
    } else {
      variables.first = rowsPerPage;
    }

    fetchMore({
      variables,
      updateQuery: this.updateQuery,
    });

    this.setState({ rowsPerPage, lastQuery: variables });
  };

  updateQuery = (previousResult, { fetchMoreResult }) => {
    return fetchMoreResult ? fetchMoreResult : previousResult;
  };

  render() {
    const { classes, bugs } = this.props;
    const { page, rowsPerPage } = this.state;

    return (
      <main className={classes.main}>
        <Table className={classes.table}>
          <TableBody>
            {bugs.edges.map(({ cursor, node }) => (
              <BugRow bug={node} key={cursor} />
            ))}
          </TableBody>
        </Table>
        <TablePagination
          component="div"
          count={bugs.totalCount}
          rowsPerPage={rowsPerPage}
          page={page}
          backIconButtonProps={{
            'aria-label': 'Previous Page',
          }}
          nextIconButtonProps={{
            'aria-label': 'Next Page',
          }}
          onChangePage={this.handleChangePage}
          onChangeRowsPerPage={this.handleChangeRowsPerPage}
        />
      </main>
    );
  }
}

export default withStyles(styles)(List);