refactor: eliminate Remote component in a couple of places

See #1798 Signed-off-by: Thomas Scholtes <geigerzaehler@axiom.fm>
radicle-dev · Oct 6, 2021 · f9cd97c · f9cd97c
1 parent 8ea3fdc
commit f9cd97c
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 59 deletions.
diff --git a/ui/App/ProjectScreen.svelte b/ui/App/ProjectScreen.svelte
@@ -6,20 +6,19 @@
  LICENSE file.
 -->
 <script lang="typescript">
-  import type { User, Project, ConfirmedAnchor } from "ui/src/project";
-  import type * as projectRoute from "./ProjectScreen/route";
-
   import { onDestroy } from "svelte";
 
-  import { copyToClipboard } from "ui/src/ipc";
-  import { isMaintainer, isContributor } from "ui/src/project";
-
+  import * as Session from "ui/src/session";
   import * as localPeer from "ui/src/localPeer";
   import * as modal from "ui/src/modal";
+  import * as error from "ui/src/error";
   import * as notification from "ui/src/notification";
+  import * as remote from "ui/src/remote";
   import * as router from "ui/src/router";
   import * as userProfile from "ui/src/userProfile";
-  import * as Session from "ui/src/session";
+  import type { User, Project, ConfirmedAnchor } from "ui/src/project";
+  import { copyToClipboard } from "ui/src/ipc";
+  import { isMaintainer, isContributor } from "ui/src/project";
   import {
     fetch,
     selectPeer,
@@ -28,7 +27,6 @@
   } from "ui/src/screen/project";
 
   import { Button, Icon, ThreeDotsMenu, format } from "ui/DesignSystem";
-  import Remote from "ui/App/Remote.svelte";
 
   import ScreenLayout from "ui/App/ScreenLayout.svelte";
   import Header from "ui/App/ScreenLayout/Header.svelte";
@@ -37,6 +35,7 @@
   import PeerSelector from "./ProjectScreen/PeerSelector.svelte";
   import ProjectHeader from "./ProjectScreen/ProjectHeader.svelte";
   import Source from "./ProjectScreen/Source.svelte";
+  import type * as projectRoute from "./ProjectScreen/route";
 
   export let urn: string;
   export let anchors: ConfirmedAnchor[];
@@ -99,17 +98,21 @@
 
   // Initialise the screen by fetching the project and associated data.
   fetch(urn);
+
+  $: if ($store.status === remote.Status.Error) {
+    error.show($store.error);
+  }
 </script>
 
 <ScreenLayout dataCy="project-screen">
