fix: show commit not found screen instead of error

Show a placeholder if the commit hasn't been replicated or doesn't exist. This also fixes incorrect anchor ordering. Signed-off-by: Rūdolfs Ošiņš <rudolfs@osins.org>
radicle-dev · Oct 4, 2021 · 0619c51 · 0619c51
1 parent 5cc842e
commit 0619c51
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 22 deletions.
diff --git a/ui/App/LoadingScreen.svelte b/ui/App/LoadingScreen.svelte
@@ -21,5 +21,5 @@
 </style>
 
 <div class="container">
-  <EmptyState headerText="Loading..." emoji="🕵️" text="" />
+  <EmptyState headerText="Loading…" emoji="🕵️" />
 </div>
diff --git a/ui/App/ProjectScreen/Source/Anchors.svelte b/ui/App/ProjectScreen/Source/Anchors.svelte
@@ -23,7 +23,7 @@
   export let anchors: project.ConfirmedAnchor[];
 
   $: latest = anchors.slice(-1)[0];
-  $: oldAnchors = anchors.slice(0, -1);
+  $: oldAnchors = anchors.slice(0, -1).reverse();
 
   const openCommit = (commitHash: string, projectId: string) => {
     router.push({

diff --git a/ui/App/ProjectScreen/Source/Commit.svelte b/ui/App/ProjectScreen/Source/Commit.svelte
@@ -10,25 +10,19 @@
 
   import { commit, fetchCommit } from "ui/src/screen/project/source";
   import { formatCommitTime } from "ui/src/source";
-  import * as error from "ui/src/error";
   import * as remote from "ui/src/remote";
   import * as router from "ui/src/router";
 
   import { CopyableIdentifier, Icon } from "ui/DesignSystem";
 
   import AnchorCard from "./AnchorCard.svelte";
+  import EmptyState from "ui/App/ScreenLayout/EmptyState.svelte";
   import BackButton from "ui/App/ProjectScreen/BackButton.svelte";
   import Changeset from "./SourceBrowser/Changeset.svelte";
 
   export let commitHash: string;
   export let anchors: project.ConfirmedAnchor[];
 
-  $: {
-    if ($commit.status === remote.Status.Error) {
-      error.show($commit.error);
-    }
-  }
-
   fetchCommit(commitHash);
 </script>
 
@@ -165,5 +159,12 @@
     <main>
       <Changeset diff={$commit.data.diff} stats={$commit.data.stats} />
     </main>
+  {:else if $commit.status === remote.Status.Error}
+    <EmptyState emoji="🦤">
+      Commit <CopyableIdentifier
+        kind="commitHash"
+        value={commitHash}
+        style="display: inline-block;" /> isn’t replicated yet.
+    </EmptyState>
   {/if}
 </div>
diff --git a/ui/App/ProjectScreen/route.ts b/ui/App/ProjectScreen/route.ts
@@ -6,6 +6,8 @@
 
 import type * as project from "ui/src/project";
 
+import * as lodash from "lodash";
+
 import * as ensResolver from "ui/src/org/ensResolver";
 import * as theGraphApi from "ui/src/org/theGraphApi";
 import * as wallet from "ui/src/wallet";
@@ -34,7 +36,10 @@ export async function load(params: Params): Promise<LoadedRoute> {
   let anchors: project.ConfirmedAnchor[] = [];
 
   if (wallet.isConnected()) {
-    anchors = await theGraphApi.getProjectAnchors(params.urn);
+    anchors = lodash.sortBy(
+      await theGraphApi.getProjectAnchors(params.urn),
+      "timestamp"
+    );
 
     if (
       params.activeView.type === "anchors" ||

diff --git a/ui/App/ScreenLayout/EmptyState.svelte b/ui/App/ScreenLayout/EmptyState.svelte
@@ -14,7 +14,7 @@
 
   export let style: string | undefined = undefined;
   export let emoji: string = "🪴";
-  export let text: string = "Nothing to see here";
+  export let text: string | undefined = undefined;
   export let headerText: string | undefined = undefined;
   export let primaryActionText: string | undefined = undefined;
   export let secondaryActionText: string | undefined = undefined;
@@ -69,13 +69,13 @@
 </style>
 
 <div class="empty-state" data-cy="empty-state" {style}>
-  {#if emoji.length}
+  {#if emoji}
     <Emoji {emoji} size="huge" />
   {/if}
   {#if headerText}
     <h3>{headerText}</h3>
   {/if}
-  {#if text.length}
+  {#if text}
     <p class="text">{text}</p>
   {/if}
   {#if primaryActionText}
@@ -96,5 +96,7 @@
       <p>{secondaryActionText}</p>
     </button>
   {/if}
-  <slot />
+  <div style="margin: 1.5rem;">
+    <slot />
+  </div>
 </div>
diff --git a/ui/src/screen/project/source.ts b/ui/src/screen/project/source.ts
@@ -284,14 +284,18 @@ export const fetchCommit = async (sha1: string): Promise<void> => {
     try {
       commitStore.success(await source.fetchCommit(project.urn, sha1));
     } catch (err: unknown) {
-      commitStore.error(error.fromUnknown(err));
-      error.show(
-        new error.Error({
-          code: error.Code.CommitFetchFailure,
-          message: "Could not fetch commit",
-          source: err,
-        })
-      );
+      const e = error.fromUnknown(err);
+      if (e.message.match("object not found")) {
+        commitStore.error(e);
+      } else {
+        error.show(
+          new error.Error({
+            code: error.Code.CommitFetchFailure,
+            message: "Could not fetch commit",
+            source: err,
+          })
+        );
+      }
     }
   }
 };