embryo till sök

Frontend/src/components/AuthorCard.tsx

@@ -10,7 +10,7 @@ const AuthorCard: Component<{ author: author }> = (props: {
 			<Card.Img
 				variant="top"
 				class="padding-1"
-				src={"/api/biiblan/authorcover/" + encodeURIComponent(props.author.id)}
+				src={"/api/bibblan/authorcover/" + encodeURIComponent(props.author.id)}
 			/>
 			<Card.Body>
 				<Card.Title>{props.author.name}</Card.Title>

Frontend/src/components/AuthorList.tsx

@@ -5,13 +5,26 @@ import { author } from "../types/types";
 
 const BookList: Component = () => {
 	const [authors, setAuthors] = createSignal<author[]>([]);
+	const [query, setQuery] = createSignal("");
+
+	const update = (query: string) => {
+		setQuery(query);
+		BibblanService.getAuthors(query).then(setAuthors);
+	};
+
 	onMount(() => {
 		BibblanService.getAuthors().then(setAuthors);
 	});
 
 	return (
 		<div>
-			<h1>Books!</h1>
+			<h1>Authors!</h1>
+			<input
+				type="text"
+				class="form-control mb-3"
+				placeholder="Search..."
+				onInput={(e) => update(e.currentTarget.value)}
+			/>
 			<div class="book-grid d-flex flex-wrap justify-content-between gap-3 p-3">
 				<For each={authors()}>{(item) => <AuthorCard author={item} />}</For>
 			</div>

Frontend/src/components/BookList.tsx

@@ -1,4 +1,4 @@
-import { createSignal, onMount, For, type Component } from "solid-js";
+import { createSignal, onMount, For, Show, type Component } from "solid-js";
 import { useParams } from "@solidjs/router";
 import BookCard from "./BookCard";
 import BibblanService from "../services/bibblanservice";
@@ -6,7 +6,14 @@ import { book } from "../types/types";
 
 const BookList: Component = () => {
 	const [books, setBooks] = createSignal<book[]>([]);
+	const [query, setQuery] = createSignal("");
 	const params = useParams();
+
+	const update = (query: string) => {
+		setQuery(query);
+		BibblanService.getBooks(params.authorid, query).then(setBooks);
+	};
+
 	onMount(() => {
 		BibblanService.getBooks(params.authorid).then(setBooks);
 	});
@@ -14,6 +21,14 @@ const BookList: Component = () => {
 	return (
 		<div>
 			<h1>Books!</h1>
+			<Show when={!params.authorid}>
+				<input
+					type="text"
+					class="form-control mb-3"
+					placeholder="Search..."
+					onInput={(e) => update(e.currentTarget.value)}
+				/>
+			</Show>
 			<div class="book-grid d-flex flex-wrap justify-content-between gap-3 p-3">
 				<For each={books()}>{(item) => <BookCard book={item} />}</For>
 			</div>

Frontend/src/services/bibblanservice.ts

@@ -2,18 +2,27 @@ import { book, author } from "../types/types";
 
 const BibblanService = {
 	getBooks: async (
-		authorid: string | undefined = undefined
+		authorid: string | undefined = undefined,
+		query: string | undefined = undefined
 	): Promise<book[]> => {
 		let url = "/api/bibblan/books";
 		if (authorid != undefined) {
 			url += `/author/${authorid}`;
+		} else if (query != undefined && query.length > 0) {
+			url += `?query=${encodeURIComponent(query)}`;
 		}
 		const response = await fetch(url);
 		return response.json();
 	},
 
-	getAuthors: async (): Promise<author[]> => {
-		const response = await fetch("/api/bibblan/authors");
+	getAuthors: async (
+		query: string | undefined = undefined
+	): Promise<author[]> => {
+		let url = "/api/bibblan/authors";
+		if (query != undefined && query.length > 0) {
+			url += `?query=${encodeURIComponent(query)}`;
+		}
+		const response = await fetch(url);
 		return response.json();
 	},
 };