-  <Remote {store} let:data={{ peerSelection, project, selectedPeer }}>
+  {#if $store.status === remote.Status.Success}
     <Header>
       <ProjectHeader
         slot="left"
-        urn={project.urn}
-        name={project.metadata.name}
-        description={project.metadata.description}
-        stats={project.stats}
+        urn={$store.data.project.urn}
+        name={$store.data.project.metadata.name}
+        description={$store.data.project.metadata.description}
+        stats={$store.data.project.stats}
         latestAnchorTimestamp={anchors.slice(-1)[0]?.timestamp}
         onClick={() =>
           router.push({
@@ -123,11 +126,11 @@
       <div slot="right" style="display: flex;">
         <div style="display: flex;" class="button-transition">
           <PeerSelector
-            peers={peerSelection}
+            peers={$store.data.peerSelection}
             on:modal={onPeerModal}
             on:open={onOpenPeer}
             on:select={onSelectPeer}
-            selected={selectedPeer} />
+            selected={$store.data.selectedPeer} />
           <Button
             dataCy="manage-remotes"
             icon={Icon.Pen}
@@ -138,14 +141,14 @@
             on:mouseleave={mouseleave}
             style={`margin-right: 1rem; border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 0 0.5rem; ${hoverstyle}`} />
         </div>
-        <ThreeDotsMenu menuItems={menuItems(project)} />
+        <ThreeDotsMenu menuItems={menuItems($store.data.project)} />
       </div>
     </Header>
     <Source
       {activeView}
-      {project}
-      {selectedPeer}
+      project={$store.data.project}
+      selectedPeer={$store.data.selectedPeer}
       {anchors}
-      isContributor={isContributor(peerSelection)} />
-  </Remote>
+      isContributor={isContributor($store.data.peerSelection)} />
+  {/if}
 </ScreenLayout>
diff --git a/ui/App/ProjectScreen/ProjectHeader.svelte b/ui/App/ProjectScreen/ProjectHeader.svelte
@@ -14,7 +14,7 @@
 
   export let name: string;
   export let urn: string;
-  export let description: string | undefined = undefined;
+  export let description: string | null = null;
   export let stats: Stats;
   export let onClick: (() => void) | undefined = undefined;
   export let latestAnchorTimestamp: number | undefined = undefined;

diff --git a/ui/App/SearchModal.svelte b/ui/App/SearchModal.svelte
@@ -31,7 +31,6 @@
     Icon,
     TextInput,
   } from "ui/DesignSystem";
-  import Remote from "ui/App/Remote.svelte";
 
   let value: string;
   $: value = $inputStore.trim();
@@ -169,17 +168,17 @@
   </div>
 
   <div class="result" class:tracked class:untracked>
-    <Remote {store} let:data={project}>
+    {#if $store.status === remote.Status.Success}
       <div style="padding: 1.5rem;">
         <div
           data-cy="project-name"
           class="header typo-header-3"
-          on:click={_ev => navigateToProject(project)}>
-          <span class="id">{project.metadata.name}</span>
+          on:click={navigateToProject.bind(null, $store.data)}>
+          <span class="id">{$store.data.metadata.name}</span>
         </div>
       </div>
-
-      <div slot="error" style="padding: 1.5rem;">
+    {:else if $store.status === remote.Status.Error}
+      <div style="padding: 1.5rem;">
         <div class="header typo-header-3">
           <CopyableIdentifier {value} kind="radicleId" showIcon={false} />
           <FollowToggle on:follow={follow} style="margin-left: 1rem;" />
@@ -190,6 +189,6 @@
           here. Follow it and you’ll be notified as soon as it’s available.
         </p>
       </div>
-    </Remote>
+    {/if}
   </div>
 </div>
diff --git a/ui/App/WalletScreen/LinkAddressModal.svelte b/ui/App/WalletScreen/LinkAddressModal.svelte
@@ -9,21 +9,21 @@
   import { Avatar, Button, CopyableIdentifier, Icon } from "ui/DesignSystem";
 
   import Modal from "ui/App/ModalLayout/Modal.svelte";
-  import Remote from "ui/App/Remote.svelte";
   import TransactionButton from "./LinkAddressModal/TransactionButton.svelte";
 
   import { ClaimsContract, claimsAddress } from "ui/src/attestation/contract";
   import { lastClaimed } from "ui/src/attestation/lastClaimed";
-  import { session } from "ui/src/session";
+  import * as Session from "ui/src/session";
   import { store as walletStore } from "ui/src/wallet";
-
   import * as identity from "ui/src/identity";
   import * as modal from "ui/src/modal";
 
   function onCancel(): void {
     modal.hide();
   }
 
+  const session = Session.unsealed();
+
   $: address = $walletStore.getAddress() || "";
 
   async function claim(ident: identity.Identity) {
@@ -57,35 +57,36 @@
   }
 </style>
 
-<Remote store={session} let:data={it}>
-  <Modal emoji="🧦" title="Link your Radicle ID and Ethereum address">
-    <svelte:fragment slot="description">
-      An Ethereum transaction will be sent
-    </svelte:fragment>
+<Modal emoji="🧦" title="Link your Radicle ID and Ethereum address">
+  <svelte:fragment slot="description">
+    An Ethereum transaction will be sent
+  </svelte:fragment>
 
-    <div class="data">
-      <div style="display: flex;">
-        <Avatar
-          size="small"
-          kind={{ type: "userEmoji", uniqueIdentifier: it.identity.urn }}
-          style="margin-right: 0.625rem;" />
-        <p class="typo-text">{it.identity.metadata.handle}</p>
-      </div>
-      <Icon.ChevronUpDown />
-      <p class="address typo-text">
-        <CopyableIdentifier value={address} kind="ethAddress" />
-      </p>
+  <div class="data">
+    <div style="display: flex;">
+      <Avatar
+        size="small"
+        kind={{
+          type: "userEmoji",
+          uniqueIdentifier: session.identity.urn,
+        }}
+        style="margin-right: 0.625rem;" />
+      <p class="typo-text">{session.identity.metadata.handle}</p>
     </div>
+    <Icon.ChevronUpDown />
+    <p class="address typo-text">
+      <CopyableIdentifier value={address} kind="ethAddress" />
+    </p>
+  </div>
 
-    <svelte:fragment slot="buttons">
-      <Button variant="transparent" on:click={onCancel}>Cancel</Button>
+  <svelte:fragment slot="buttons">
+    <Button variant="transparent" on:click={onCancel}>Cancel</Button>
 
-      <TransactionButton
-        dataCy="confirm-button"
-        onClick={() => claim(it.identity)}
-        errorLabel="Failed to claim your Radicle ID on Ethereum">
-        Link your Radicle ID
-      </TransactionButton>
-    </svelte:fragment>
-  </Modal>
-</Remote>
+    <TransactionButton
+      dataCy="confirm-button"
+      onClick={() => claim(session.identity)}
+      errorLabel="Failed to claim your Radicle ID on Ethereum">
+      Link your Radicle ID
+    </TransactionButton>
+  </svelte:fragment>
+</Modal>