vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-11 05:13:02 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: add leaderboard

Browse Source
This commit is contained in:
thomas
2024-04-01 20:25:58 +02:00
parent 042541c81f
commit 0e94e749b0
5 changed files with 84 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/src/components/github/github-store.ts
View File

@@ -1,6 +1,7 @@
import { derived, writable } from 'svelte/store';
export const token = writable<string | null>(null);
export const isConnected = writable(false);
export const isLoading = writable(true);
export const error = writable(false);
@@ -18,6 +19,9 @@ export function loadToken() {
const persistedToken = localStorage.getItem(TOKEN_KEY);
if (persistedToken) {
token.set(JSON.parse(persistedToken));
isConnected.set(true);
} else {
isConnected.set(false);
}
}

38
docs/src/components/leaderboard/LeaderboardAnswer.svelte
View File

@@ -1,7 +1,7 @@
<script>
import UserBox from './UserBox.svelte';
import Spinner from './Spinner.svelte';
import { token } from '../github/github-store';
import { isConnected, token } from '../github/github-store';
let users = [];
let loading = true;
@@ -11,7 +11,7 @@
if (token) {
fetchGitHubUsers();
}
})
});
async function fetchGitHubUsers() {
try {
@@ -47,7 +47,7 @@
}
});
if(total_count < page * 100) {
if (total_count < page * 100) {
break;
}
@@ -71,22 +71,30 @@
</script>
{#if loading}
<Spinner />
{:else if error}
<p>Error: {error}</p>
{#if !$isConnected}
<div class="important-block not-connected">Log in to Github to see the list</div>
{:else}
<div class="box not-content">
{#each users as { avatar, count, login,challengeNumber }, index}
<UserBox {avatar} {login} {index}>
{count} Answers
<div slot="addon" class="challenge-number">{challengeNumber.join(', ')}</div>
</UserBox>
{/each}
</div>
{#if loading}
<Spinner />
{:else if error}
<p>Error: {error}</p>
{:else}
<div class="box not-content">
{#each users as { avatar, count, login, challengeNumber }, index}
<UserBox {avatar} {login} {index}>
{count} Answers
<div slot="addon" class="challenge-number">{challengeNumber.join(', ')}</div>
</UserBox>
{/each}
</div>
{/if}
{/if}
<style>
.not-connected {
margin-top: 1rem;
}
.box {
display: flex;
flex-wrap: wrap;

34
docs/src/components/leaderboard/LeaderboardChallenge.svelte
View File

@@ -1,7 +1,7 @@
<script>
import UserBox from './UserBox.svelte';
import Spinner from './Spinner.svelte';
import { token } from '../github/github-store';
import { isConnected, token } from '../github/github-store';
let users = [];
@@ -12,7 +12,7 @@
if (token) {
fetchGitHubUsers();
}
})
});
const createUser = (items) => {
const prCounts = {};
@@ -55,21 +55,29 @@
}
</script>
{#if loading}
<Spinner />
{:else if error}
<p>Error: {error}</p>
{#if !$isConnected}
<div class="important-block not-connected">Log in to Github to see the list</div>
{:else}
<div class="box not-content">
{#each users as { avatar, count, login }, index}
<UserBox {avatar} {login} {index}>
{count} Challenges Created
</UserBox>
{/each}
</div>
{#if loading}
<Spinner />
{:else if error}
<p>Error: {error}</p>
{:else}
<div class="box not-content">
{#each users as { avatar, count, login }, index}
<UserBox {avatar} {login} {index}>
{count} Challenges Created
</UserBox>
{/each}
</div>
{/if}
{/if}
<style>
.not-connected {
margin-top: 1rem;
}
.box {
display: flex;
flex-wrap: wrap;

38
docs/src/components/leaderboard/LeaderboardCommit.svelte
View File

@@ -1,7 +1,7 @@
<script>
import UserBox from './UserBox.svelte';
import Spinner from './Spinner.svelte';
import { token } from '../github/github-store';
import { isConnected, token } from '../github/github-store';
let users = [];
let loading = true;
@@ -11,7 +11,7 @@
if (token) {
fetchGitHubUsers();
}
})
});
async function fetchGitHubUsers() {
try {
@@ -19,7 +19,7 @@
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}`
}
@@ -47,7 +47,7 @@
}
});
if(total_count < page * 100) {
if (total_count < page * 100) {
break;
}
@@ -71,21 +71,29 @@
}
</script>
{#if loading}
<Spinner />
{:else if error}
<p>Error: {error}</p>
{#if !$isConnected}
<div class="important-block not-connected">Log in to Github to see the list</div>
{:else}
<div class="box not-content">
{#each users as { avatar, count, login }, index}
<UserBox {avatar} {login} {index}>
{count} PRs merged
</UserBox>
{/each}
</div>
{#if loading}
<Spinner />
{:else if error}
<p>Error: {error}</p>
{:else}
<div class="box not-content">
{#each users as { avatar, count, login }, index}
<UserBox {avatar} {login} {index}>
{count} PRs merged
</UserBox>
{/each}
</div>
{/if}
{/if}
<style>
.not-connected {
margin-top: 1rem;
}
.box {
display: flex;
flex-wrap: wrap;