-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtopRepositories.js
More file actions
62 lines (58 loc) · 1.53 KB
/
topRepositories.js
File metadata and controls
62 lines (58 loc) · 1.53 KB
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import { useEffect, useState } from "react";
import Link from "next/link";
function TopRepositories({ repositories = [] }) {
const [repos, setRepos] = useState([]);
const [hasMore, setHasMore] = useState(false);
useEffect(() => {
if (repositories.length) {
let newRepos = [],
maxLen = Math.min(repositories.length, 5);
for (let i = 0; i < maxLen; i++) {
newRepos.push({
...repositories[repositories.length - i - 1],
});
}
setRepos(newRepos);
if (repositories.length > 5) {
setHasMore(true);
} else {
setHasMore(false);
}
} else {
setRepos([]);
setHasMore(false);
}
}, [repositories]);
return (
<div className="my-8">
<div className="text-sm text-type-secondary mx-8 border-b border-grey py-2 mb-4">
Repositories
</div>
<ul className="menu compact mx-3">
{repos.map((r) => {
return (
<li className="" key={r.id}>
<Link href={"/" + r.username + "/" + r.name} className="rounded" data-test="top_repositories">
{r.name}
</Link>
</li>
);
})}
</ul>
{hasMore ? (
<div className="mx-6 my-2">
<Link
href={"/" + repos[0].username}
className="btn btn-xs btn-link"
data-test="all_repositories"
>
All Repositories
</Link>
</div>
) : (
""
)}
</div>
);
}
export default TopRepositories;