1import React from 'react';
 2
 3import { Card, 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  console.log(bugs);
43  return (
44    <div className={classes.main}>
45      {bugs?.map((bug, index) => {
46        return (
47          <Card className={classes.cards}>
48            <Typography variant="overline" component="h2">
49              <Link
50                className={classes.bugLink}
51                href={'/bug/' + bug.id}
52                color={'inherit'}
53              >
54                {bug.title}
55              </Link>
56            </Typography>
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    </div>
69  );
70}
71
72export default BugList;