Fixup

radicle-dev · Aug 6, 2024 · 5aa33e7 · 5aa33e7
1 parent a815b0b
commit 5aa33e7
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 53 deletions.
diff --git a/src/views/nodes/SeedSelector.svelte b/src/views/nodes/SeedSelector.svelte
@@ -1,25 +1,33 @@
 <script lang="ts">
   import type { BaseUrl } from "@http-client";
 
+  import isEqual from "lodash/isEqual";
   import some from "lodash/some";
-  import { HttpdClient } from "@http-client";
+
   import config from "virtual:config";
+  import { HttpdClient } from "@http-client";
+  import {
+    addBookmark,
+    bookmarkedSeeds,
+    removeBookmark,
+    selectedSeed,
+  } from "./SeedSelector";
+  import { closeFocused } from "@app/components/Popover.svelte";
   import { push } from "@app/lib/router";
 
   import DropdownList from "@app/components/DropdownList.svelte";
   import DropdownListItem from "@app/components/DropdownList/DropdownListItem.svelte";
   import Icon from "@app/components/Icon.svelte";
   import IconButton from "@app/components/IconButton.svelte";
-  import Popover, { closeFocused } from "@app/components/Popover.svelte";
+  import Popover from "@app/components/Popover.svelte";
   import TextInput from "@app/components/TextInput.svelte";
-  import { bookmarkedSeeds, selectedSeed } from "./SeedSelector";
-  import { isEqual } from "lodash";
 
   export let baseUrl: BaseUrl;
-  let validationMessage: string | undefined = undefined;
-  let seedAddressInput: string = baseUrl.hostname;
-  let loading = false;
+
   let expanded: boolean = false;
+  let loading = false;
+  let seedAddressInput: string = baseUrl.hostname;
+  let validationMessage: string | undefined = undefined;
 
   $: if (expanded === false) {
     validationMessage = "";
@@ -34,6 +42,35 @@
       return "Seed node isn't reachable";
     }
   }
+
+  async function navigateToSeed() {
+    loading = true;
+    const seed = {
+      hostname: seedAddressInput.trim(),
+      port: config.nodes.defaultHttpdPort,
+      scheme: config.nodes.defaultHttpdScheme,
+    };
+    validationMessage = await validateInput(seed);
+    if (validationMessage === undefined) {
+      closeFocused();
+      void push({
+        resource: "nodes",
+        params: { baseUrl: seed, projectPageIndex: 0 },
+      });
+      selectedSeed.set(seed);
+    }
+    loading = false;
+  }
+
+  function selectSeed(seed: BaseUrl) {
+    closeFocused();
+    selectedSeed.set(seed);
+    seedAddressInput = seed.hostname;
+    void push({
+      resource: "nodes",
+      params: { baseUrl: seed, projectPageIndex: 0 },
+    });
+  }
 </script>
 
 <style>
@@ -94,24 +131,7 @@
             name="seed"
             placeholder="seed.radicle.example"
             {loading}
-            on:submit={async () => {
-              loading = true;
-              const customSeedBaseUrl = {
-                hostname: seedAddressInput.trim(),
-                port: config.nodes.defaultHttpdPort,
-                scheme: config.nodes.defaultHttpdScheme,
-              };
-              validationMessage = await validateInput(customSeedBaseUrl);
-              if (validationMessage === undefined) {
-                closeFocused();
-                void push({
-                  resource: "nodes",
-                  params: { baseUrl: customSeedBaseUrl, projectPageIndex: 0 },
-                });
-                selectedSeed.set(customSeedBaseUrl);
-              }
-              loading = false;
-            }} />
+            on:submit={navigateToSeed} />
         </div>
         {#if validationMessage}
           <span class="validation-message txt-small">{validationMessage}</span>
@@ -123,13 +143,7 @@
               let:item
               style="height: 2.5rem"
               on:click={() => {
-                closeFocused();
-                selectedSeed.set(item);
-                seedAddressInput = item.hostname;
-                void push({
-                  resource: "nodes",
-                  params: { baseUrl: item, projectPageIndex: 0 },
-                });
+                selectSeed(item);
               }}
               selected={isEqual(baseUrl, item)}>
               <div class="dropdown-item">
@@ -138,13 +152,7 @@
                   <div class="txt-overflow">{item.hostname}</div>
                 </div>
               </div>
-              <IconButton
-                stopPropagation
-                on:click={() => {
-                  bookmarkedSeeds.update(previous =>
-                    previous.filter(x => x !== item),
-                  );
-                }}>
+              <IconButton stopPropagation on:click={() => removeBookmark(item)}>
                 <Icon name="bookmark-on" />
               </IconButton>
             </DropdownListItem>
@@ -153,15 +161,7 @@
           <DropdownList items={config.preferredSeeds}>
             <DropdownListItem
               style="height: 2.5rem"
-              on:click={() => {
-                closeFocused();
-                seedAddressInput = item.hostname;
-                void push({
-                  resource: "nodes",
-                  params: { baseUrl: item, projectPageIndex: 0 },
-                });
-                selectedSeed.set(item);
-              }}
+              on:click={() => selectSeed(item)}
               slot="item"
               selected={isEqual(baseUrl, item)}
               let:item>
@@ -189,14 +189,12 @@
       : undefined}
     on:click={() => {
       if (some($bookmarkedSeeds, baseUrl)) {
-        bookmarkedSeeds.update(previous => previous.filter(x => x !== baseUrl));
+        removeBookmark(baseUrl);
       } else {
-        bookmarkedSeeds.update(previous => [...previous, baseUrl]);
+        addBookmark(baseUrl);
       }
     }}>
-    {#if some($bookmarkedSeeds, baseUrl)}
-      <Icon name="bookmark-on" />
-    {:else if some(config.preferredSeeds, baseUrl)}
+    {#if some($bookmarkedSeeds, baseUrl) || some(config.preferredSeeds, baseUrl)}
       <Icon name="bookmark-on" />
     {:else}
       <Icon name="bookmark-off" />

diff --git a/src/views/nodes/SeedSelector.ts b/src/views/nodes/SeedSelector.ts
@@ -1,5 +1,6 @@
 import type { BaseUrl } from "@http-client";
 
+import isEqual from "lodash/isEqual";
 import storedWritable from "@efstajas/svelte-stored-writable";
 import { array, number, string, object } from "zod";
 import { get } from "svelte/store";
@@ -28,6 +29,14 @@ export const bookmarkedSeeds = storedWritable<BaseUrl[]>(
   !window.localStorage,
 );
 
+export function removeBookmark(seed: BaseUrl) {
+  bookmarkedSeeds.update(previous => previous.filter(x => !isEqual(x, seed)));
+}
+
+export function addBookmark(seed: BaseUrl) {
+  bookmarkedSeeds.update(previous => [...previous, seed]);
+}
+
 // First, try using a seed that was selected by the user previously,
 // if that fails fall back to the first configured seed,
 // if no seeds are configured, fall back to a hardcoded seed.