From 3fd5d513a81dd9a3eef867588c752a16abb366c0 Mon Sep 17 00:00:00 2001
From: Sebastian Martinez <me@sebastinez.dev>
Date: Tue, 7 May 2024 12:11:40 +0200
Subject: [PATCH] Decouple stats from tree response

---
 src/views/projects/History.svelte       | 42 ++++++++++-----
 src/views/projects/Source.svelte        | 12 ++---
 src/views/projects/Source/Header.svelte | 33 ++++++------
 src/views/projects/router.ts            | 69 ++++++++++++++-----------
 4 files changed, 89 insertions(+), 67 deletions(-)

diff --git a/src/views/projects/History.svelte b/src/views/projects/History.svelte
index 3d9243801..0fa01c643 100644
--- a/src/views/projects/History.svelte
+++ b/src/views/projects/History.svelte
@@ -5,7 +5,6 @@
     Project,
     Remote,
     Tree,
-    TreeStats,
   } from "@httpd-client";
   import type { Route } from "@app/lib/router";
 
@@ -24,6 +23,7 @@
   import ProjectNameHeader from "./Source/ProjectNameHeader.svelte";
 
   export let baseUrl: BaseUrl;
+  export let commit: string;
   export let branches: string[];
   export let commitHeaders: CommitHeader[];
   export let peer: string | undefined;
@@ -31,7 +31,6 @@
   export let project: Project;
   export let revision: string | undefined;
   export let tree: Tree;
-  export let stats: TreeStats;
   export let seeding: boolean;
 
   const api = new HttpdClient(baseUrl);
@@ -112,12 +111,12 @@
   <div style:margin="1rem 0 1rem 1rem" slot="subheader">
     <Header
       node={baseUrl}
+      {commit}
       {project}
       peers={peersWithRoute}
       branches={branchesWithRoute}
       {revision}
       {tree}
-      {stats}
       filesLinkActive={false}
       historyLinkActive={true} />
   </div>
@@ -136,24 +135,41 @@
     {/each}
   </div>
 
