From 0e94e749b03244e5bfb216429b67a24003b4ea39 Mon Sep 17 00:00:00 2001
From: thomas <toma.laforge@gmail.com>
Date: Mon, 1 Apr 2024 20:25:58 +0200
Subject: [PATCH] feat: add leaderboard

---
 docs/astro.config.mjs                         | 26 ++++++-------
 docs/src/components/github/github-store.ts    |  4 ++
 .../leaderboard/LeaderboardAnswer.svelte      | 38 +++++++++++--------
 .../leaderboard/LeaderboardChallenge.svelte   | 34 ++++++++++-------
 .../leaderboard/LeaderboardCommit.svelte      | 38 +++++++++++--------
 5 files changed, 84 insertions(+), 56 deletions(-)

diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
index 98f28c0..bce29de 100644
--- a/docs/astro.config.mjs
+++ b/docs/astro.config.mjs
@@ -54,19 +54,19 @@ export default defineConfig({
         ru: 'Руководство'
       }
     },
-    //   {
-    //   label: 'Leaderboard',
-    //   autogenerate: {
-    //     directory: 'leaderboard',
-    //     collapsed: true
-    //   },
-    //   translations: {
-    //     es: 'Leaderboard',
-    //     fr: 'Leaderboard',
-    //     pt: 'Leaderboard',
-    //     ru: 'Leaderboard'
-    //   }
-    // },
+      {
+      label: 'Leaderboard',
+      autogenerate: {
+        directory: 'leaderboard',
+        collapsed: true
+      },
+      translations: {
+        es: 'Leaderboard',
+        fr: 'Leaderboard',
+        pt: 'Leaderboard',
+        ru: 'Leaderboard'
+      }
+    },
     {
       label: 'Challenges',
       autogenerate: {
diff --git a/docs/src/components/github/github-store.ts b/docs/src/components/github/github-store.ts
index f3e027c..d186634 100644
--- a/docs/src/components/github/github-store.ts
+++ b/docs/src/components/github/github-store.ts
@@ -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);
   }
 }
 
diff --git a/docs/src/components/leaderboard/LeaderboardAnswer.svelte b/docs/src/components/leaderboard/LeaderboardAnswer.svelte
index 9f56ef4..e18997c 100644
--- a/docs/src/components/leaderboard/LeaderboardAnswer.svelte
+++ b/docs/src/components/leaderboard/LeaderboardAnswer.svelte
@@ -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;
diff --git a/docs/src/components/leaderboard/LeaderboardChallenge.svelte b/docs/src/components/leaderboard/LeaderboardChallenge.svelte
index ed2e839..9d572c9 100644
--- a/docs/src/components/leaderboard/LeaderboardChallenge.svelte
+++ b/docs/src/components/leaderboard/LeaderboardChallenge.svelte
@@ -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;
diff --git a/docs/src/components/leaderboard/LeaderboardCommit.svelte b/docs/src/components/leaderboard/LeaderboardCommit.svelte
index 339a474..be9737b 100644
--- a/docs/src/components/leaderboard/LeaderboardCommit.svelte
+++ b/docs/src/components/leaderboard/LeaderboardCommit.svelte
@@ -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;