Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Add "Sort by activity" toggle to repo list
Rūdolfs Ošiņš committed 21 days ago
commit 4ddca81f169456f80b2324df566903d0cab33765
parent 4dce10bc66f6abb2ee17ef590929d088e01cf1bb
2 files changed +52 -2
modified src/components/RepoCard.ts
@@ -37,3 +37,19 @@ export async function fetchRepoInfos(
      }),

    }));

}
+
+ 
export async function sortRepoInfosByActivity(
+ 
  repos: RepoInfo[],
+ 
): Promise<RepoInfo[]> {
+ 
  const withActivity = await Promise.all(
+ 
    repos.map(async r => ({ info: r, activity: await r.activity })),
+ 
  );
+ 
  return withActivity
+ 
    .sort((a, b) => {
+ 
      if (a.activity.length === 0 && b.activity.length === 0) return 0;
+ 
      if (a.activity.length === 0) return 1;
+ 
      if (b.activity.length === 0) return -1;
+ 
      return b.activity[0].time - a.activity[0].time;
+ 
    })
+ 
    .map(x => x.info);
+ 
}
modified src/views/nodes/ReposView.svelte
@@ -1,8 +1,12 @@
<script lang="ts">

  import type { BaseUrl, NodeStats } from "@http-client";
+ 
  import type { RepoInfo } from "@app/components/RepoCard";



  import * as router from "@app/lib/router";
- 
  import { fetchRepoInfos } from "@app/components/RepoCard";
+ 
  import {
+ 
    fetchRepoInfos,
+ 
    sortRepoInfosByActivity,
+ 
  } from "@app/components/RepoCard";

  import { handleError } from "@app/views/nodes/error";



  import Loading from "@app/components/Loading.svelte";
@@ -15,12 +19,16 @@
  let listState: "pinned" | "all" = "pinned";

  let page = 0;

  let hasPinnedRepos = true;
+ 
  let sortByActivity = false;
+ 
  let sorting = false;
+ 
  let displayedRepos: RepoInfo[] = [];



  // Reset state when baseUrl changes

  $: if (baseUrl) {

    listState = "pinned";

    page = 0;

    hasPinnedRepos = true;
+ 
    sortByActivity = false;

  }



  $: perPage = listState === "pinned" ? stats.repos.total : 24;
@@ -29,11 +37,13 @@
  function showPinned() {

    listState = "pinned";

    page = 0;
+ 
    sortByActivity = false;

  }



  function showAll() {

    listState = "all";

    page = 0;
+ 
    sortByActivity = false;

  }



  async function fetchRepos(
@@ -54,8 +64,25 @@
      return [];

    }
+ 
    sortByActivity = false;
+ 
    displayedRepos = repos;

    return repos;

  }
+
+ 
  async function toggleSortByActivity(repos: RepoInfo[]) {
+ 
    if (sortByActivity) {
+ 
      sortByActivity = false;
+ 
      displayedRepos = repos;
+ 
      return;
+ 
    }
+ 
    sorting = true;
+ 
    try {
+ 
      displayedRepos = await sortRepoInfosByActivity(repos);
+ 
      sortByActivity = true;
+ 
    } finally {
+ 
      sorting = false;
+ 
    }
+ 
  }

</script>



<style>
@@ -127,7 +154,7 @@
  {:then repoInfos}

    {#if repoInfos.length > 0}

      <div class="repo-grid">
- 
        {#each repoInfos as repoInfo}
+ 
        {#each displayedRepos as repoInfo (repoInfo.repo.rid)}

          <RepoCard {baseUrl} {repoInfo} />

        {/each}

      </div>
@@ -136,6 +163,13 @@
          <div class="subtitle">

            {repoInfos.length}

            pinned {repoInfos.length === 1 ? "repository" : "repositories"} ·
+ 
            <button
+ 
              class="text-button"
+ 
              disabled={sorting}
+ 
              on:click={() => toggleSortByActivity(repoInfos)}>
+ 
              {sortByActivity ? "Default order" : "Sort by activity"}
+ 
            </button>
+ 
            ·

            <button class="text-button" on:click={showAll}>Browse all</button>

          </div>

        {:else}