From 2530cee1eac225924e1119554cf475cdc46ed7dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20Mur=C3=A9?= Date: Wed, 15 Aug 2018 15:50:19 +0200 Subject: [PATCH] webui: reorganize the code --- 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/{BugSummary.js => list/BugRow.js} | 53 ++++++++++++--------- webui/src/{ListPage.js => list/List.js} | 53 +++------------------ webui/src/list/ListPage.js | 45 +++++++++++++++++ 7 files changed, 85 insertions(+), 76 deletions(-) rename webui/src/{ => bug}/Bug.js (86%) rename webui/src/{ => bug}/BugPage.js (100%) rename webui/src/{ => bug}/Comment.js (100%) rename webui/src/{BugSummary.js => list/BugRow.js} (68%) rename webui/src/{ListPage.js => list/List.js} (70%) create mode 100644 webui/src/list/ListPage.js 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 similarity index 86% rename from webui/src/Bug.js rename to 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}) => (
- {bug.comments.edges.map(({cursor, 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 similarity index 100% rename from webui/src/BugPage.js rename to webui/src/bug/BugPage.js diff --git a/webui/src/Comment.js b/webui/src/bug/Comment.js similarity index 100% rename from webui/src/Comment.js rename to webui/src/bug/Comment.js diff --git a/webui/src/BugSummary.js b/webui/src/list/BugRow.js similarity index 68% rename from webui/src/BugSummary.js rename to 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}) => @@ -18,11 +18,14 @@ const Closed = ({className}) => const Status = ({status, className}) => { - switch(status) { - case 'OPEN': return - case 'CLOSED': return - default: return 'unknown status ' + status - } + switch (status) { + case 'OPEN': + return + case 'CLOSED': + return + 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}) => ( -
- - - {bug.title} - +
+ +
+ + + {bug.title} + + + {bug.labels.map(l => ( + {l}) + )} + +
- - {bug.labels.map(l => ( - {l}) - )} - {bug.humanId} opened @@ -76,8 +85,8 @@ const BugSummary = ({bug, classes}) => ( ) -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 similarity index 70% rename from webui/src/ListPage.js rename to 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 { {bugs.edges.map(({cursor, node}) => ( - + ))}
@@ -161,16 +130,6 @@ const List = withStyles(styles)(class List extends React.Component {
) } -}) +} -const ListPage = () => ( - - {({loading, error, data, fetchMore}) => { - if (loading) return - if (error) return

Error.

- return - }} - -) - -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 = () => ( + + {({loading, error, data, fetchMore}) => { + if (loading) return + if (error) return

Error.

+ return + }} + +) + +export default ListPage