max/memorium
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

feat: render search on server

Browse Source
This commit is contained in:
max_richter 2023-08-10 16:59:18 +02:00
parent 61ac1f39e9
commit c29743bd52
9 changed files with 235 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/layouts/main.tsx
View File

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

100
islands/Search.tsx
View File

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

79
lib/search.ts Normal file
View File

@ -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,
});
}

5
lib/types.ts
View File

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

48
routes/api/resources.ts
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);
},

25
routes/articles/index.tsx
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"}

24
routes/movies/index.tsx
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>

25
routes/recipes/index.tsx
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>

26
routes/series/index.tsx
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>