feat: create leaderboard

This commit is contained in:
thomas
2024-03-30 13:33:11 +01:00
parent bf3866b705
commit 8561653850
9 changed files with 102 additions and 35 deletions

View File

@@ -1,18 +1,29 @@
<script>
import { onMount } from 'svelte';
import UserBox from './UserBox.svelte';
import Spinner from './Spinner.svelte';
import { token } from '../github/github-store';
let users = [];
let loading = true;
let error = null;
token.subscribe(token => {
if (token) {
fetchGitHubUsers();
}
})
async function fetchGitHubUsers() {
try {
const prCounts = {};
let page = 1;
while (true) {
const response = await fetch(`https://api.github.com/search/issues?q=repo:tomalaforge/angular-challenges+is:pr+label:%22answer%22&per_page=200&page=${page}`);
const response = await fetch(`https://api.github.com/search/issues?q=repo:tomalaforge/angular-challenges+is:pr+label:%22answer%22&per_page=200&page=${page}`, {
headers: {
Authorization: `token ${$token}`
}
});
if (!response.ok) {
throw new Error('API rate limit exceeded. Please try again in a few minutes.');
}
@@ -58,13 +69,10 @@
}
onMount(() => {
fetchGitHubUsers();
});
</script>
{#if loading}
<p>Loading...</p>
<Spinner />
{:else if error}
<p>Error: {error}</p>
{:else}
@@ -84,6 +92,7 @@
justify-items: center;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-top: 2rem;
}
.challenge-number {

View File

@@ -1,12 +1,19 @@
<script>
import { onMount } from 'svelte';
import UserBox from './UserBox.svelte';
import Spinner from './Spinner.svelte';
import { token } from '../github/github-store';
let users = [];
let loading = true;
let error = null;
token.subscribe(token => {
if (token) {
fetchGitHubUsers();
}
})
const createUser = (items) => {
const prCounts = {};
items.forEach((pr) => {
@@ -30,7 +37,11 @@
async function fetchGitHubUsers() {
try {
const response = await fetch(`https://api.github.com/search/issues?q=repo:tomalaforge/angular-challenges+is:pr+label:%22challenge-creation%22`);
const response = await fetch(`https://api.github.com/search/issues?q=repo:tomalaforge/angular-challenges+is:pr+label:%22challenge-creation%22`, {
headers: {
Authorization: `token ${$token}`
}
});
if (!response.ok) {
throw new Error('API rate limit exceeded. Please try again in a few minutes.');
}
@@ -42,19 +53,15 @@
loading = false;
}
}
onMount(() => {
fetchGitHubUsers();
});
</script>
{#if loading}
<p>Loading...</p>
<Spinner />
{:else if error}
<p>Error: {error}</p>
{:else}
<div class="box not-content">
{#each users as { avatar, count, login, challengeNumber }, index}
{#each users as { avatar, count, login }, index}
<UserBox {avatar} {login} {index}>
{count} Challenges Created
</UserBox>
@@ -68,5 +75,6 @@
justify-items: center;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-top: 2rem;
}
</style>

View File

@@ -1,18 +1,29 @@
<script>
import { onMount } from 'svelte';
import UserBox from './UserBox.svelte';
import Spinner from './Spinner.svelte';
import { token } from '../github/github-store';
let users = [];
let loading = true;
let error = null;
token.subscribe(token => {
if (token) {
fetchGitHubUsers();
}
})
async function fetchGitHubUsers() {
try {
const prCounts = {};
let page = 1;
while (true) {
const response = await fetch(`https://api.github.com/search/issues?q=repo:tomalaforge/angular-challenges+is:pr+no:label&per_page=100&page=${page}`);
const response = await fetch(`https://api.github.com/search/issues?q=repo:tomalaforge/angular-challenges+is:pr+no:label&per_page=100&page=${page}`,{
headers: {
Authorization: `token ${$token}`
}
});
if (!response.ok) {
throw new Error('API rate limit exceeded. Please try again in a few minutes.');
}
@@ -49,7 +60,7 @@
avatar: pr.avatar,
count: pr.count,
challengeNumber: pr.challengeNumber
})).filter((r) => r.login !== 'allcontributors[bot]').sort((a, b) => b.count - a.count);
})).filter((r) => r.login !== 'allcontributors[bot]' && r.login !== 'tomalaforge').sort((a, b) => b.count - a.count);
} catch (e) {
error = e.message;
@@ -58,14 +69,10 @@
}
}
onMount(() => {
fetchGitHubUsers();
});
</script>
{#if loading}
<p>Loading...</p>
<Spinner />
{:else if error}
<p>Error: {error}</p>
{:else}
@@ -84,5 +91,6 @@
justify-items: center;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-top: 2rem;
}
</style>

View File

@@ -0,0 +1,33 @@
<div class="spinner-container">
<div class="spinner"></div>
</div>
<style>
.spinner-container {
margin-top: 2rem;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.spinner {
border: 4px solid var(--sl-color-gray-3); /* Light grey border */
border-top: 4px solid var(--sl-color-bg);
border-right: 4px solid var(--sl-color-bg);
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>