fbe133c Load patch list in project router — radicle-explorer

modified src/views/projects/Patches.svelte

@@ -1,14 +1,9 @@

 <script lang="ts" context="module">
   import type { Patch, PatchState } from "@httpd-client";
   export type PatchStatus = PatchState["status"];
 </script>
 <script lang="ts">
   import type { BaseUrl } from "@httpd-client";
   import type { BaseUrl, Patch, PatchState } from "@httpd-client";
   import capitalize from "lodash/capitalize";
   import { HttpdClient } from "@httpd-client";
   import { PATCHES_PER_PAGE } from "./router";
   import Button from "@app/components/Button.svelte";
   import ErrorMessage from "@app/components/ErrorMessage.svelte";

@@ -18,9 +13,10 @@

   import Placeholder from "@app/components/Placeholder.svelte";
   import SquareButton from "@app/components/SquareButton.svelte";
   export let search: string | undefined = undefined;
   export let projectId: string;
   export let baseUrl: BaseUrl;
   export let patches: Patch[];
   export let state: PatchState["status"];
   export let patchCounters: {
     draft: number;
     open: number;

@@ -28,28 +24,28 @@

     merged: number;
   };
   $: searchParams = new URLSearchParams(search || "");
   $: state = (searchParams.get("state") as PatchStatus) || "open";
   const perPage = 10;
   let loading = false;
   let page = 0;
   let error: any;
   let patches: Patch[] = [];
   let allPatches: Patch[];
   $: {
     allPatches = patches;
     page = 0;
   }
   const api = new HttpdClient(baseUrl);
   async function loadPatches(state: PatchStatus): Promise<void> {
   async function loadMore(state: PatchState["status"]): Promise<void> {
     loading = true;
     page += 1;
     try {
       const response = await api.project.getAllPatches(projectId, {
         state,
         page,
         perPage,
         perPage: PATCHES_PER_PAGE,
       });
       patches = [...patches, ...response];
       page += 1;
       allPatches = [...allPatches, ...response];
     } catch (e) {
       error = e;
     } finally {

@@ -58,12 +54,17 @@

   }
   interface Tab {
     value: PatchStatus;
     value: PatchState["status"];
     title: string;
     disabled: boolean;
   }
   const stateOptions: PatchStatus[] = ["draft", "open", "archived", "merged"];
   const stateOptions: PatchState["status"][] = [
     "draft",
     "open",
     "archived",
     "merged",
   ];
   const options = stateOptions.map<Tab>(s => ({
     value: s,
     title: `${patchCounters[s]} ${s}`,

@@ -71,16 +72,7 @@

   }));
   $: showMoreButton =
     !loading &&
     !error &&
     patchCounters[state] &&
     patches.length < patchCounters[state];
   $: {
     page = 0;
     patches = [];
     void loadPatches(state);
   }
     !loading && !error && allPatches.length < patchCounters[state];
 </script>
 <style>

@@ -139,7 +131,7 @@

     </div>
   </div>
   <div class="patches-list">
     {#each patches as patch}
     {#each allPatches as patch (patch.id)}
       <div class="teaser">
         <PatchTeaser {baseUrl} {projectId} {patch} />
       </div>

@@ -164,7 +156,7 @@

     {/if}
     {#if showMoreButton}
       <Button variant="foreground" on:click={() => loadPatches(state)}>
       <Button variant="foreground" on:click={() => loadMore(state)}>
         More
       </Button>
     {/if}

modified src/views/projects/View.svelte

@@ -107,7 +107,8 @@

       {baseUrl}
       projectId={id}
       patchCounters={project.patches}
       search={view.search} />
       state={view.state}
       patches={view.patches} />
   {:else if view.resource === "patch"}
     <Patch
       patch={view.patch}

modified src/views/projects/router.ts

@@ -7,6 +7,7 @@ import type {

   Diff,
   Issue,
   Patch,
   PatchState,
   Project,
   Remote,
   Tree,

@@ -18,6 +19,7 @@ import { unreachable } from "@app/lib/utils";

 import { seedPath } from "@app/views/seeds/router";
 export const COMMITS_PER_PAGE = 30;
 export const PATCHES_PER_PAGE = 10;
 export type ProjectRoute =
   | ProjectTreeRoute

@@ -125,7 +127,7 @@ export type ProjectLoadedView =

   | { resource: "issue"; issue: Issue }
   | { resource: "issues"; state: "open" | "closed" }
   | { resource: "newIssue" }
   | { resource: "patches"; search: string }
   | { resource: "patches"; patches: Patch[]; state: PatchState["status"] }
   | PatchView;
 interface LoadedSourceBrowsingParams {

@@ -271,19 +273,7 @@ export async function loadProjectRoute(

         },
       };
     } else if (route.resource === "project.patches") {
       const project = await api.project.getById(route.project);
       return {
         resource: "projects",
         params: {
           id: route.project,
           baseUrl: route.seed,
           view: {
             resource: "patches",
             search: route.search || "",
           },
           project,
         },
       };
       return loadPatchesView(route);
     } else {
       return unreachable(route);
     }

@@ -299,6 +289,37 @@ export async function loadProjectRoute(

   }
 }
 async function loadPatchesView(
   route: ProjectPatchesRoute,
 ): Promise<ProjectLoadedRoute> {
   const api = new HttpdClient(route.seed);
   const searchParams = new URLSearchParams(route.search || "");
   const state = (searchParams.get("state") as PatchState["status"]) || "open";
   const [project, patches] = await Promise.all([
     api.project.getById(route.project),
     api.project.getAllPatches(route.project, {
       state,
       page: 0,
       perPage: PATCHES_PER_PAGE,
     }),
   ]);
   return {
     resource: "projects",
     params: {
       id: route.project,
       baseUrl: route.seed,
       view: {
         resource: "patches",
         patches,
         state,
       },
       project,
     },
   };
 }
 async function loadTreeView(
   route: ProjectTreeRoute,
 ): Promise<ProjectLoadedRoute> {