mirror of
https://github.com/Raghu-Ch/angular-challenges.git
synced 2026-02-11 05:13:02 -05:00
feat: create leaderboard
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
33
docs/src/components/leaderboard/Spinner.svelte
Normal file
33
docs/src/components/leaderboard/Spinner.svelte
Normal 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>
|
||||
Reference in New Issue
Block a user