feat: render search on server

This commit is contained in:
2023-08-10 16:59:18 +02:00
parent 61ac1f39e9
commit c29743bd52
9 changed files with 235 additions and 111 deletions

View File

@ -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);
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(" && ") });
const searchParams = parseResourceUrl(req.url);
// Perform the Typesense search
const searchResults = await typesenseClient.collections("resources")
.documents().search({
q: query,
query_by,
facet_by: "rating,author,tags",
max_facet_values: 10,
filter_by: filter_by.join(" && "),
per_page: 50,
});
const searchResults = await searchResource(searchParams);
return json(searchResults);
},

View File

@ -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) {
const movies = await getAllArticles();
return ctx.render(movies);
async GET(req, ctx) {
const articles = await getAllArticles();
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"}

View File

@ -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>

View File

@ -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>

View File

@ -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) {
const movies = await getAllSeries();
return ctx.render(movies);
async GET(req, ctx) {
const series = await getAllSeries();
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>