Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Fix reactivity when browsing source
Alexis Sellier committed 4 years ago
commit 5ec1654676a0629a03be63f5d2c260b85baa78b7
parent 145f479a42d29c456bc369dbf0c24a2a513499b6
5 files changed +84 -76
modified src/base/projects/Browser.svelte
@@ -21,14 +21,21 @@
    | { status: Status.Loaded; path: string; blob: proj.Blob };



  export let urn: string;
- 
  export let revision: string;

  export let config: Config;
- 
  export let path: string;

  export let org: string | null = null;

  export let user: string | null = null;

  export let tree: proj.Tree;

  export let project: proj.Info;

  export let branches: [string, string][];
+ 
  export let locator: string; // eg. "master/README.md"
+ 
  export let content: proj.ProjectContent;
+
+ 
  // Bind content to file tree to trigger updates in parent components.
+ 
  content = proj.ProjectContent.Tree;
+
+ 
  // This is reactive to respond to path changes that don't originate from this
+ 
  // component, eg. when using the browser's "back" button.
+ 
  $: [revision, path] = proj.splitPrefixFromPath(locator, branches, project.head);



  // When the component is loaded the first time, the blob is yet to be loaded.

  let state: State = { status: Status.Loading, path };
@@ -90,9 +97,6 @@
    mobileFileTree = !mobileFileTree;

  };
- 
  // This is reactive to respond to path changes that don't originate from this
- 
  // component, eg. when using the browser's "back" button.
- 
  $: [revision, path] = proj.splitPrefixFromPath(revision, branches, project.head);

  $: commit = proj.getOid(project.head, revision, branches);

  $: dispatch("routeParamsChange", { content: proj.ProjectContent.Tree, revision, path });

  $: getBlob = loadBlob(path);
modified src/base/projects/Commit/History.svelte
@@ -1,26 +1,35 @@
<script lang="ts">

  import { createEventDispatcher, onMount } from "svelte";

  import CommitTeaser from "./CommitTeaser.svelte";
- 
  import { getCommits, Info, getOid, ProjectContent } from "@app/project";
+ 
  import { getCommits, Info, getOid, ProjectContent, splitPrefixFromPath } from "@app/project";

  import type { Config } from "@app/config";

  import Loading from "@app/Loading.svelte";

  import { groupCommitHistory, GroupedCommitsHistory } from "./lib";
- 
  export let revision: string;
+ 
  const dispatch = createEventDispatcher();
+
+ 
  export let locator: string;

  export let urn: string;

  export let config: Config;

  export let project: Info;

  export let branches: [string, string][];
+ 
  export let content: ProjectContent;
- 
  async function fetchCommits(): Promise<GroupedCommitsHistory> {
- 
    const commitsQuery = await getCommits(urn, getOid(project.head, revision, branches), config);
- 
    return groupCommitHistory(commitsQuery);
- 
  }
+ 
  $: [revision,] = splitPrefixFromPath(locator, branches, project.head);
+
+ 
  // Bind content to commit history to trigger updates in parent components.
+ 
  content = ProjectContent.History;
- 
  const dispatch = createEventDispatcher();

  onMount(() => {
- 
    dispatch("routeParamsChange", { content: ProjectContent.History, revision, path: "/" });
+ 
    dispatch("routeParamsChange", { content: ProjectContent.History, revision });

  });
+
+ 
  $: dispatch("routeParamsChange", { content: ProjectContent.History, revision });
+
+ 
  async function fetchCommits(revision: string): Promise<GroupedCommitsHistory> {
+ 
    const commitsQuery = await getCommits(urn, getOid(project.head, revision, branches), config);
+ 
    return groupCommitHistory(commitsQuery);
+ 
  }

</script>



<style>
@@ -46,7 +55,7 @@
  }

