diff options
Diffstat (limited to 'webui/src/ListPage.js')
-rw-r--r-- | webui/src/ListPage.js | 47 |
1 files changed, 26 insertions, 21 deletions
diff --git a/webui/src/ListPage.js b/webui/src/ListPage.js index ed56e553..76350ec5 100644 --- a/webui/src/ListPage.js +++ b/webui/src/ListPage.js @@ -1,11 +1,12 @@ -import React from "react"; -import { Query } from "react-apollo"; -import gql from "graphql-tag"; -import { withStyles } from "@material-ui/core/styles"; +import CircularProgress from '@material-ui/core/CircularProgress' +import { withStyles } from '@material-ui/core/styles' +import Table from '@material-ui/core/Table/Table' +import TableBody from '@material-ui/core/TableBody/TableBody' +import gql from 'graphql-tag' +import React from 'react' +import { Query } from 'react-apollo' -import CircularProgress from "@material-ui/core/CircularProgress"; - -import BugSummary from "./BugSummary"; +import BugSummary from './BugSummary' const QUERY = gql` { @@ -22,32 +23,36 @@ const QUERY = gql` } ${BugSummary.fragment} -`; +` const styles = theme => ({ main: { maxWidth: 600, - margin: "auto", + margin: 'auto', marginTop: theme.spacing.unit * 4 } -}); +}) -const List = withStyles(styles)(({ bugs, classes }) => ( +const List = withStyles(styles)(({bugs, classes}) => ( <main className={classes.main}> - {bugs.edges.map(({ cursor, node }) => ( - <BugSummary bug={node} key={cursor} /> - ))} + <Table className={classes.table}> + <TableBody> + {bugs.edges.map(({ cursor, node }) => ( + <BugSummary bug={node} key={cursor} /> + ))} + </TableBody> + </Table> </main> -)); +)) const ListPage = () => ( <Query query={QUERY}> - {({ loading, error, data }) => { - if (loading) return <CircularProgress />; - if (error) return <p>Error.</p>; - return <List bugs={data.defaultRepository.bugs} />; + {({loading, error, data}) => { + if (loading) return <CircularProgress/> + if (error) return <p>Error.</p> + return <List bugs={data.defaultRepository.bugs}/> }} </Query> -); +) -export default ListPage; +export default ListPage |