feat: render search on server

islands/Search.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useRef, useState } from "preact/hooks";
+import { useEffect, useRef } from "preact/hooks";
 import useDebouncedCallback from "@lib/hooks/useDebouncedCallback.ts";
-import { IconGhost, IconLoader2, IconSearch } from "@components/icons.tsx";
+import { IconLoader2, IconSearch } from "@components/icons.tsx";
 import { useEventListener } from "@lib/hooks/useEventListener.ts";
 import { SearchResult } from "@lib/types.ts";
 import { resources } from "@lib/resources.ts";
@@ -12,6 +12,31 @@ import { useSignal } from "@preact/signals";
 import Image from "@components/Image.tsx";
 import { Emoji } from "@components/Emoji.tsx";
 
+export async function fetchQueryResource(url: URL, type = "") {
+  const query = url.searchParams.get("q");
+  const status = url.searchParams.get("status");
+
+  try {
+    url.pathname = "/api/resources";
+    if (query) {
+      url.searchParams.set("q", encodeURIComponent(query));
+    } else {
+      return;
+    }
+    if (status) {
+      url.searchParams.set("status", "not-seen");
+    }
+    if (type) {
+      url.searchParams.set("type", type);
+    }
+    const response = await fetch(url);
+    const jsonData = await response.json();
+    return jsonData;
+  } catch (error) {
+    console.error("Error fetching data:", error);
+  }
+}
+
 export const RedirectSearchHandler = () => {
   if (getCookie("session_cookie")) {
     useEventListener("keydown", (e: KeyboardEvent) => {
@@ -84,17 +109,22 @@ export const SearchResultList = (
 };
 
 const Search = (
-  { q = "*", type }: { q: string; type?: string },
+  { q = "*", type, results }: {
+    q: string;
+    type?: string;
+    results?: SearchResult;
+  },
 ) => {
-  const [searchQuery, setSearchQuery] = useState(q);
-  const [data, setData] = useState<SearchResult>();
-  const [isLoading, setIsLoading] = useState(false);
+  const searchQuery = useSignal(q);
+  const data = useSignal<SearchResult | undefined>(results);
+  const isLoading = useSignal(false);
   const showSeenStatus = useSignal(false);
   const inputRef = useRef<HTMLInputElement>(null);
+
   if ("history" in globalThis) {
     const u = new URL(window.location.href);
-    if (u.searchParams.get("q") !== searchQuery) {
-      u.searchParams.set("q", searchQuery);
+    if (u.searchParams.get("q") !== searchQuery.value) {
+      u.searchParams.set("q", searchQuery.value);
     }
     if (showSeenStatus.value) {
       u.searchParams.set("status", "not-seen");
@@ -105,53 +135,41 @@ const Search = (
     window.history.replaceState({}, "", u);
   }
 
-  const fetchData = async (query: string, showSeen: boolean) => {
+  const fetchData = async () => {
     try {
-      setIsLoading(true);
-      const fetchUrl = new URL(window.location.href);
-      fetchUrl.pathname = "/api/resources";
-      if (query) {
-        fetchUrl.searchParams.set("q", encodeURIComponent(query));
-      } else {
-        return;
-      }
-      if (showSeen) {
-        fetchUrl.searchParams.set("status", "not-seen");
-      }
-      if (type) {
-        fetchUrl.searchParams.set("type", type);
-      }
-      const response = await fetch(fetchUrl);
-      const jsonData = await response.json();
-      setData(jsonData);
-      setIsLoading(false);
+      isLoading.value = true;
+      const jsonData = await fetchQueryResource(
+        new URL(window?.location.href),
+        type,
+      );
+      data.value = jsonData;
+      isLoading.value = false;
     } catch (error) {
       console.error("Error fetching data:", error);
-      setIsLoading(false);
+      isLoading.value = false;
     }
   };
+  const debouncedFetchData = useDebouncedCallback(fetchData, 500); // Debounce the fetchData function with a delay of 500ms
 
   useEffect(() => {
-    if (inputRef.current && searchQuery?.length === 0) {
+    if (inputRef.current && searchQuery?.value.length === 0) {
       inputRef.current?.focus();
     }
   }, [inputRef.current, searchQuery]);
 
-  const debouncedFetchData = useDebouncedCallback(fetchData, 500); // Debounce the fetchData function with a delay of 500ms
-
   const handleInputChange = (event: Event) => {
     const target = event.target as HTMLInputElement;
-    if (target.value !== searchQuery) {
-      setSearchQuery(target.value);
+    if (target.value !== searchQuery.value) {
+      searchQuery.value = target.value;
     }
   };
 
   useEffect(() => {
-    debouncedFetchData(searchQuery, showSeenStatus.value); // Call the debounced fetch function with the updated search query
-  }, [searchQuery, showSeenStatus.value]);
+    debouncedFetchData(); // Call the debounced fetch function with the updated search query
+  }, [searchQuery.value, showSeenStatus.value]);
 
   useEffect(() => {
-    debouncedFetchData(q, showSeenStatus.value);
+    debouncedFetchData();
   }, []);
 
   return (
@@ -161,7 +179,7 @@ const Search = (
           class="flex items-center gap-1 rounded-xl w-full shadow-2xl"
           style={{ background: "#2B2930", color: "#818181" }}
         >
-          {isLoading && searchQuery
+          {isLoading.value && searchQuery.value
             ? <IconLoader2 class="w-4 h-4 ml-4 mr-2 animate-spin" />
             : <IconSearch class="w-4 h-4 ml-4 mr-2" />}
           <input
@@ -169,16 +187,16 @@ const Search = (
             style={{ fontSize: "1.2em" }}
             class="bg-transparent py-3 w-full"
             ref={inputRef}
-            value={searchQuery}
+            value={searchQuery.value}
             onInput={handleInputChange}
           />
         </div>
         <Checkbox label="seen" checked={showSeenStatus} />
         <Rating rating={4} />
       </header>
-      {data?.hits?.length && !isLoading
-        ? <SearchResultList showEmoji={!type} result={data} />
-        : isLoading
+      {data?.value?.hits?.length && !isLoading.value
+        ? <SearchResultList showEmoji={!type} result={data.value} />
+        : isLoading.value
         ? <div />
         : (
           <div