</style>
- 
{#await fetchCommits()}
+ 
{#await fetchCommits(revision)}

  <Loading center />

{:then history}

  <div class="history">
modified src/base/projects/Header.svelte
@@ -206,50 +206,48 @@
</style>



<header>
- 
  {#if revision}
- 
    <BranchSelector {branches} {project} {revision}
- 
      on:revisionChanged={(event) => updateRevision(event.detail)} />
- 
    <div class="anchor">
- 
      {#if anchors}
- 
        {#await getAnchor}
- 
          <Loading small margins />
- 
        {:then anchor}
- 
          {#if anchor}
- 
            <!-- commit is head and latest anchor  -->
- 
            {#if commit == anchor[0] && commit === project.head}
- 
              <span class="anchor-widget anchor-latest">
- 
                <span class="anchor-label" title="{anchors}">latest 🔐</span>
- 
              </span>
- 
            <!-- commit is not head but latest anchor  -->
- 
            {:else if commit == anchor[0] && commit !== project.head}
- 
              <span class="anchor-widget" on:click={() => updateRevision(project.head)}>
- 
                <span class="anchor-label" title="{anchors}">latest 🔐</span>
- 
              </span>
- 
            <!-- commit is not head a stale anchor  -->
- 
            {:else if anchor?.includes(commit)}
- 
              <span class="anchor-widget" on:click={() => updateRevision(anchor[0])}>
- 
                <span class="anchor-label" title="{anchors}">stale 🔒</span>
- 
              </span>
- 
            <!-- commit is not anchored, could be head or any other commit  -->
- 
            {:else}
- 
              <span class="anchor-widget not-anchored" on:click={() => updateRevision(anchor[0])}>
- 
                <span class="anchor-label">not anchored 🔓</span>
- 
              </span>
- 
            {/if}
+ 
  <BranchSelector {branches} {project} {revision}
+ 
    on:revisionChanged={(event) => updateRevision(event.detail)} />
+ 
  <div class="anchor">
+ 
    {#if anchors}
+ 
      {#await getAnchor}
+ 
        <Loading small margins />
+ 
      {:then anchor}
+ 
        {#if anchor}
+ 
          <!-- commit is head and latest anchor  -->
+ 
          {#if commit == anchor[0] && commit === project.head}
+ 
            <span class="anchor-widget anchor-latest">
+ 
              <span class="anchor-label" title="{anchors}">latest 🔐</span>
+ 
            </span>
+ 
          <!-- commit is not head but latest anchor  -->
+ 
          {:else if commit == anchor[0] && commit !== project.head}
+ 
            <span class="anchor-widget" on:click={() => updateRevision(project.head)}>
+ 
              <span class="anchor-label" title="{anchors}">latest 🔐</span>
+ 
            </span>
+ 
          <!-- commit is not head a stale anchor  -->
+ 
          {:else if anchor?.includes(commit)}
+ 
            <span class="anchor-widget" on:click={() => updateRevision(anchor[0])}>
+ 
              <span class="anchor-label" title="{anchors}">stale 🔒</span>
+ 
            </span>
+ 
          <!-- commit is not anchored, could be head or any other commit  -->

          {:else}
- 
            <!-- commit is not head and neither an anchor, and there are no anchors available  -->
- 
            <span class="anchor-widget not-anchored not-allowed">
+ 
            <span class="anchor-widget not-anchored" on:click={() => updateRevision(anchor[0])}>

              <span class="anchor-label">not anchored 🔓</span>

            </span>

          {/if}
- 
        {:catch}
- 
          <span class="anchor-widget error" title="Not able to fetch anchor from subgraph">
- 
            <span class="anchor-label">❌</span>
+ 
        {:else}
+ 
          <!-- commit is not head and neither an anchor, and there are no anchors available  -->
+ 
          <span class="anchor-widget not-anchored not-allowed">
+ 
            <span class="anchor-label">not anchored 🔓</span>

          </span>
- 
        {/await}
- 
      {/if}
- 
    </div>
- 
  {/if}
+ 
        {/if}
+ 
      {:catch}
+ 
        <span class="anchor-widget error" title="Not able to fetch anchor from subgraph">
+ 
          <span class="anchor-label">❌</span>
+ 
        </span>
+ 
      {/await}
+ 
    {/if}
+ 
  </div>

  {#if config.seed.git.host}

    <span>

      <div class="clone" on:click={() => (cloneDropdown = !cloneDropdown)}>
modified src/base/projects/ProjectContentRoutes.svelte
@@ -1,7 +1,6 @@
<script lang="ts">
- 
  import { createEventDispatcher } from "svelte";

  import type { Config } from "@app/config";
- 
  import type { Info, Tree } from "@app/project";
+ 
  import type { Info, ProjectContent, Tree } from "@app/project";

  import { Route, Router } from "svelte-routing";

  import Browser from "./Browser.svelte";

  import History from "./Commit/History.svelte";
@@ -11,42 +10,39 @@
  export let config: Config;

  export let org: string;

  export let tree: Tree;
- 
  export let path: string;

  export let user: string;

  export let branches: [string, string][];
-
- 
  const dispatch = createEventDispatcher();
-
- 
  function forwardRouteParams({ detail: newParams }: { detail: any }) {
- 
    dispatch("routeParamsChange", newParams);
- 
  }
+ 
  export let content: ProjectContent;

</script>



<Router>

  <!-- The default action is to render Browser with the default branch head -->

  <Route path="/">

    <Browser {urn} {org} {user} {config} {tree} {project} {branches}
- 
      path={"/"}
- 
      revision={project.head}
- 
      on:routeParamsChange={forwardRouteParams} />
+ 
      locator={project.head}
+ 
      bind:content={content}
+ 
      on:routeParamsChange />

  </Route>

  <Route path="/tree">

    <Browser {urn} {org} {user} {config} {tree} {project} {branches}
- 
      path={"/"}
- 
      revision={project.head}
- 
      on:routeParamsChange={forwardRouteParams} />
+ 
      locator={project.head}
+ 
      bind:content={content}
+ 
      on:routeParamsChange />

  </Route>

  <Route path="/tree/*" let:params>
- 
    <Browser {urn} {org} {user} {config} {tree} {project} {branches} {path}
- 
      revision={params["*"]}
- 
      on:routeParamsChange={forwardRouteParams} />
+ 
    <Browser {urn} {org} {user} {config} {tree} {project} {branches}
+ 
      locator={params["*"]}
+ 
      bind:content={content}
+ 
      on:routeParamsChange />

  </Route>

  <Route path="/history">
- 
    <History {urn} revision={project.head} {config} {project} {branches}
- 
      on:routeParamsChange={forwardRouteParams} />
+ 
    <History {urn} locator={project.head} {config} {project} {branches}
+ 
      bind:content={content}
+ 
      on:routeParamsChange />

  </Route>

  <Route path="/history/*" let:params>
- 
    <History {urn} revision={params["*"]} {config} {project} {branches}
- 
      on:routeParamsChange={forwardRouteParams} />
+ 
    <History {urn} locator={params["*"]} {config} {project} {branches}
+ 
      bind:content={content}
+ 
      on:routeParamsChange />

  </Route>

</Router>
modified src/base/projects/View.svelte
@@ -169,10 +169,11 @@
        branches={result.branches}

        profile={result.profile}

        on:routeParamsChange={updateRouteParams} />
- 
      <ProjectContentRoutes {urn} {org} {user} {tree} {path}
+ 
      <ProjectContentRoutes {urn} {org} {user} {tree}

        project={result.project}

        branches={result.branches}

        config={result.config}
+ 
        bind:content={content}

        on:routeParamsChange={updateRouteParams} />

    {:catch err}

      <div class="container center-content">