1import React, { useState } from 'react';
 2
 3import CircularProgress from '@material-ui/core/CircularProgress';
 4import { makeStyles } from '@material-ui/styles';
 5
 6import LabelBullet from './LabelBullet';
 7import { useValidLabelsQuery } from './ValidLabelsQuery.generated';
 8
 9const useStyles = makeStyles({
10  list: {
11    listStyleType: 'none',
12    padding: 0,
13  },
14});
15
16const ValidLabels: React.FC = () => {
17  const { loading, error, data } = useValidLabelsQuery();
18  const [filter, setFilter] = useState('');
19  const classes = useStyles();
20  if (loading) return <CircularProgress />;
21  if (error) return <p>Error: {error}</p>;
22  const labels = data?.repository?.validLabels.nodes.filter(
23    label =>
24      filter === '' || label.name.toLowerCase().includes(filter.toLowerCase())
25  );
26
27  return (
28    <>
29      <input
30        type="text"
31        placeholder="Filter labels…"
32        onChange={e => setFilter(e.target.value)}
33        value={filter}
34      />
35      <ul className={classes.list}>
36        {labels?.map(l => (
37          <li key={l.name}>
38            <LabelBullet label={l} />
39            {l.name}
40          </li>
41        ))}
42      </ul>
43    </>
44  );
45};
46
47export default ValidLabels;