91cfaf0 Add loading more commits in History component — radicle-explorer

modified src/base/projects/History.svelte

@@ -1,10 +1,11 @@

 <script lang="ts">
   import CommitTeaser from "./Commit/CommitTeaser.svelte";
   import { Project, ProjectContent } from "@app/project";
   import type { GroupedCommitsHistory } from "@app/commit";
   import { CommitMetadata, CommitsHistory, groupCommits } from "@app/commit";
   import List from "@app/List.svelte";
   export let project: Project;
   export let history: GroupedCommitsHistory;
   export let history: CommitsHistory;
   const navigateHistory = (revision: string, content?: ProjectContent) => {
     project.navigateTo({

@@ -16,6 +17,17 @@

     });
   };
   const fetchMoreCommits = async (): Promise<CommitMetadata[]> => {
     const response = await Project.getCommits(project.urn, project.seed.api, {
       // Fetching 31 elements since we remove the first one
       parent: history.headers[history.headers.length - 1].header.sha1,
       perPage: 31,
       verified: true,
     });
     // Removing the first element of the array, since it's the same as the last of the current list
     return response.headers.slice(1);
   };
   const browseCommit = (event: { detail: string }) => {
     project.navigateTo({
       content: ProjectContent.Tree,

@@ -65,21 +77,26 @@

 </style>
 <div class="history">
   {#each history.headers 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.header.sha1)}
           <div
             class="commit"
             on:click={() =>
               navigateHistory(commit.header.sha1, ProjectContent.Commit)}>
             <CommitTeaser {commit} on:browseCommit={browseCommit} />
   <List bind:items={history.headers} query={fetchMoreCommits}>
     <svelte:fragment slot="list" let:items>
       {@const headers = groupCommits(items)}
       {#each headers 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.header.sha1)}
               <div
                 class="commit"
                 on:click={() =>
                   navigateHistory(commit.header.sha1, ProjectContent.Commit)}>
                 <CommitTeaser {commit} on:browseCommit={browseCommit} />
               </div>
             {/each}
           </div>
         {/each}
       </div>
     </div>
   {/each}
         </div>
       {/each}
     </svelte:fragment>
   </List>
 </div>

modified src/base/projects/Project.svelte

@@ -7,7 +7,6 @@

   import Loading from "@app/Loading.svelte";
   import { formatProfile, formatSeedId, setOpenGraphMetaTag } from "@app/utils";
   import { browserStore } from "@app/project";
   import { fetchCommits } from "@app/commit";
   import * as patch from "@app/patch";
   import * as issue from "@app/issue";

@@ -80,7 +79,12 @@

     {#if content === proj.ProjectContent.Tree}
       <Browser {project} {commit} {tree} {browserStore} />
     {:else if content === proj.ProjectContent.History}
       <Async fetch={fetchCommits(project, commit)} let:result>
       <Async
         fetch={proj.Project.getCommits(project.urn, project.seed.api, {
           parent: commit,
           verified: true,
         })}
         let:result>
         <History {project} history={result} />
       </Async>
     {:else if content === proj.ProjectContent.Commit}

modified src/commit.ts

@@ -1,4 +1,4 @@

 import { Stats, Person, Project } from "@app/project";
 import type { Stats, Person } from "@app/project";
 import type { Diff } from "@app/diff";
 import { ApiError } from "@app/api";
 import { getDaysPassed } from "@app/utils";

@@ -12,10 +12,6 @@ export interface CommitMetadata {

   header: CommitHeader;
   context: CommitContext;
 }
 export interface GroupedCommitsHistory {
   headers: CommitGroup[];
   stats: Stats;
 }
 export interface Author {
   email: string;

@@ -89,12 +85,6 @@ export function formatGroupTime(timestamp: number): string {

   });
 }
 export const groupCommitHistory = (
   history: CommitsHistory,
 ): GroupedCommitsHistory => {
   return { ...history, headers: groupCommits(history.headers) };
 };
 export function groupCommits(
   commits: { header: CommitHeader; context: CommitContext }[],
 ): CommitGroup[] {

@@ -141,17 +131,6 @@ export function groupCommits(

   }
 }
 export async function fetchCommits(
   project: Project,
   parentCommit: string,
 ): Promise<GroupedCommitsHistory> {
   const commitsQuery = await Project.getCommits(project.urn, project.seed.api, {
     parent: parentCommit,
     verified: true,
   });
   return groupCommitHistory(commitsQuery);
 }
 export function groupCommitsByWeek(commits: number[]): WeeklyActivity[] {
   const groupedCommits: WeeklyActivity[] = [];
   let groupDate: Date | undefined = undefined;