Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Refactor commit history view
Rūdolfs Ošiņš committed 3 years ago
commit 67f02463eed9105f84107bec66afbcc7fba35aa0
parent d77b6041a6c411e994e85dd696b4e38a1b3a2024
3 files changed +83 -111
deleted 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}
modified 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}
modified 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 />