webui: Basic bug list

Quentin Gliech created 7 years ago

Change summary

webui/src/App.js        | 24 +++++++++++++++------
webui/src/BugSummary.js |  4 ++
webui/src/ListPage.js   | 46 +++++++++++++++++++++++++++++++++++++++++++
3 files changed, 66 insertions(+), 8 deletions(-)

Detailed changes

webui/src/App.js

@@ -1,5 +1,7 @@
 import React from "react";
 import { withRouter, Switch, Route } from "react-router";
+import { Link } from "react-router-dom";
+import { withStyles } from "@material-ui/core/styles";
 
 import AppBar from "@material-ui/core/AppBar";
 import CssBaseline from "@material-ui/core/CssBaseline";
@@ -7,24 +9,32 @@ import Toolbar from "@material-ui/core/Toolbar";
 import Typography from "@material-ui/core/Typography";
 
 import BugPage from "./BugPage";
+import ListPage from "./ListPage";
 
-const Home = () => <h1>Home</h1>;
+const styles = theme => ({
+  appTitle: {
+    color: "white",
+    textDecoration: "none"
+  }
+});
 
-const App = ({ location }) => (
+const App = ({ location, classes }) => (
   <React.Fragment>
     <CssBaseline />
     <AppBar position="static" color="primary">
       <Toolbar>
-        <Typography variant="title" color="inherit">
-          git-bug-webui(1)
-        </Typography>
+        <Link to="/" className={classes.appTitle}>
+          <Typography variant="title" color="inherit">
+            git-bug-webui(1)
+          </Typography>
+        </Link>
       </Toolbar>
     </AppBar>
     <Switch>
-      <Route path="/" exact component={Home} />
+      <Route path="/" exact component={ListPage} />
       <Route path="/bug/:id" exact component={BugPage} />
     </Switch>
   </React.Fragment>
 );
 
-export default withRouter(App);
+export default withStyles(styles)(withRouter(App));

webui/src/BugSummary.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { Link } from "react-router-dom";
 import gql from "graphql-tag";
 import { withStyles } from "@material-ui/core/styles";
 
@@ -28,7 +29,8 @@ const BugSummary = ({ bug, classes }) => (
         {bug.title}
       </Typography>
       <Typography variant="subheading" component="h3" title={bug.id}>
-        #{bug.id.slice(0, 8)} • {bug.status.toUpperCase()}
+        <Link to={"/bug/" + bug.id.slice(0, 8)}>#{bug.id.slice(0, 8)}</Link> •{" "}
+        {bug.status.toUpperCase()}
       </Typography>
       <div className={classes.labelList}>
         {bug.labels.map(label => (

webui/src/ListPage.js

@@ -0,0 +1,46 @@
+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 BugSummary from "./BugSummary";
+
+const QUERY = gql`
+  {
+    bugs: allBugs {
+      ...BugSummary
+    }
+  }
+
+  ${BugSummary.fragment}
+`;
+
+const styles = theme => ({
+  main: {
+    maxWidth: 600,
+    margin: "auto",
+    marginTop: theme.spacing.unit * 4
+  }
+});
+
+const List = withStyles(styles)(({ bugs, classes }) => (
+  <main className={classes.main}>
+    {bugs.map(bug => (
+      <BugSummary bug={bug} key={bug.id} />
+    ))}
+  </main>
+));
+
+const ListPage = () => (
+  <Query query={QUERY}>
+    {({ loading, error, data }) => {
+      if (loading) return <CircularProgress />;
+      if (error) return <p>Error.</p>;
+      return <List bugs={data.bugs} />;
+    }}
+  </Query>
+);
+
+export default ListPage;