diff options
| -rw-r--r-- | webui/src/App.js | 4 | ||||
| -rw-r--r-- | webui/src/bug/Bug.js (renamed from webui/src/Bug.js) | 6 | ||||
| -rw-r--r-- | webui/src/bug/BugPage.js (renamed from webui/src/BugPage.js) | 0 | ||||
| -rw-r--r-- | webui/src/bug/Comment.js (renamed from webui/src/Comment.js) | 0 | ||||
| -rw-r--r-- | webui/src/list/BugRow.js (renamed from webui/src/BugSummary.js) | 53 | ||||
| -rw-r--r-- | webui/src/list/List.js (renamed from webui/src/ListPage.js) | 53 | ||||
| -rw-r--r-- | webui/src/list/ListPage.js | 45 |
7 files changed, 85 insertions, 76 deletions
diff --git a/webui/src/App.js b/webui/src/App.js index ced02e43..a8157662 100644 --- a/webui/src/App.js +++ b/webui/src/App.js @@ -7,8 +7,8 @@ import React from 'react' import { Route, Switch, withRouter } from 'react-router' import { Link } from 'react-router-dom' -import BugPage from './BugPage' -import ListPage from './ListPage' +import BugPage from './bug/BugPage' +import ListPage from './list/ListPage' const styles = theme => ({ appTitle: { diff --git a/webui/src/Bug.js b/webui/src/bug/Bug.js index 91463b51..33ecdd79 100644 --- a/webui/src/Bug.js +++ b/webui/src/bug/Bug.js @@ -1,7 +1,6 @@ import { withStyles } from '@material-ui/core/styles' import gql from 'graphql-tag' import React from 'react' -import BugSummary from './BugSummary' import Comment from './Comment' @@ -15,7 +14,6 @@ const styles = theme => ({ const Bug = ({bug, classes}) => ( <main className={classes.main}> - <BugSummary bug={bug}/> {bug.comments.edges.map(({cursor, node}) => ( <Comment key={cursor} comment={node}/> @@ -25,7 +23,6 @@ const Bug = ({bug, classes}) => ( Bug.fragment = gql` fragment Bug on Bug { - ...BugSummary comments(first: 10) { edges { cursor @@ -35,8 +32,7 @@ Bug.fragment = gql` } } } - - ${BugSummary.fragment} + ${Comment.fragment} ` diff --git a/webui/src/BugPage.js b/webui/src/bug/BugPage.js index a91030ab..a91030ab 100644 --- a/webui/src/BugPage.js +++ b/webui/src/bug/BugPage.js diff --git a/webui/src/Comment.js b/webui/src/bug/Comment.js index bc108083..bc108083 100644 --- a/webui/src/Comment.js +++ b/webui/src/bug/Comment.js diff --git a/webui/src/BugSummary.js b/webui/src/list/BugRow.js index 5ffa8e05..1ce5ea06 100644 --- a/webui/src/BugSummary.js +++ b/webui/src/list/BugRow.js @@ -5,9 +5,9 @@ import Tooltip from '@material-ui/core/Tooltip/Tooltip' import Typography from '@material-ui/core/Typography' import ErrorOutline from '@material-ui/icons/ErrorOutline' import gql from 'graphql-tag' +import * as moment from 'moment' import React from 'react' import { Link } from 'react-router-dom' -import * as moment from 'moment' const Open = ({className}) => <Tooltip title="Open"> <ErrorOutline nativeColor='#28a745' className={className}/> @@ -18,11 +18,14 @@ const Closed = ({className}) => <Tooltip title="Closed"> </Tooltip> const Status = ({status, className}) => { - switch(status) { - case 'OPEN': return <Open className={className}/> - case 'CLOSED': return <Closed className={className}/> - default: return 'unknown status ' + status - } + switch (status) { + case 'OPEN': + return <Open className={className}/> + case 'CLOSED': + return <Closed className={className}/> + default: + return 'unknown status ' + status + } } const styles = theme => ({ @@ -33,6 +36,9 @@ const styles = theme => ({ status: { margin: 10 }, + expand: { + width: '100%' + }, title: { display: 'inline-block', textDecoration: 'none' @@ -44,26 +50,29 @@ const styles = theme => ({ padding: '0 4px', margin: '0 1px', backgroundColor: '#da9898', - borderRadius: '3px', + borderRadius: '3px' } - }, + } }) -const BugSummary = ({bug, classes}) => ( +const BugRow = ({bug, classes}) => ( <TableRow hover> <TableCell className={classes.cell}> <Status status={bug.status} className={classes.status}/> - <div> - <Link to={'bug/'+bug.humanId}> - <Typography variant={'title'} className={classes.title}> - {bug.title} - </Typography> + <div className={classes.expand}> + <Link to={'bug/' + bug.humanId}> + <div className={classes.expand}> + + <Typography variant={'title'} className={classes.title}> + {bug.title} + </Typography> + <span className={classes.labels}> + {bug.labels.map(l => ( + <span key={l}>{l}</span>) + )} + </span> + </div> </Link> - <span className={classes.labels}> - {bug.labels.map(l => ( - <span key={l}>{l}</span>) - )} - </span> <Typography color={'textSecondary'}> {bug.humanId} opened <Tooltip title={moment(bug.createdAt).format('MMMM D, YYYY, h:mm a')}> @@ -76,8 +85,8 @@ const BugSummary = ({bug, classes}) => ( </TableRow> ) -BugSummary.fragment = gql` - fragment BugSummary on Bug { +BugRow.fragment = gql` + fragment BugRow on Bug { id humanId title @@ -90,4 +99,4 @@ BugSummary.fragment = gql` } ` -export default withStyles(styles)(BugSummary) +export default withStyles(styles)(BugRow) diff --git a/webui/src/ListPage.js b/webui/src/list/List.js index 31f010c0..880782c7 100644 --- a/webui/src/ListPage.js +++ b/webui/src/list/List.js @@ -1,39 +1,9 @@ -// @flow -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 TablePagination from '@material-ui/core/TablePagination/TablePagination' -import gql from 'graphql-tag' import React from 'react' -import { Query } from 'react-apollo' - -import BugSummary from './BugSummary' - -const QUERY = gql` - query($first: Int = 10, $last: Int, $after: String, $before: String) { - defaultRepository { - bugs: allBugs(first: $first, last: $last, after: $after, before: $before) { - totalCount - edges { - cursor - node { - ...BugSummary - } - } - pageInfo{ - hasNextPage - hasPreviousPage - startCursor - endCursor - } - } - } - } - - - ${BugSummary.fragment} -` +import BugRow from './BugRow' const styles = theme => ({ main: { @@ -43,7 +13,7 @@ const styles = theme => ({ } }) -const List = withStyles(styles)(class List extends React.Component { +class List extends React.Component { props: { bugs: Array, @@ -100,7 +70,7 @@ const List = withStyles(styles)(class List extends React.Component { return } - throw 'non neighbour page pagination is not supported' + throw new Error('non neighbour page pagination is not supported') } handleChangeRowsPerPage = event => { @@ -127,7 +97,6 @@ const List = withStyles(styles)(class List extends React.Component { } updateQuery = (previousResult, {fetchMoreResult}) => { - console.log(fetchMoreResult) return fetchMoreResult ? fetchMoreResult : previousResult } @@ -140,7 +109,7 @@ const List = withStyles(styles)(class List extends React.Component { <Table className={classes.table}> <TableBody> {bugs.edges.map(({cursor, node}) => ( - <BugSummary bug={node} key={cursor}/> + <BugRow bug={node} key={cursor}/> ))} </TableBody> </Table> @@ -161,16 +130,6 @@ const List = withStyles(styles)(class List extends React.Component { </main> ) } -}) +} -const ListPage = () => ( - <Query query={QUERY}> - {({loading, error, data, fetchMore}) => { - if (loading) return <CircularProgress/> - if (error) return <p>Error.</p> - return <List bugs={data.defaultRepository.bugs} fetchMore={fetchMore}/> - }} - </Query> -) - -export default ListPage +export default withStyles(styles)(List) diff --git a/webui/src/list/ListPage.js b/webui/src/list/ListPage.js new file mode 100644 index 00000000..b7de735f --- /dev/null +++ b/webui/src/list/ListPage.js @@ -0,0 +1,45 @@ +// @flow +import CircularProgress from '@material-ui/core/CircularProgress' +import gql from 'graphql-tag' +import React from 'react' +import { Query } from 'react-apollo' + +import BugRow from './BugRow' +import List from './List' + +const QUERY = gql` + query($first: Int = 10, $last: Int, $after: String, $before: String) { + defaultRepository { + bugs: allBugs(first: $first, last: $last, after: $after, before: $before) { + totalCount + edges { + cursor + node { + ...BugRow + } + } + pageInfo{ + hasNextPage + hasPreviousPage + startCursor + endCursor + } + } + } + } + + + ${BugRow.fragment} +` + +const ListPage = () => ( + <Query query={QUERY}> + {({loading, error, data, fetchMore}) => { + if (loading) return <CircularProgress/> + if (error) return <p>Error.</p> + return <List bugs={data.defaultRepository.bugs} fetchMore={fetchMore}/> + }} + </Query> +) + +export default ListPage |