search view

ui/package.json

@@ -15,6 +15,7 @@
     "@rollup/plugin-typescript": "^8.3.0",
     "@tsconfig/svelte": "^2.0.0",
     "@types/history": "^4.7.9",
+    "@types/lodash": "^4.14.178",
     "@types/lru-cache": "^5.1.1",
     "@yarnpkg/fslib": "^2.6.0",
     "@yarnpkg/libzip": "^2.2.2",
@@ -37,6 +38,7 @@
     "date-fns": "^2.25.0",
     "filesize": "^8.0.6",
     "history": "^5.1.0",
+    "lodash": "^4.17.21",
     "lru-cache": "^6.0.0",
     "normalize.css": "^8.0.1",
     "sass": "^1.43.4",

ui/src/App.svelte

@@ -9,6 +9,7 @@
   import "@shoelace-style/shoelace/dist/components/spinner/spinner.js";
   import "@shoelace-style/shoelace/dist/components/card/card.js";
   import Browse from "./views/Browse.svelte";
+  import Search from "./views/Search.svelte";
 
   setBasePath("/vendor/shoelace");
 
@@ -31,6 +32,10 @@
   <Route path="/browse/*addresses" let:params>
     <Browse />
   </Route>
+
+  <Route path="/search/:query" let:params>
+    <Search query={params.query} />
+  </Route>
 </Router>
 
 <style global lang="scss">

ui/src/layout/Header.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
-  import { Link } from "svelte-navigator";
-  export let searchQuery = "";
-  $: console.log(searchQuery);
-  // this.$router.replace({ name: "search", query: { q: this.searchQuery } });
+  import { Link, useLocation, useNavigate, useParams } from "svelte-navigator";
+  import { useMatch } from "svelte-navigator";
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const searchMatch = useMatch("/search/:query");
+
+  let searchQuery = $searchMatch?.params.query || "";
+  $: if (searchQuery.length > 0) navigate(`/search/${searchQuery}`); else navigate ("/");
+  $: if (!$location.pathname.includes("search")) searchQuery = "";
 </script>
 
 <div class="header">

ui/src/lib/entity.ts

@@ -1,6 +1,6 @@
 // import { useSWR } from "sswr";
 import LRU from "lru-cache";
-import { derived, Readable, Writable, writable } from "svelte/store";
+import { derived, Readable } from "svelte/store";
 import { UpListing, UpObject } from "upend";
 import type { ListingResult } from "upend/types";
 import { useSWR } from "../util/fetch";
@@ -40,7 +40,6 @@ export function query(query: () => string) {
 
   return {
     result,
-    data,
     error,
     revalidate,
   };

ui/src/views/Search.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { query as queryFn } from "../lib/entity";
+  import debounce from "lodash/debounce";
+  import { Readable, readable } from "svelte/store";
+  import type { UpListing } from "upend";
+  export let query: string;
+
+  let debouncedQuery = "";
+  const updateQuery = debounce((query: string) => {
+    debouncedQuery = query;
+  }, 200);
+  $: updateQuery(query);
+
+  let result: Readable<UpListing> = readable();
+  let error: Readable<unknown> = readable();
+  $: if (debouncedQuery.length) {
+    ({ result, error } = queryFn(
+      () => `(matches ? ? (contains "${debouncedQuery}"))`
+    ));
+  }
+</script>
+
+<div>
+  {#if $result}
+    {#each $result.entries as entry}
+      {entry.toString()}
+    {:else}
+      No results.
+    {/each}
+  {/if}
+</div>

ui/yarn.lock

@@ -327,6 +327,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash@npm:^4.14.178":
+  version: 4.14.178
+  resolution: "@types/lodash@npm:4.14.178"
+  checksum: a69a04a60bfc5257c3130a554b4efa0c383f0141b7b3db8ab7cf07ad2a46ea085fce66d0242da41da7e5647b133d5dfb2c15add9cbed8d7fef955e4a1e5b3128
+  languageName: node
+  linkType: hard
+
 "@types/lru-cache@npm:^5.1.1":
   version: 5.1.1
   resolution: "@types/lru-cache@npm:5.1.1"
@@ -1798,6 +1805,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash@npm:^4.17.21":
+  version: 4.17.21
+  resolution: "lodash@npm:4.17.21"
+  checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7
+  languageName: node
+  linkType: hard
+
 "lower-case@npm:^2.0.2":
   version: 2.0.2
   resolution: "lower-case@npm:2.0.2"
@@ -3023,12 +3037,14 @@ __metadata:
     "@shoelace-style/shoelace": ^2.0.0-beta.58
     "@tsconfig/svelte": ^2.0.0
     "@types/history": ^4.7.9
+    "@types/lodash": ^4.14.178
     "@types/lru-cache": ^5.1.1
     "@yarnpkg/fslib": ^2.6.0
     "@yarnpkg/libzip": ^2.2.2
     date-fns: ^2.25.0
     filesize: ^8.0.6
     history: ^5.1.0
+    lodash: ^4.17.21
     lru-cache: ^6.0.0
     normalize.css: ^8.0.1
     postcss: ^8.3.11
@@ -3301,8 +3317,8 @@ __metadata:
 
 "upend@file:../tools/upend_js::locator=svelte-app%40workspace%3A.":
   version: 0.0.1
-  resolution: "upend@file:../tools/upend_js#../tools/upend_js::hash=28f6da&locator=svelte-app%40workspace%3A."
-  checksum: c0d1171522a5b5756516f5e4b1ff2eab15e9a6be7eb1689afcdecd4da89b4c26aa82293320928e8a60a9bd65de15482c5b1eae323c0205f10c17aac5524418de
+  resolution: "upend@file:../tools/upend_js#../tools/upend_js::hash=ee3691&locator=svelte-app%40workspace%3A."
+  checksum: 142915df442562564c6985d03e6de29c97e16b74e2c4230bc934f3d6aa66eb2555ee318935006908d5ce2e680018d0ca3ce0a082c5fb5293b16b723a8b7c5015
   languageName: node
   linkType: hard
 

yarn.lock

@@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==