blob: a9eaa8f417e0fad3b97b6f094fe8d8fda1e82e88 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
import axios from 'axios';
import { CSSProperties, useEffect, useState } from 'react';
function IssueTag(props: { data: any; }) {
return <div
className='tag dispinbl'
style={{
'--color': '#' + props.data.color,
} as CSSProperties}
>
<span className='label'>{props.data.name}</span>
</div>;
}
function Issue(props: { data: any; }) {
return <a href={props.data.html_url} className='github-issue dispbl round-t pad-m bg-700'>
<h3 className='title dispinbl'>
<span className='number subtile'>#{props.data.number}</span>
{props.data.title}
</h3>
<div className='tags'>
{props.data.labels.map((label: any) => <IssueTag data={label} />)}
</div>
</a>;
}
export function IssueList() {
var [githubIssues, setGithubIssues] = useState<any[]>();
useEffect(() => {
(async () => {
var githubIssuesRequest = await axios.request({
url: 'https://api.github.com/repos/lonkaars/connect-4/issues?state=open',
});
setGithubIssues(githubIssuesRequest.data.filter((issue: any) => issue.milestone?.id == 6663987));
})();
}, []);
return <div className='github-issue-list'>
{githubIssues?.map(issue => <Issue data={issue} />)}
</div>;
}
|