[ui] move most of search logic out of component

webui/src/util/search.ts

@@ -0,0 +1,40 @@
+import type { UpEntry } from "upend";
+import type { ListingResult } from "upend/types";
+import { fetchEntry, query as queryFn } from "../lib/entity";
+
+export function baseSearch(query: string) {
+  return queryFn(() => `(matches ? ? (contains "${query}"))`);
+}
+
+export async function getObjects(entries: UpEntry[]): Promise<string[]> {
+  const labelled = entries
+    .filter((e) => e.attribute == "LBL")
+    .map((e) => e.entity);
+  const aliased = entries
+    .filter((e) => e.attribute === "ALIAS")
+    .map(async (e) => {
+      const entry = await fetchEntry(e.entity);
+      return String(entry.value.c);
+    });
+  return labelled.concat(await Promise.all(aliased));
+}
+
+export async function createLabelled(label: string) {
+  const response = await fetch(`/api/obj`, {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      attribute: "LBL",
+      value: {
+        t: "Value",
+        c: label,
+      },
+    }),
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to create object: ${await response.text()}`);
+  }
+  const result = (await response.json()) as ListingResult;
+  const address = Object.values(result)[0].entity;
+  return address;
+}

webui/src/views/Search.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { fetchEntry, query as queryFn } from "../lib/entity";
   import debounce from "lodash/debounce";
   import { Readable, readable } from "svelte/store";
   import type { UpEntry, UpListing, UpObject } from "upend";
@@ -8,7 +7,7 @@
   import UpObjectDisplay from "../components/display/UpObject.svelte";
   import UpObjectCard from "../components/display/UpObjectCard.svelte";
   import { useNavigate } from "svelte-navigator";
-  import type { ListingResult } from "upend/types";
+  import { baseSearch, createLabelled, getObjects } from "../util/search";
   const navigate = useNavigate();
 
   export let query: string;
@@ -22,35 +21,14 @@
   let result: Readable<UpListing> = readable();
   let error: Readable<unknown> = readable();
   $: if (debouncedQuery.length) {
-    ({ result, error } = queryFn(
-      () => `(matches ? ? (contains "${debouncedQuery}"))`
-    ));
-  }
-
-  $: entries = ($result?.entries || []).sort((a, b) =>
-    a.address.localeCompare(b.address)
-  );
-
-  async function getObjects(entries: UpEntry[]): Promise<string[]> {
-    exactHits.length = 0;
-    const labelled = entries
-      .filter((e) => e.attribute == "LBL")
-      .map((e) => e.entity);
-    const aliased = entries
-      .filter((e) => e.attribute === "ALIAS")
-      .map(async (e) => {
-        const entry = await fetchEntry(e.entity);
-        return String(entry.value.c);
-      });
-    return labelled.concat(await Promise.all(aliased));
+    ({ result, error } = baseSearch(debouncedQuery));
+    exactHits = [];
   }
 
   $: objects = getObjects($result?.entries || []);
+
   let exactHits = [];
-
   function onResolved(address: string, ids: string[]) {
-    console.log({ address, ids });
-
     if (ids.some((id) => id.toLowerCase() === query.toLowerCase())) {
       if (!exactHits.includes(address)) {
         exactHits.push(address);
@@ -60,23 +38,8 @@
   }
 
   async function create() {
-    const response = await fetch(`/api/obj`, {
-      method: "PUT",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        attribute: "LBL",
-        value: {
-          t: "Value",
-          c: query,
-        },
-      }),
-    });
-    if (!response.ok) {
-      throw new Error(`Failed to create object: ${await response.text()}`);
-    }
-    const result = (await response.json()) as ListingResult;
-    const address = Object.values(result)[0].entity;
-    navigate(`/browse/${address}`);
+    const createdAddress = await createLabelled(query);
+    navigate(`/browse/${createdAddress}`);
   }
 </script>
 
@@ -122,10 +85,10 @@
       </section>
 
       <section class="raw">
-        {#if entries.length}
+        {#if $result?.entries.length}
           <h2>Raw results</h2>
           <ul>
-            {#each entries as entry}
+            {#each $result.entries as entry}
               <li><UpEntryDisplay {entry} /></li>
             {/each}
           </ul>