feat: render search on server

components/layouts/main.tsx

@@ -5,6 +5,7 @@ import { Head } from "$fresh/runtime.ts";
 import Search, { RedirectSearchHandler } from "@islands/Search.tsx";
 import { KMenu } from "@islands/KMenu.tsx";
 import { Emoji } from "@components/Emoji.tsx";
+import { SearchResult } from "@lib/types.ts";
 
 export type Props = {
   children: ComponentChildren;
@@ -13,9 +14,12 @@ export type Props = {
   url: URL;
   description?: string;
   context?: { type: string };
+  searchResults?: SearchResult;
 };
 
-export const MainLayout = ({ children, url, title, context }: Props) => {
+export const MainLayout = (
+  { children, url, title, context, searchResults }: Props,
+) => {
   const hasSearch = url.search.includes("q=");
 
   return (
@@ -49,7 +53,13 @@ export const MainLayout = ({ children, url, title, context }: Props) => {
         class="py-5"
         style={{ fontFamily: "Work Sans" }}
       >
-        {hasSearch && <Search q={url.searchParams.get("q")} {...context} />}
+        {hasSearch && (
+          <Search
+            q={url.searchParams.get("q")}
+            {...context}
+            results={searchResults}
+          />
+        )}
         {!hasSearch && children}
       </main>
     </div>

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 searchQuery = useSignal(q);
-  const [data, setData] = useState<SearchResult>();
+  const data = useSignal<SearchResult | undefined>(results);
-  const [isLoading, setIsLoading] = useState(false);
+  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) {
+    if (u.searchParams.get("q") !== searchQuery.value) {
-      u.searchParams.set("q", searchQuery);
+      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);
+      isLoading.value = true;
-      const fetchUrl = new URL(window.location.href);
+      const jsonData = await fetchQueryResource(
-      fetchUrl.pathname = "/api/resources";
+        new URL(window?.location.href),
-      if (query) {
+        type,
-        fetchUrl.searchParams.set("q", encodeURIComponent(query));
+      );
-      } else {
+      data.value = jsonData;
-        return;
+      isLoading.value = false;
-      }
-      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);
     } 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) {
+    if (target.value !== searchQuery.value) {
-      setSearchQuery(target.value);
+      searchQuery.value = target.value;
     }
   };
 
   useEffect(() => {
-    debouncedFetchData(searchQuery, showSeenStatus.value); // Call the debounced fetch function with the updated search query
+    debouncedFetchData(); // Call the debounced fetch function with the updated search query
-  }, [searchQuery, showSeenStatus.value]);
+  }, [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
+      {data?.value?.hits?.length && !isLoading.value
-        ? <SearchResultList showEmoji={!type} result={data} />
+        ? <SearchResultList showEmoji={!type} result={data.value} />
-        : isLoading
+        : isLoading.value
         ? <div />
         : (
           <div

lib/search.ts

@@ -0,0 +1,79 @@
+import { BadRequestError } from "@lib/errors.ts";
+import { resources } from "@lib/resources.ts";
+import { ResourceStatus } from "@lib/types.ts";
+import { getTypeSenseClient } from "@lib/typesense.ts";
+import { extractHashTags } from "@lib/string.ts";
+
+type ResourceType = keyof typeof resources;
+
+type SearchParams = {
+  q: string;
+  type?: ResourceType;
+  tags?: string[];
+  status?: ResourceStatus;
+  query_by?: string;
+};
+
+export function parseResourceUrl(_url: string): SearchParams | undefined {
+  try {
+    const url = new URL(_url);
+    let query = url.searchParams.get("q");
+    if (!query) {
+      return undefined;
+    }
+    query = decodeURIComponent(query);
+
+    const hashTags = extractHashTags(query);
+
+    for (const tag of hashTags) {
+      query = query.replace("#" + tag, "");
+    }
+
+    return {
+      q: query,
+      type: url.searchParams.get("type") as ResourceType || undefined,
+      tags: hashTags,
+      status: url.searchParams.get("status") as ResourceStatus || undefined,
+      query_by: url.searchParams.get("query_by") || undefined,
+    };
+  } catch (_err) {
+    return undefined;
+  }
+}
+
+export async function searchResource(
+  { q, query_by = "name,description,author,tags", tags = [], type, status }:
+    SearchParams,
+) {
+  const typesenseClient = await getTypeSenseClient();
+  if (!typesenseClient) {
+    throw new Error("Query not available");
+  }
+
+  const filter_by: string[] = [];
+
+  if (type) {
+    filter_by.push(`type:=${type}`);
+  }
+
+  if (status) {
+    filter_by.push(`status:=${status}`);
+  }
+
+  if (tags?.length) {
+    filter_by.push(`tags:[${tags.map((t) => `\`${t}\``).join(",")}]`);
+    for (const tag of tags) {
+      q = q.replaceAll(`#${tag}`, "");
+    }
+  }
+
+  return await typesenseClient.collections("resources")
+    .documents().search({
+      q,
+      query_by,
+      facet_by: "rating,author,tags",
+      max_facet_values: 10,
+      filter_by: filter_by.join(" && "),
+      per_page: 50,
+    });
+}

lib/types.ts

@@ -54,4 +54,9 @@ export type TypesenseDocument = {
   image?: string;
 };
 
+export enum ResourceStatus {
+  COMPLETED = "completed",
+  NOT_COMPLETED = "not_completed",
+}
+
 export type SearchResult = SearchResponse<TypesenseDocument>;

routes/api/resources.ts

@@ -2,7 +2,7 @@ import { Handlers } from "$fresh/server.ts";
 import { AccessDeniedError, BadRequestError } from "@lib/errors.ts";
 import { getTypeSenseClient } from "@lib/typesense.ts";
 import { json } from "@lib/helpers.ts";
-import { extractHashTags } from "@lib/string.ts";
+import { parseResourceUrl, searchResource } from "@lib/search.ts";
 
 export const handler: Handlers = {
   async GET(req, ctx) {
@@ -11,52 +11,10 @@ export const handler: Handlers = {
       throw new AccessDeniedError();
     }
 
-    const url = new URL(req.url);
+    const searchParams = parseResourceUrl(req.url);
-    let query = url.searchParams.get("q");
-    if (!query) {
-      throw new BadRequestError('Query parameter "q" is required.');
-    }
-    query = decodeURIComponent(query);
-
-    const query_by = url.searchParams.get("query_by") ||
-      "name,description,author,tags";
-
-    const filter_by: string[] = [];
-    const type = url.searchParams.get("type");
-    if (type) {
-      filter_by.push(`type:=${type}`);
-    }
-
-    const status = url.searchParams.get("status");
-    if (status) {
-      filter_by.push(`status:=${status}`);
-    }
-
-    const hashTags = extractHashTags(query);
-    if (hashTags?.length) {
-      filter_by.push(`tags:[${hashTags.map((t) => `\`${t}\``).join(",")}]`);
-      for (const tag of hashTags) {
-        query = query.replaceAll(`#${tag}`, "");
-      }
-    }
-
-    const typesenseClient = await getTypeSenseClient();
-    if (!typesenseClient) {
-      throw new Error("Query not available");
-    }
-
-    console.log({ query, query_by, filter_by: filter_by.join(" && ") });
 
     // Perform the Typesense search
