1 files changed, 46 insertions, 6 deletions

diff --git a/webui/src/pages/identity/BugList.tsx b/webui/src/pages/identity/BugList.tsx
index e1083cfb..623deda5 100644
--- a/webui/src/pages/identity/BugList.tsx
+++ b/webui/src/pages/identity/BugList.tsx
@@ -1,18 +1,37 @@
 import React from 'react';
 
-import { Link } from '@material-ui/core';
+import { Card, Link, Typography } from '@material-ui/core';
 import CircularProgress from '@material-ui/core/CircularProgress';
+import { makeStyles } from '@material-ui/core/styles';
+
+import Date from '../../components/Date';
 
 import { useGetBugsByUserQuery } from './GetBugsByUser.generated';
 
+const useStyles = makeStyles((theme) => ({
+  main: {
+    ...theme.typography.body2,
+  },
+  bugLink: {
+    ...theme.typography.button,
+  },
+  cards: {
+    backgroundColor: theme.palette.background.default,
+    color: theme.palette.info.contrastText,
+    padding: theme.spacing(1),
+    margin: theme.spacing(1),
+  },
+}));
+
 type Props = {
   humanId: string;
 };
 
 function BugList({ humanId }: Props) {
+  const classes = useStyles();
   const { loading, error, data } = useGetBugsByUserQuery({
     variables: {
-      query: 'author:' + humanId,
+      query: 'author:' + humanId + ' sort:creation',
     },
   });
 
@@ -22,10 +41,31 @@ function BugList({ humanId }: Props) {
 
   console.log(bugs);
   return (
-    <ol>
-      <li>{bugs ? bugs[0].title : ''}</li>
-      <Link href={'/bug/' + (bugs ? bugs[0].id : '')}>Klick</Link>
-    </ol>
+    <div className={classes.main}>
+      {bugs?.map((bug, index) => {
+        return (
+          <Card className={classes.cards}>
+            <Typography variant="overline" component="h2">
+              <Link
+                className={classes.bugLink}
+                href={'/bug/' + bug.id}
+                color={'inherit'}
+              >
+                {bug.title}
+              </Link>
+            </Typography>
+            <Typography variant="subtitle2">
+              Created&nbsp;
+              <Date date={bug.createdAt} />
+            </Typography>
+            <Typography variant="subtitle2">
+              Last edited&nbsp;
+              <Date date={bug.createdAt} />
+            </Typography>
+          </Card>
+        );
+      })}
+    </div>
   );
 }