f5900b8 Move History state loading to router — radicle-explorer

Radicle web interface

Move History state loading to router

Thomas Scholtes committed 2 years ago

commit f5900b873ffc4923f4ed0d4fa3bd8505589254e1
parent 022bfd55f74f9f48392432a8f74025f16ea05a66

3 files changed +93 -80

modified src/views/projects/History.svelte

@@ -8,56 +8,43 @@

   import CommitTeaser from "./Commit/CommitTeaser.svelte";
   import ErrorMessage from "@app/components/ErrorMessage.svelte";
   import Loading from "@app/components/Loading.svelte";
   import { COMMITS_PER_PAGE } from "./router";
   export let projectId: string;
   export let baseUrl: BaseUrl;
   export let parentCommit: string;
   export let commitHeaders: CommitHeader[];
   export let totalCommitCount: number;
   const perPage = 30;
   const api = new HttpdClient(baseUrl);
   let page = 0;
   let error: any;
   let page = 0;
   let loading = false;
   let totalCommitCount: number | undefined = undefined;
   let history: CommitHeader[] = [];
   const api = new HttpdClient(baseUrl);
   let previousCommit = parentCommit;
   $: showMoreButton =
     !loading && !error && totalCommitCount && history.length < totalCommitCount;
   let allCommitHeaders: CommitHeader[];
   // To avoid a recursive loop when loading the histrory below,
   // we do it in a function outside of the reactive statement.
   function appendHistory(commits: CommitHeader[]) {
     history = [...history, ...commits];
   $: {
     allCommitHeaders = commitHeaders;
     page = 0;
   }
   $: {
     if (previousCommit !== parentCommit) {
       page = 0;
       history = [];
       previousCommit = parentCommit;
       error = undefined;
     }
   async function loadMore() {
     loading = true;
     api.project
       .getAllCommits(projectId, {
         parent: parentCommit,
     page += 1;
     try {
       const response = await api.project.getAllCommits(projectId, {
         parent: allCommitHeaders[0].id,
         page,
         perPage,
       })
       .then(response => {
         appendHistory(response.commits.map(c => c.commit));
         totalCommitCount = response.stats.commits;
       })
       .catch(e => {
         error = e;
       })
       .finally(() => {
         loading = false;
         perPage: COMMITS_PER_PAGE,
       });
       allCommitHeaders = [
         ...allCommitHeaders,
         ...response.commits.map(c => c.commit),
       ];
       totalCommitCount = response.stats.commits;
     } catch (e) {
       error = e;
     }
     loading = false;
   }
 </script>

@@ -86,35 +73,25 @@

   }
 </style>
 {#if history}
   <div class="history">
     {#each groupCommits(history) as group (group.time)}
       <p style:color="var(--color-foreground-6)">{group.date}</p>
       <div class="group">
         {#each group.commits as commit (commit.id)}
           <div class="teaser-wrapper">
             <CommitTeaser {commit} />
           </div>
         {/each}
       </div>
     {/each}
     <div class="more">
       {#if loading}
         <Loading small={page !== 0} center />
       {/if}
       {#if showMoreButton}
         <Button
           variant="foreground"
           on:click={() => {
             page = page + 1;
           }}>
           More
         </Button>
       {/if}
 <div class="history">
   {#each groupCommits(allCommitHeaders) as group (group.time)}
     <p style:color="var(--color-foreground-6)">{group.date}</p>
     <div class="group">
       {#each group.commits as commit (commit.id)}
         <div class="teaser-wrapper">
           <CommitTeaser {commit} />
         </div>
       {/each}
     </div>
   {/each}
   <div class="more">
     {#if loading}
       <Loading small={page !== 0} center />
     {:else if allCommitHeaders.length < totalCommitCount}
       <Button variant="foreground" on:click={loadMore}>More</Button>
     {/if}
   </div>
 {/if}
 </div>
 {#if error}
   <div class="message">

modified src/views/projects/View.svelte

@@ -129,7 +129,8 @@

       <History
         projectId={id}
         {baseUrl}
         parentCommit={view.params.selectedCommit} />
         totalCommitCount={view.totalCommitCount}
         commitHeaders={view.commitHeaders} />
     {:else if view.resource === "commits"}
       {#await api.project.getCommitBySha(id, view.params.selectedCommit)}
         <Loading center />

modified src/views/projects/router.ts

@@ -1,5 +1,12 @@

 import type { LoadError } from "@app/lib/router/definitions";
 import type { Issue, Patch, Project, Remote, Tree } from "@httpd-client";
 import type {
   CommitHeader,
   Issue,
   Patch,
   Project,
   Remote,
   Tree,
 } from "@httpd-client";
 import { get } from "svelte/store";

@@ -7,6 +14,8 @@ import { HttpdClient } from "@httpd-client";

 import { activeRouteStore, push, replace, routeToPath } from "@app/lib/router";
 import { extractBaseUrl } from "@app/lib/utils";
 export const COMMITS_PER_PAGE = 30;
 export interface ProjectRoute {
   resource: "projects";
   params: ProjectsParams;

@@ -78,6 +87,8 @@ export type ProjectLoadedView =

   | {
       resource: "history";
       params: LoadedSourceBrowsingParams;
       commitHeaders: CommitHeader[];
       totalCommitCount: number;
     }
   | { resource: "issue"; params: { issue: string; loadedIssue: Issue } }
   | {

@@ -186,22 +197,46 @@ export async function loadProjectRoute(

         branches,
       );
       const tree = await api.project.getTree(params.id, commit);
       return {
         resource: "projects",
         params: {
           ...params,
           project,
           view: {
             resource: params.view.resource,
             params: {
               loadedBranches: branches,
               loadedPeers: peers,
               loadedTree: tree,
               selectedCommit: commit,
       const viewParams = {
         loadedBranches: branches,
         loadedPeers: peers,
         loadedTree: tree,
         selectedCommit: commit,
       };
       if (params.view.resource === "history") {
         const commitsResponse = await api.project.getAllCommits(project.id, {
           parent: commit,
           page: 0,
           perPage: COMMITS_PER_PAGE,
         });
         return {
           resource: "projects",
           params: {
             ...params,
             project,
             view: {
               resource: params.view.resource,
               params: viewParams,
               commitHeaders: commitsResponse.commits.map(c => c.commit),
               totalCommitCount: commitsResponse.stats.commits,
             },
           },
         },
       };
         };
       } else {
         return {
           resource: "projects",
           params: {
             ...params,
             project,
             view: {
               resource: params.view.resource,
               params: viewParams,
             },
           },
         };
       }
     } else if (params.view.resource === "issue") {
       try {
         const projectPromise = api.project.getById(params.id);