-    const searchResults = await typesenseClient.collections("resources")
+    const searchResults = await searchResource(searchParams);
-      .documents().search({
-        q: query,
-        query_by,
-        facet_by: "rating,author,tags",
-        max_facet_values: 10,
-        filter_by: filter_by.join(" && "),
-        per_page: 50,
-      });
 
     return json(searchResults);
   },

routes/articles/index.tsx

@@ -6,17 +6,30 @@ import { KMenu } from "@islands/KMenu.tsx";
 import { Grid } from "@components/Grid.tsx";
 import { IconArrowLeft } from "@components/icons.tsx";
 import { RedirectSearchHandler } from "@islands/Search.tsx";
+import { parseResourceUrl, searchResource } from "@lib/search.ts";
+import { SearchResult } from "@lib/types.ts";
 
 export const handler: Handlers<Article[] | null> = {
-  async GET(_, ctx) {
+  async GET(req, ctx) {
-    const movies = await getAllArticles();
+    const articles = await getAllArticles();
-    return ctx.render(movies);
+    const searchParams = parseResourceUrl(req.url);
+    const searchResults = searchParams &&
+      await searchResource({ ...searchParams, type: "article" });
+    return ctx.render({ articles, searchResults });
   },
 };
 
-export default function Greet(props: PageProps<Article[] | null>) {
+export default function Greet(
+  props: PageProps<{ articles: Article[] | null; searchResults: SearchResult }>,
+) {
+  const { articles, searchResults } = props.data;
   return (
-    <MainLayout url={props.url} title="Articles" context={{ type: "article" }}>
+    <MainLayout
+      url={props.url}
+      title="Articles"
+      context={{ type: "article" }}
+      searchResults={searchResults}
+    >
       <header class="flex gap-4 items-center mb-5 md:hidden">
         <a
           class="px-4 ml-4 py-2 bg-gray-300 text-gray-800 rounded-lg flex items-center gap-1"
@@ -31,7 +44,7 @@ export default function Greet(props: PageProps<Article[] | null>) {
       <RedirectSearchHandler />
       <KMenu type="main" context={{ type: "article" }} />
       <Grid>
-        {props.data?.map((doc) => {
+        {articles?.map((doc) => {
           return (
             <Card
               image={doc?.meta?.image || "/placeholder.svg"}

routes/movies/index.tsx

@@ -6,17 +6,31 @@ import { Grid } from "@components/Grid.tsx";
 import { IconArrowLeft } from "@components/icons.tsx";
 import { KMenu } from "@islands/KMenu.tsx";
 import { RedirectSearchHandler } from "@islands/Search.tsx";
+import { parseResourceUrl, searchResource } from "@lib/search.ts";
+import { SearchResult } from "@lib/types.ts";
 
 export const handler: Handlers<Movie[] | null> = {
-  async GET(_, ctx) {
+  async GET(req, ctx) {
     const movies = await getAllMovies();
-    return ctx.render(movies);
+    const searchParams = parseResourceUrl(req.url);
+    const searchResults = searchParams &&
+      await searchResource({ ...searchParams, type: "movie" });
+    return ctx.render({ movies, searchResults });
   },
 };
 
-export default function Greet(props: PageProps<Movie[] | null>) {
+export default function Greet(
+  props: PageProps<{ movies: Movie[] | null; searchResults: SearchResult }>,
+) {
+  const { movies, searchResults } = props.data;
+
   return (
-    <MainLayout url={props.url} title="Movies" context={{ type: "movie" }}>
+    <MainLayout
+      url={props.url}
+      title="Movies"
+      context={{ type: "movie" }}
+      searchResults={searchResults}
+    >
       <RedirectSearchHandler />
       <KMenu type="main" context={{ type: "movie" }} />
       <header class="flex gap-4 items-center mb-5 md:hidden">
@@ -31,7 +45,7 @@ export default function Greet(props: PageProps<Movie[] | null>) {
         <h3 class="text-2xl text-white font-light">🍿 Movies</h3>
       </header>
       <Grid>
-        {props.data?.map((doc) => {
+        {movies?.map((doc) => {
           return <MovieCard movie={doc} />;
         })}
       </Grid>

routes/recipes/index.tsx

@@ -5,18 +5,31 @@ import { getAllRecipes, Recipe } from "@lib/resource/recipes.ts";
 import { Grid } from "@components/Grid.tsx";
 import { IconArrowLeft } from "@components/icons.tsx";
 import { KMenu } from "@islands/KMenu.tsx";
-import { RedirectSearchHandler } from "@islands/Search.tsx";
+import { fetchQueryResource, RedirectSearchHandler } from "@islands/Search.tsx";
+import { parseResourceUrl, searchResource } from "@lib/search.ts";
+import { SearchResult } from "@lib/types.ts";
 
 export const handler: Handlers<Recipe[] | null> = {
-  async GET(_, ctx) {
+  async GET(req, ctx) {
     const recipes = await getAllRecipes();
-    return ctx.render(recipes);
+    const searchParams = parseResourceUrl(req.url);
+    const searchResults = searchParams &&
+      await searchResource({ ...searchParams, type: "recipe" });
+    return ctx.render({ recipes, searchResults });
   },
 };
 
-export default function Greet(props: PageProps<Recipe[] | null>) {
+export default function Greet(
+  props: PageProps<{ recipes: Recipe[] | null; searchResults: SearchResult }>,
+) {
+  const { recipes, searchResults } = props.data;
   return (
-    <MainLayout url={props.url} title="Recipes" context={{ type: "recipe" }}>
+    <MainLayout
+      url={props.url}
+      title="Recipes"
+      searchResults={searchResults}
+      context={{ type: "recipe" }}
+    >
       <RedirectSearchHandler />
       <KMenu type="main" context={{ type: "recipe" }} />
       <header class="flex gap-4 items-center mb-2 lg:mb-5 md:hidden">
@@ -31,7 +44,7 @@ export default function Greet(props: PageProps<Recipe[] | null>) {
         <h3 class="text-2xl text-white font-light">🍽️ Recipes</h3>
       </header>
       <Grid>
-        {props.data?.map((doc) => {
+        {recipes?.map((doc) => {
           return <RecipeCard recipe={doc} />;
         })}
       </Grid>

routes/series/index.tsx

@@ -6,17 +6,31 @@ import { getAllSeries, Series } from "@lib/resource/series.ts";
 import { RedirectSearchHandler } from "@islands/Search.tsx";
 import { KMenu } from "@islands/KMenu.tsx";
 import { MovieCard } from "@components/MovieCard.tsx";
+import { parseResourceUrl, searchResource } from "@lib/search.ts";
+import { SearchResult } from "@lib/types.ts";
 
 export const handler: Handlers<Series[] | null> = {
-  async GET(_, ctx) {
+  async GET(req, ctx) {
-    const movies = await getAllSeries();
+    const series = await getAllSeries();
-    return ctx.render(movies);
+    const searchParams = parseResourceUrl(req.url);
+    const searchResults = searchParams &&
+      await searchResource({ ...searchParams, type: "series" });
+    return ctx.render({ series, searchResults });
   },
 };
 
-export default function Greet(props: PageProps<Series[] | null>) {
+export default function Greet(
+  props: PageProps<{ series: Series[] | null; searchResults: SearchResult }>,
+) {
+  const { series, searchResults } = props.data;
+
   return (
-    <MainLayout url={props.url} title="Series" context={{ type: "series" }}>
+    <MainLayout
+      url={props.url}
+      title="Series"
+      context={{ type: "series" }}
+      searchResults={searchResults}
+    >
       <RedirectSearchHandler />
       <KMenu type="main" context={{ type: "series" }} />
       <header class="flex gap-4 items-center mb-5 md:hidden">
@@ -31,7 +45,7 @@ export default function Greet(props: PageProps<Series[] | null>) {
         <h3 class="text-2xl text-white font-light">🎥 Series</h3>
       </header>
       <Grid>
-        {props.data?.map((doc) => {
+        {series?.map((doc) => {
           return <MovieCard sublink="series" movie={doc} />;
         })}
       </Grid>