feat: fetch top 10 separately

classroomio · Dec 4, 2024 · 517379a · 517379a
1 parent 4d80d95
commit 517379a
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 38 deletions.
diff --git a/README.md b/README.md
@@ -19,6 +19,8 @@ Visualization of the open source projects built by Nigerian developers.
 
 Before running any command, make sure you copy the contents of `.env.example` to `.env` and set the correct values.
 
+- `deno run dev` - Start the both frontend and backend servers.
+
 - `deno run be:dev` - Start the backend server.
 - `deno run be:scrape` - Scrape the repositories.
 

diff --git a/src/lib/pages/api/page.svelte b/src/lib/pages/api/page.svelte
@@ -33,9 +33,9 @@
         {#each navigation as nav}
           <button
             on:click={() => (state = nav.label)}
-            class="p-2 flex items-center gap-5 rounded-md border-2 border-background hover:border-2 hover:border-gray-200 dark:hover:border-neutral-800 {state ===
+            class="p-2 flex items-center gap-5 rounded-md border-2 border-background hover:border-2 hover:border-gray-200 dark:hover:border-neutral-800 cursor-pointer {state ===
               nav.label &&
-              'dark:bg-neutral-800 text-black dark:text-white border-2 border-gray-200 dark:border-neutral-800'}"
+              ' text-black dark:text-white border-2 border-gray-200 dark:border-neutral-800'}"
           >
             <span
               class="px-2 py-1 text-xs rounded-sm uppercase w-[30%] {nav.label ===

diff --git a/src/lib/pages/home/hero.svelte b/src/lib/pages/home/hero.svelte
@@ -1,12 +1,33 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
+  import { Skeleton } from '$lib/components/skeleton';
   import type { Repository } from '$lib/types/repository';
   import { Marquee, MarqueeCard } from '$lib/components/marquee';
   import { BorderBeam } from '$lib/components/border-beam';
+  import { API_BASE_URL } from '$lib/config';
 
-  export let data: Repository[] = [];
+  let data: Repository[] = [];
+  let isFetching = true;
 
-  let firstRow = data.slice(0, data.length / 2);
-  let secondRow = data.slice(data.length / 2);
+  async function fetchOdogwus() {
+    try {
+      const url = new URL(`${API_BASE_URL}/repositories`);
+      const response = await fetch(url);
+      const result = await response.json();
+      data = result.data;
+    } catch (error) {
+      console.error(error);
+    } finally {
+      isFetching = false;
+    }
+  }
+
+  onMount(() => {
+    fetchOdogwus();
+  });
+
+  $: firstRow = data.slice(0, data.length / 2);
+  $: secondRow = data.slice(data.length / 2);
 </script>
 
 <div
@@ -18,16 +39,28 @@
   >
     The Odogwu's
   </h2>
-  <Marquee pauseOnHover class="[--duration:20s]">
-    {#each firstRow as item}
-      <MarqueeCard {...item} />
-    {/each}
-  </Marquee>
-  <Marquee reverse pauseOnHover class="[--duration:20s]">
-    {#each secondRow as item}
-      <MarqueeCard {...item} />
-    {/each}
-  </Marquee>
+
+  {#if isFetching}
+    <div class="flex flex-col gap-4 p-4">
+      <Skeleton class="h-10 w-full" />
+      <Skeleton class="h-8 w-full" />
+      <Skeleton class="h-8 w-full" />
+      <Skeleton class="h-8 w-full" />
+      <Skeleton class="h-8 w-full" />
+      <Skeleton class="h-8 w-full" />
+    </div>
+  {:else}
+    <Marquee pauseOnHover class="[--duration:20s]">
+      {#each firstRow as item}
+        <MarqueeCard {...item} />
+      {/each}
+    </Marquee>
+    <Marquee reverse pauseOnHover class="[--duration:20s]">
+      {#each secondRow as item}
+        <MarqueeCard {...item} />
+      {/each}
+    </Marquee>
+  {/if}
   <div
     class="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white dark:from-background"
   ></div>

diff --git a/src/lib/pages/home/page.svelte b/src/lib/pages/home/page.svelte
@@ -25,9 +25,6 @@
       order: 'desc',
     },
   };
-  let currentPage: number = 1;
-  let currentOrder: string = 'desc';
-  let currentSortBy: string = 'stars';
   let searchValue: string = '';
 
   let isFetching = true;
@@ -120,6 +117,13 @@
   <Sidebar />
 
   <div class="py-6 lg:gap-10 w-full max-w-4xl mx-auto">
+    <Hero />
+
+    <h2
+      class="mt-5 scroll-m-20 border-b pb-4 text-3xl font-semibold tracking-tight text-center transition-colors first:mt-0"
+    >
+      All Projects
+    </h2>
     {#if isFetching && !isMounted}
       <div class="rounded-md border w-full">
         <div class="flex flex-col gap-4 p-4">
@@ -132,26 +136,15 @@
         </div>
       </div>
     {:else}
-      <div>
-        <Hero data={repositories} />
-
-        <div>
-          <h2
-            class="mt-5 scroll-m-20 border-b pb-4 text-3xl font-semibold tracking-tight text-center transition-colors first:mt-0"
-          >
-            All Projects
-          </h2>
-        </div>
-        {#key gettingFreshData}
-          <Table
-            data={repositories}
-            {apiMetadata}
-            bind:searchValue
-            isFetching={gettingFreshData}
-            onSearch={searchRepositories}
-          />
-        {/key}
-      </div>
+      {#key gettingFreshData}
+        <Table
+          data={repositories}
+          {apiMetadata}
+          bind:searchValue
+          isFetching={gettingFreshData}
+          onSearch={searchRepositories}
+        />
+      {/key}
     {/if}
   </div>
 </div>