webui: reorganize the code

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: {

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}
 `
 

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)

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)

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