Move search to server (#2)

components/Search.tsx

@@ -0,0 +1,9 @@
+export default function Search(props: {defaultValue: string}) {
+    return (
+        <form className="flex flex-col w-1/2 mx-auto my-4">
+            <label className="sr-only" htmlFor="query">Program</label>
+            <input placeholder="NRK-podcast" className="border-2" name="query" id="query" defaultValue={props.defaultValue} />
+            <button type="submit" className="my-2 bg-gray-100">Søk</button>
+        </form>
+    );
+}

components/SeriesCard.tsx

@@ -1,13 +1,14 @@
 import { Serie } from "../lib/nrk.ts"
 
-export function SerieCard(props: { serie: Serie }) {
+export function SerieCard(props: { serie: Serie, origin: string }) {
+    const feedUrl = new URL(`/api/feeds/${props.serie.seriesId}`, props.origin);
 
-    return <div className="border-2 my-2 mx-4">
-        <h2 className="text-4xl">{props.serie.title}</h2>
-        <p className="text-2xl">{props.serie.description}</p>
-        <img src={props.serie.images[0].uri} />
-        <p>
-            Feed: https://{location.hostname}{`/api/feeds/${props.serie.seriesId}`}
-        </p>
-    </div >;
+    return (
+        <div className="border-2 my-2 mx-4">
+            <h2 className="text-4xl">{props.serie.title}</h2>
+            <p className="text-2xl">{props.serie.description}</p>
+            <img src={props.serie.images[0].uri} />
+            <p>Feed: {feedUrl.toString()}</p>
+        </div>
+    );
 }

fresh.gen.ts

@@ -6,8 +6,6 @@ import config from "./deno.json" assert { type: "json" };
 import * as $0 from "./routes/api/feeds/[seriesId].ts";
 import * as $1 from "./routes/api/search.ts";
 import * as $2 from "./routes/index.tsx";
-import * as $$0 from "./islands/Counter.tsx";
-import * as $$1 from "./islands/Search.tsx";
 
 const manifest = {
   routes: {
@@ -15,10 +13,7 @@ const manifest = {
     "./routes/api/search.ts": $1,
     "./routes/index.tsx": $2,
   },
-  islands: {
-    "./islands/Counter.tsx": $$0,
-    "./islands/Search.tsx": $$1,
-  },
+  islands: {},
   baseUrl: import.meta.url,
   config,
 };

islands/Counter.tsx

@@ -1,17 +0,0 @@
-import { useState } from "preact/hooks";
-import { Button } from "../components/Button.tsx";
-
-interface CounterProps {
-  start: number;
-}
-
-export default function Counter(props: CounterProps) {
-  const [count, setCount] = useState(props.start);
-  return (
-    <div class="flex gap-2 w-full">
-      <p class="flex-grow-1 font-bold text-xl">{count}</p>
-      <Button onClick={() => setCount(count - 1)}>-1</Button>
-      <Button onClick={() => setCount(count + 1)}>+1</Button>
-    </div>
-  );
-}

islands/Search.tsx

@@ -1,37 +0,0 @@
-
-import { Head } from "$fresh/runtime.ts";
-import { useState } from "preact/hooks";
-import { post, OK } from "https://deno.land/x/kall@v0.1.0/mod.ts";
-import { Serie } from "../lib/nrk.ts";
-import { SerieCard } from "../components/SeriesCard.tsx";
-
-export default function Search() {
-
-    const [query, setQuery] = useState<string>("");
-    const [result, setResult] = useState<Serie[]>([]);
-
-    const onSearch = async (event: any) => {
-
-        const [status, response] = await post<any>("/api/search", {
-            query
-        });
-
-        setResult(response.series as Serie[])
-    }
-
-    return (
-        <div className="flex flex-col w-1/2 mx-auto my-4">
-            <input
-                placeholder="NRK-podcast"
-                className="border-2"
-                value={query}
-                onInput={(event: any) => { setQuery(event.target.value) }} />
-            <button
-                className="my-2 bg-gray-100"
-                onClick={onSearch}>Søk</button>
-            <div>
-                {result.map(result => <SerieCard serie={result}></SerieCard>)}
-            </div>
-        </div>
-    );
-}

routes/index.tsx

@@ -1,10 +1,28 @@
 import { Head } from "$fresh/runtime.ts";
-import { useState } from "preact/hooks";
-import { post, OK } from "https://deno.land/x/kall@v0.1.0/mod.ts";
-import Search from "../islands/Search.tsx"
+import { Handlers, PageProps } from "$fresh/server.ts";
+import Search from "../components/Search.tsx"
+import { SerieCard } from "../components/SeriesCard.tsx";
+import { nrkRadio, Serie } from "../lib/nrk.ts";
 
-export default function Home() {
+interface HandlerData {
+    query: string;
+    result?: Serie[];
+    origin: string;
+}
 
+export const handler: Handlers<HandlerData> = {
+    async GET(request, ctx) {
+        const url = new URL(request.url);
+        const query = url.searchParams.get("query");
+        let result: Serie[] | undefined;
+        if (query) {
+            result = await nrkRadio.search(query);
+        }
+        return ctx.render({ query: query || "", result, origin: url.origin });
+    },
+  };
+
+export default function Home({ data }: PageProps<HandlerData>) {
     return (
         <>
             <Head>
@@ -12,7 +30,12 @@ export default function Home() {
             </Head>
             <div className="p-4 mx-auto max-w-screen-md bg-blue-400">
                 <h1 className="text-4xl text-center">NRSS - NRK-podcast som RSS</h1>
-                <Search />
+                <Search defaultValue={data.query} />
+                {data.result ? (
+                    <div className="w-1/2 mx-auto my-4">   
+                        {data.result.map(result => <SerieCard serie={result} origin={data.origin} />)}
+                    </div>
+                ) : null}
                 <h2 className="text-3xl">Hva er dette?</h2>
                 <p>Hei! Denne løsningen er laget som en reaksjon på at statsfinnansierte NRK lukker ned innholdet sitt til sin egen app fremfor å bygge oppunder åpne standarder som RSS. Denne siden er laget i dag (09.03.23), fort og gæli - den er ustabil og kommer til å krasje :) Sjekk gjerne ut <a href="https://github.com/olaven/NRSS/" className="underline">kildekoden</a>. </p>
                 <h2 className="text-3xl">Hvordan bruker jeg dette?</h2>