Refactor commit history view

Signed-off-by: Rūdolfs Ošiņš <rudolfs@osins.org>

src/components/List.svelte

@@ -1,58 +0,0 @@
-<script lang="ts">
-  import { fade } from "svelte/transition";
-
-  import Button from "@app/components/Button.svelte";
-  import Loading from "@app/components/Loading.svelte";
-
-  type Item = $$Generic;
-
-  export let complete = false;
-  export let items: Item[];
-  export let query: () => Promise<Item[]>;
-
-  // Used to handle the display of the trigger to load more items, according to the current loading state.
-  let loading = false;
-
-  const transitionParams = { duration: 200 };
-
-  const fetchMore = async () => {
-    loading = true;
-    const response = await query();
-
-    if (response.length > 0) {
-      items = [...items, ...response];
-    } else {
-      complete = true;
-    }
-
-    loading = false;
-  };
-</script>
-
-<style>
-  .more {
-    margin-top: 2rem;
-    text-align: center;
-  }
-</style>
-
-<slot name="list" {items} />
-{#if !complete}
-  <slot name="more" {fetchMore} {loading}>
-    {#if loading}
-      <div class="more" transition:fade|local={transitionParams}>
-        <Loading small />
-      </div>
-    {:else}
-      <div class="more" transition:fade|local={transitionParams}>
-        <Button
-          variant="foreground"
-          waiting={loading}
-          disabled={loading}
-          on:click={fetchMore}>
-          More
-        </Button>
-      </div>
-    {/if}
-  </slot>
-{/if}

src/views/projects/History.svelte

@@ -5,31 +5,61 @@
   import { HttpdClient } from "@httpd-client";
   import { groupCommits } from "@app/lib/commit";
 
+  import Button from "@app/components/Button.svelte";
   import CommitTeaser from "./Commit/CommitTeaser.svelte";
-  import List from "@app/components/List.svelte";
+  import ErrorMessage from "@app/components/ErrorMessage.svelte";
+  import Loading from "@app/components/Loading.svelte";
 
-  export let id: string;
+  export let projectId: string;
   export let baseUrl: BaseUrl;
-  export let history: CommitHeader[];
+  export let parentCommit: string;
+
+  const perPage = 30;
+
+  let page = 0;
+  let error: any;
+  let loading = false;
+  let totalCommitCount: number | undefined = undefined;
+  let history: CommitHeader[] = [];
 
   const api = new HttpdClient(baseUrl);
 
-  const fetchMoreCommits = async (): Promise<CommitHeader[]> => {
-    const response = await api.project.getAllCommits(id, {
-      // Fetching 31 elements since we remove the first one
-      parent: history[history.length - 1].id,
-      perPage: 31,
-    });
-    // Removing the first element of the array, since it's the same as the last of the current list
-    return response.commits.slice(1).map(c => c.commit);
-  };
+  async function loadHistory(): Promise<void> {
+    loading = true;
+    try {
+      const response = await api.project.getAllCommits(projectId, {
+        parent: parentCommit,
+        page,
+        perPage,
+      });
+      history = [...history, ...response.commits.map(c => c.commit)];
+      totalCommitCount = response.stats.commits;
+      page += 1;
+    } catch (e) {
+      error = e;
+    } finally {
+      loading = false;
+    }
+  }
 
-  const browseCommit = (event: { detail: string }) => {
+  function goToSourceTreeAtCommit(event: { detail: string }) {
     router.updateProjectRoute({
       view: { resource: "tree" },
       revision: event.detail,
     });
-  };
+  }
+
+  function goToCommit(revision: string) {
+    router.updateProjectRoute({
+      view: { resource: "commits" },
+      revision,
+    });
+  }
+
+  $: showMoreButton =
+    !loading && !error && totalCommitCount && history.length < totalCommitCount;
+
+  loadHistory();
 </script>
 
 <style>
@@ -43,7 +73,11 @@
   .commit-group-headers {
     margin-bottom: 2rem;
   }
-
+  .more {
+    margin-top: 2rem;
+    text-align: center;
+    min-height: 3rem;
+  }
   @media (max-width: 960px) {
     .history {
       padding-left: 2rem;
@@ -51,30 +85,37 @@
   }
 </style>
 
-<div class="history">
-  <List bind:items={history} query={fetchMoreCommits}>
-    <svelte:fragment slot="list" let:items>
-      {@const commits = groupCommits(items)}
-      {#each commits as group (group.time)}
-        <div class="commit-group">
-          <header class="commit-date">
-            <p>{group.date}</p>
-          </header>
-          <div class="commit-group-headers">
-            {#each group.commits as commit (commit.id)}
-              <CommitTeaser
-                {commit}
-                on:click={() => {
-                  router.updateProjectRoute({
-                    view: { resource: "commits" },
-                    revision: commit.id,
-                  });
-                }}
-                on:browseCommit={browseCommit} />
-            {/each}
-          </div>
+{#if history}
+  <div class="history">
+    {#each groupCommits(history) as group (group.time)}
+      <div class="commit-group">
+        <header class="commit-date">
+          <p>{group.date}</p>
+        </header>
+        <div class="commit-group-headers">
+          {#each group.commits as commit (commit.id)}
+            <CommitTeaser
+              {commit}
+              on:click={() => goToCommit(commit.id)}
+              on:browseCommit={goToSourceTreeAtCommit} />
+          {/each}
         </div>
-      {/each}
-    </svelte:fragment>
-  </List>
-</div>
+      </div>
+    {/each}
+    <div class="more">
+      {#if loading}
+        <Loading small={page !== 0} center />
+      {/if}
+
+      {#if showMoreButton}
+        <Button variant="foreground" on:click={loadHistory}>More</Button>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+{#if error}
+  <div class="message">
+    <ErrorMessage message="Couldn't load commits." stackTrace={error} />
+  </div>
+{/if}

src/views/projects/View.svelte

@@ -198,18 +198,7 @@
       {#if activeRoute.params.view.resource === "tree"}
         <Browser {baseUrl} {project} {commit} {tree} {activeRoute} />
       {:else if activeRoute.params.view.resource === "history"}
-        {#await api.project.getAllCommits(project.id, { parent: commit })}
-          <Loading center />
-        {:then history}
-          <History
-            id={project.id}
-            {baseUrl}
-            history={history.commits.map(c => c.commit)} />
-        {:catch e}
-          <div class="message">
-            <ErrorMessage message="Couldn't load commits." stackTrace={e} />
-          </div>
-        {/await}
+        <History projectId={project.id} {baseUrl} parentCommit={commit} />
       {:else if activeRoute.params.view.resource === "commits"}
         {#await api.project.getCommitBySha(id, commit)}
           <Loading center />