-  {#if loading || allCommitHeaders.length < stats.commits}
+  {#await api.project.getTreeStatsBySha(project.id, commit)}
     <div class="more">
-      {#if loading}
-        <Loading small={page !== 0} center />
-      {:else if allCommitHeaders.length < stats.commits}
-        <Button size="large" variant="outline" on:click={loadMore}>More</Button>
-      {/if}
+      <Loading small center />
     </div>
-  {/if}
+  {:then stats}
+    {#if loading || allCommitHeaders.length < stats.commits}
+      <div class="more">
+        {#if loading}
+          <Loading small={page !== 0} center />
+        {:else if allCommitHeaders.length < stats.commits}
+          <Button size="large" variant="outline" on:click={loadMore}>
+            More
+          </Button>
+        {/if}
+      </div>
+    {/if}
 
-  {#if error}
+    {#if error}
+      <div class="message">
+        <ErrorMessage
+          title="Couldn't load commits"
+          description="Make sure you are able to connect to the seed <code>${baseUrlToString(
+            api.baseUrl,
+          )}</code>"
+          {error} />
+      </div>
+    {/if}
+  {:catch error}
     <div class="message">
       <ErrorMessage
-        title="Couldn't load commits"
+        title="Couldn't load repo stats"
         description="Make sure you are able to connect to the seed <code>${baseUrlToString(
           api.baseUrl,
         )}</code>"
         {error} />
     </div>
-  {/if}
+  {/await}
 </Layout>
diff --git a/src/views/projects/Source.svelte b/src/views/projects/Source.svelte
index b5b928bfe..e6c059bac 100644
--- a/src/views/projects/Source.svelte
+++ b/src/views/projects/Source.svelte
@@ -1,11 +1,5 @@
 <script lang="ts">
-  import type {
-    BaseUrl,
-    Project,
-    Remote,
-    Tree,
-    TreeStats,
-  } from "@httpd-client";
+  import type { BaseUrl, Project, Remote, Tree } from "@httpd-client";
   import type { BlobResult } from "./router";
   import type { Route } from "@app/lib/router";
 
@@ -21,6 +15,7 @@
   import ProjectNameHeader from "./Source/ProjectNameHeader.svelte";
 
   export let baseUrl: BaseUrl;
+  export let commit: string;
   export let rawPath: (commit?: string) => string;
   export let blobResult: BlobResult;
   export let branches: string[];
@@ -30,7 +25,6 @@
   export let project: Project;
   export let revision: string | undefined;
   export let tree: Tree;
-  export let stats: TreeStats;
   export let seeding: boolean;
 
   let mobileFileTree = false;
@@ -137,12 +131,12 @@
   <div style:margin="1rem 0 1rem 1rem" slot="subheader">
     <Header
       node={baseUrl}
+      {commit}
       {project}
       peers={peersWithRoute}
       branches={branchesWithRoute}
       {revision}
       {tree}
-      {stats}
       filesLinkActive={true}
       historyLinkActive={false} />
   </div>
diff --git a/src/views/projects/Source/Header.svelte b/src/views/projects/Source/Header.svelte
index 95363374c..6e0c529f2 100644
--- a/src/views/projects/Source/Header.svelte
+++ b/src/views/projects/Source/Header.svelte
@@ -1,12 +1,8 @@
 <script lang="ts">
-  import type {
-    BaseUrl,
-    Project,
-    Remote,
-    Tree,
-    TreeStats,
-  } from "@httpd-client";
-  import { type Route } from "@app/lib/router";
+  import type { BaseUrl, Project, Remote, Tree } from "@httpd-client";
+  import type { Route } from "@app/lib/router";
+
+  import { HttpdClient } from "@httpd-client";
 
   import BranchSelector from "./BranchSelector.svelte";
   import PeerSelector from "./PeerSelector.svelte";
@@ -14,28 +10,30 @@
   import Button from "@app/components/Button.svelte";
   import IconSmall from "@app/components/IconSmall.svelte";
   import Link from "@app/components/Link.svelte";
+  import Loading from "@app/components/Loading.svelte";
 
   export let node: BaseUrl;
+  export let commit: string;
   export let branches: Array<{ name: string; route: Route }>;
   export let peers: Array<{ remote: Remote; selected: boolean; route: Route }>;
   export let filesLinkActive: boolean;
   export let historyLinkActive: boolean;
   export let revision: string | undefined;
   export let tree: Tree;
-  export let stats: TreeStats;
   export let project: Project;
 
+  const api = new HttpdClient(node);
   let selectedBranch: string | undefined;
 
   // Revision may be a commit ID, a branch name or `undefined` which means the
   // default branch. We assign `selectedBranch` accordingly.
-  $: if (revision === commit.id) {
+  $: if (revision === lastCommit.id) {
     selectedBranch = undefined;
   } else {
     selectedBranch = revision || project.defaultBranch;
   }
 
-  $: commit = tree.lastCommit;
+  $: lastCommit = tree.lastCommit;
   $: peer = peers.find(p => p.selected)?.remote.id;
 </script>
 
@@ -77,6 +75,7 @@
 
   .title-counter {
     display: flex;
+    align-items: center;
     gap: 0.5rem;
   }
 
@@ -96,7 +95,7 @@
     {project}
     {node}
     onCanonical={Boolean(!peer && selectedBranch === project.defaultBranch)}
-    selectedCommit={commit}
+    selectedCommit={lastCommit}
     {selectedBranch} />
 </div>
 
@@ -127,9 +126,13 @@
         <IconSmall name="commit" />
         <div class="title-counter">
           Commits
-          <div class="counter" class:selected={historyLinkActive}>
-            {stats.commits}
-          </div>
+          {#await api.project.getTreeStatsBySha(project.id, commit)}
+            <Loading small center noDelay grayscale />
+          {:then stats}
+            <div class="counter" class:selected={historyLinkActive}>
+              {stats.commits}
+            </div>
+          {/await}
         </div>
       </Button>
     </Link>
diff --git a/src/views/projects/router.ts b/src/views/projects/router.ts
index becbcd92e..7c13ad460 100644
--- a/src/views/projects/router.ts
+++ b/src/views/projects/router.ts
@@ -18,7 +18,6 @@ import type {
   Project,
   Remote,
   Tree,
-  TreeStats,
 } from "@httpd-client";
 
 import * as Syntax from "@app/lib/syntax";
@@ -45,13 +44,8 @@ export type ProjectRoute =
       commit: string;
     }
   | ProjectIssuesRoute
+  | ProjectIssueRoute
   | { resource: "project.newIssue"; node: BaseUrl; project: string }
-  | {
-      resource: "project.issue";
-      node: BaseUrl;
-      project: string;
-      issue: string;
-    }
   | ProjectPatchesRoute
   | ProjectPatchRoute;
 
@@ -62,6 +56,13 @@ interface ProjectIssuesRoute {
   state?: "open" | "closed";
 }
 
+interface ProjectIssueRoute {
+  resource: "project.issue";
+  node: BaseUrl;
+  project: string;
+  issue: string;
+}
+
 interface ProjectTreeRoute {
   resource: "project.source";
   node: BaseUrl;
@@ -112,13 +113,13 @@ export type ProjectLoadedRoute =
       resource: "project.source";
       params: {
         baseUrl: BaseUrl;
+        commit: string;
         project: Project;
         peers: Remote[];
         peer: string | undefined;
         branches: string[];
         revision: string | undefined;
         tree: Tree;
-        stats: TreeStats;
         path: string;
         rawPath: (commit?: string) => string;
         blobResult: BlobResult;
@@ -129,13 +130,13 @@ export type ProjectLoadedRoute =
       resource: "project.history";
       params: {
         baseUrl: BaseUrl;
+        commit: string;
         project: Project;
         peers: Remote[];
         peer: string | undefined;
         branches: string[];
         revision: string | undefined;
         tree: Tree;
-        stats: TreeStats;
         commitHeaders: CommitHeader[];
         seeding: boolean;
       };
@@ -294,19 +295,7 @@ export async function loadProjectRoute(
         },
       };
     } else if (route.resource === "project.issue") {
-      const [project, issue] = await Promise.all([
-        api.project.getById(route.project),
-        api.project.getIssueById(route.project, route.issue),
-      ]);
-      return {
-        resource: "project.issue",
-        params: {
-          baseUrl: route.node,
-          project,
-          rawPath,
-          issue,
-        },
-      };
+      return await loadIssueView(route);
     } else if (route.resource === "project.patch") {
       return await loadPatchView(route);
     } else if (route.resource === "project.issues") {
@@ -444,11 +433,7 @@ async function loadTreeView(
     project.defaultBranch,
     branchMap,
   );
-
-  const stats = await api.project.getTreeStatsBySha(route.project, commit);
-
   const path = route.path || "/";
-
   const [tree, blobResult] = await Promise.all([
     api.project.getTree(route.project, commit),
     loadBlob(api, project.id, commit, path),
@@ -457,6 +442,7 @@ async function loadTreeView(
     resource: "project.source",
     params: {
       baseUrl: route.node,
+      commit,
       project,
       peers: peers.filter(remote => Object.keys(remote.heads).length > 0),
       peer: route.peer,
@@ -464,7 +450,6 @@ async function loadTreeView(
       rawPath,
       revision: route.revision,
       tree,
-      stats,
       path,
       blobResult,
       seeding,
@@ -538,9 +523,8 @@ async function loadHistoryView(
     );
   }
 
-  const [tree, stats, commitHeaders, seeding] = await Promise.all([
+  const [tree, commitHeaders, seeding] = await Promise.all([
     api.project.getTree(route.project, commitId),
-    api.project.getTreeStatsBySha(route.project, commitId),
     await api.project.getAllCommits(project.id, {
       parent: commitId,
       page: 0,
@@ -553,19 +537,43 @@ async function loadHistoryView(
     resource: "project.history",
     params: {
       baseUrl: route.node,
+      commit: commitId,
       project,
       peers: peers.filter(remote => Object.keys(remote.heads).length > 0),
       peer: route.peer,
       branches: Object.keys(branchMap || {}),
       revision: route.revision,
       tree,
-      stats,
       commitHeaders,
       seeding,
     },
   };
 }
 
+async function loadIssueView(
+  route: ProjectIssueRoute,
+): Promise<ProjectLoadedRoute> {
+  const api = new HttpdClient(route.node);
+  const rawPath = (commit?: string) =>
+    `${route.node.scheme}://${route.node.hostname}:${route.node.port}/raw/${
+      route.project
+    }${commit ? `/${commit}` : ""}`;
+
+  const [project, issue] = await Promise.all([
+    api.project.getById(route.project),
+    api.project.getIssueById(route.project, route.issue),
+  ]);
+  return {
+    resource: "project.issue",
+    params: {
+      baseUrl: route.node,
+      project,
+      rawPath,
+      issue,
+    },
+  };
+}
+
 async function loadPatchView(
   route: ProjectPatchRoute,
 ): Promise<ProjectLoadedRoute> {
@@ -574,6 +582,7 @@ async function loadPatchView(
     `${route.node.scheme}://${route.node.hostname}:${route.node.port}/raw/${
       route.project
     }${commit ? `/${commit}` : ""}`;
+
   const [project, patch] = await Promise.all([
     api.project.getById(route.project),
     api.project.getPatchById(route.project, route.patch),