feat: stupid search

src/element/search.tsx

@@ -1,6 +1,16 @@
+import { useNavigate, useParams } from "react-router-dom";
 import { Categories } from "../const";
+import { useEffect, useState } from "react";
 
 export function Search() {
+  const params = useParams();
+  const navigate = useNavigate();
+  const [term, setTerm] = useState("");
+
+  useEffect(() => {
+    setTerm(params.term ?? "");
+  }, [params.term]);
+
   return (
     <div className="flex flex-col gap-1">
       <div className="flex gap-3 flex-wrap">
@@ -11,7 +21,18 @@ export function Search() {
           </div>
         ))}
       </div>
-      <input type="text" placeholder="Search.." className="p-3 rounded grow" />
+      <input
+        type="text"
+        placeholder="Search.."
+        className="p-3 rounded grow"
+        value={term}
+        onChange={(e) => setTerm(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key == "Enter") {
+            navigate(`/search/${encodeURIComponent(term)}`);
+          }
+        }}
+      />
     </div>
   );
 }

src/element/torrent-list.tsx

@@ -21,7 +21,7 @@ export function TorrentList({ items }: { items: Array<TaggedNostrEvent> }) {
       </thead>
       <tbody>
         {items.map((a) => (
-          <TorrentTableEntry item={a} />
+          <TorrentTableEntry item={a} key={a.id} />
         ))}
       </tbody>
     </table>

src/login.tsx

@@ -42,9 +42,11 @@ export function useLogin() {
     () => LoginState.snapshot(),
   );
   const system = useContext(SnortContext);
-  return session ? {
+  return session
+    ? {
         ...session,
         builder: new EventPublisher(new Nip7Signer(), session.publicKey),
-    system
-  } : undefined;
+        system,
+      }
+    : undefined;
 }

src/main.tsx

@@ -10,10 +10,11 @@ import { ProfilePage } from "./page/profile";
 import { NewPage } from "./page/new";
 import { TorrentPage } from "./page/torrent";
 import { SnortSystemDb } from "@snort/system-web";
+import { SearchPage } from "./page/search";
 
 const db = new SnortSystemDb();
 const System = new NostrSystem({
-  db
+  db,
 });
 const Routes = [
   {
@@ -42,6 +43,10 @@ const Routes = [
         path: "/e/:id",
         element: <TorrentPage />,
       },
+      {
+        path: "/search/:term?",
+        element: <SearchPage />,
+      },
     ],
   },
 ] as Array<RouteObject>;

src/page/new.tsx

@@ -77,7 +77,7 @@ export function NewPage() {
         tags: [],
         files: (info.files ?? [{ length: info.length, path: [info.name] }]).map((a) => ({
           size: a.length,
-                    name: a.path.map(b => dec.decode(b)).join("/"),
+          name: a.path.map((b) => dec.decode(b)).join("/"),
         })),
       });
     }
@@ -103,7 +103,7 @@ export function NewPage() {
     if (ev) {
       await login.system.BroadcastEvent(ev);
     }
-        navigate("/")
+    navigate("/");
   }
 
   function renderCategories(a: Category, tags: Array<string>): ReactNode {

src/page/search.tsx

@@ -0,0 +1,28 @@
+import { NoteCollection, RequestBuilder } from "@snort/system";
+import { useParams } from "react-router-dom";
+import { TorrentKind } from "../const";
+import { useRequestBuilder } from "@snort/system-react";
+import { TorrentList } from "../element/torrent-list";
+import { Search } from "../element/search";
+
+export function SearchPage() {
+  const params = useParams();
+  const term = params.term as string | undefined;
+
+  const rb = new RequestBuilder(`search:${term}`);
+  rb.withFilter()
+    .kinds([TorrentKind])
+    .search(term)
+    .limit(100)
+    .relay(["wss://relay.nostr.band", "wss://relay.noswhere.com"]);
+
+  const data = useRequestBuilder(NoteCollection, rb);
+
+  return (
+    <>
+      <Search />
+      <h2>Search Results:</h2>
+      <TorrentList items={data.data ?? []} />
+    </>
+  );
+}

src/page/torrent.tsx

@@ -30,8 +30,8 @@ export function TorrentDetail({ item }: { item: TaggedNostrEvent }) {
   const navigate = useNavigate();
   const name = item.tags.find((a) => a[0] === "title")?.at(1);
   const size = Number(item.tags.find((a) => a[0] === "size")?.at(1));
-  const files = item.tags.filter(a => a[0] === "file");
-  const tags = item.tags.filter(a => a[0] === "t").map(a => a[1]);
+  const files = item.tags.filter((a) => a[0] === "file");
+  const tags = item.tags.filter((a) => a[0] === "t").map((a) => a[1]);
 
   async function deleteTorrent() {
     const ev = await login?.builder?.delete(item.id);
@@ -50,8 +50,12 @@ export function TorrentDetail({ item }: { item: TaggedNostrEvent }) {
       <div className="flex flex-col gap-1 bg-slate-700 p-2 rounded">
         <div>Size: {FormatBytes(size)}</div>
         <div>Uploaded: {new Date(item.created_at * 1000).toLocaleDateString()}</div>
-        <div className="flex items-center gap-2">Tags: <div className="flex gap-1">
-          {tags.map(a => <div className="rounded p-1 bg-slate-400">#{a}</div>)}
+        <div className="flex items-center gap-2">
+          Tags:{" "}
+          <div className="flex gap-1">
+            {tags.map((a) => (
+              <div className="rounded p-1 bg-slate-400">#{a}</div>
+            ))}
           </div>
         </div>
         <div>
@@ -64,14 +68,18 @@ export function TorrentDetail({ item }: { item: TaggedNostrEvent }) {
       <pre className="font-mono text-xs bg-slate-700 p-2 rounded overflow-y-auto">{item.content}</pre>
       <h3>Files</h3>
       <div className="flex flex-col gap-1 bg-slate-700 p-2 rounded">
-        {files.map(a => <div className="flex items-center gap-2">
+        {files.map((a) => (
+          <div className="flex items-center gap-2">
             {a[1]}
             <small className="text-slate-500 font-semibold">{FormatBytes(Number(a[2]))}</small>
-        </div>)}
           </div>
-      {item.pubkey == login?.publicKey && <Button className="bg-red-600 hover:bg-red-800" onClick={deleteTorrent}>
+        ))}
+      </div>
+      {item.pubkey == login?.publicKey && (
+        <Button className="bg-red-600 hover:bg-red-800" onClick={deleteTorrent}>
           Delete
-      </Button>}
+        </Button>
+      )}
     </div>
   );
 }