From 5edcb6c8bd430af4c26567d19c388d4c3e30b681 Mon Sep 17 00:00:00 2001
From: Michael Muré <batolettre@gmail.com>
Date: Tue, 14 Aug 2018 02:06:02 +0200
Subject: webui: revamp the bug list

---
 webui/src/ListPage.js | 47 ++++++++++++++++++++++++++---------------------
 1 file changed, 26 insertions(+), 21 deletions(-)

(limited to 'webui/src/ListPage.js')

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
-- 
cgit