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