1import React from 'react';
 2
 3import { Card, Divider, Link, Typography } from '@material-ui/core';
 4import CircularProgress from '@material-ui/core/CircularProgress';
 5import { makeStyles } from '@material-ui/core/styles';
 6
 7import Date from '../../components/Date';
 8
 9import { useGetBugsByUserQuery } from './GetBugsByUser.generated';
10
11const useStyles = makeStyles((theme) => ({
12  main: {
13    ...theme.typography.body2,
14  },
15  bugLink: {
16    ...theme.typography.button,
17  },
18  cards: {
19    backgroundColor: theme.palette.background.default,
20    color: theme.palette.info.contrastText,
21    padding: theme.spacing(1),
22    margin: theme.spacing(1),
23  },
24}));
25
26type Props = {
27  humanId: string;
28};
29
30function BugList({ humanId }: Props) {
31  const classes = useStyles();
32  const { loading, error, data } = useGetBugsByUserQuery({
33    variables: {
34      query: 'author:' + humanId + ' sort:creation',
35    },
36  });
37
38  if (loading) return <CircularProgress />;
39  if (error) return <p>Error: {error}</p>;
40  const bugs = data?.repository?.allBugs.nodes;
41
42  return (
43    <div className={classes.main}>
44      {bugs?.map((bug, index) => {
45        return (
46          <Card className={classes.cards} key={index}>
47            <Typography variant="overline" component="h2">
48              <Link
49                className={classes.bugLink}
50                href={'/bug/' + bug.id}
51                color={'inherit'}
52              >
53                {bug.title}
54              </Link>
55            </Typography>
56            <Divider />
57            <Typography variant="subtitle2">
58              Created&nbsp;
59              <Date date={bug.createdAt} />
60            </Typography>
61            <Typography variant="subtitle2">
62              Last edited&nbsp;
63              <Date date={bug.createdAt} />
64            </Typography>
65          </Card>
66        );
67      })}
68      {bugs?.length === 0 && <p>No authored bugs by this user found.</p>}
69    </div>
70  );
71}
72
73export default BugList;