Michael Muré created
webui/src/App.js | 4 +-
webui/src/bug/Bug.js | 6 ---
webui/src/bug/BugPage.js | 0
webui/src/bug/Comment.js | 0
webui/src/list/BugRow.js | 53 +++++++++++++++++++++++----------------
webui/src/list/List.js | 53 ++++-----------------------------------
webui/src/list/ListPage.js | 45 +++++++++++++++++++++++++++++++++
7 files changed, 85 insertions(+), 76 deletions(-)
@@ -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: {
@@ -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}
`
@@ -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)
@@ -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)
@@ -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