feat: add leaderboard

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

View File

@@ -54,19 +54,19 @@ export default defineConfig({
ru: 'Руководство' ru: 'Руководство'
} }
}, },
// { {
// label: 'Leaderboard', label: 'Leaderboard',
// autogenerate: { autogenerate: {
// directory: 'leaderboard', directory: 'leaderboard',
// collapsed: true collapsed: true
// }, },
// translations: { translations: {
// es: 'Leaderboard', es: 'Leaderboard',
// fr: 'Leaderboard', fr: 'Leaderboard',
// pt: 'Leaderboard', pt: 'Leaderboard',
// ru: 'Leaderboard' ru: 'Leaderboard'
// } }
// }, },
{ {
label: 'Challenges', label: 'Challenges',
autogenerate: { autogenerate: {

View File

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

View File

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

View File

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

View File

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