From 69544520d5834ab341a9b1b34df1d5938bd8170f Mon Sep 17 00:00:00 2001
From: Gustavo Ocanto <gustavoocanto@gmail.com>
Date: Mon, 28 Jul 2025 16:36:30 +0800
Subject: [PATCH 1/3] hook categories

---
 src/partials/ArticlesListPartial.vue          | 21 +++++++++----------
 .../api/response/categories-response.ts       | 14 +++++++++++++
 src/stores/api/store.ts                       | 12 ++++++++++-
 3 files changed, 35 insertions(+), 12 deletions(-)
 create mode 100644 src/stores/api/response/categories-response.ts

diff --git a/src/partials/ArticlesListPartial.vue b/src/partials/ArticlesListPartial.vue
index e85364d8..04301b7c 100644
--- a/src/partials/ArticlesListPartial.vue
+++ b/src/partials/ArticlesListPartial.vue
@@ -4,17 +4,8 @@
 
 		<!-- Filters -->
 		<ul class="flex flex-wrap text-sm border-b border-slate-100 dark:border-slate-800">
-			<li class="px-3 -mb-px">
-				<a class="block py-3 font-medium text-slate-500 border-b-2 border-fuchsia-500 dark:text-slate-300 dark:border-teal-500" href="#">Coding</a>
-			</li>
-			<li class="px-3 -mb-px">
-				<a class="block py-3 text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300" href="#">Startups</a>
-			</li>
-			<li class="px-3 -mb-px">
-				<a class="block py-3 text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300" href="#">Tutorials</a>
-			</li>
-			<li class="px-3 -mb-px">
-				<a class="block py-3 text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300" href="#">Indie Hacking</a>
+			<li v-for="category in categories" :key="category.uuid" class="px-3 -mb-px">
+				<a class="block py-3 font-medium text-slate-500 border-b-2 border-fuchsia-500 dark:text-slate-300 dark:border-teal-500" href="#">{{ category.name }}</a>
 			</li>
 		</ul>
 
@@ -31,15 +22,23 @@ import { useApiStore } from '@api/store.ts';
 import { debugError } from '@api/http-error.ts';
 import ArticleItemPartial from '@partials/ArticleItemPartial.vue';
 import type { PostResponse, PostsCollectionResponse } from '@api/response/posts-response.ts';
+import { CategoriesCollectionResponse, CategoryResponse } from '@api/response/categories-response.ts';
 
 const apiStore = useApiStore();
+
 const collection = ref<PostsCollectionResponse>();
 const items = ref<PostResponse[]>([]);
 
+const categoriesCollection = ref<CategoriesCollectionResponse>();
+const categories = ref<CategoryResponse[]>([]);
+
 onMounted(async () => {
 	try {
 		collection.value = await apiStore.getPosts();
 		items.value = collection.value.data as PostResponse[];
+
+		categoriesCollection.value = await apiStore.getCategories();
+		categories.value = categoriesCollection.value.data as CategoryResponse[];
 	} catch (error) {
 		debugError(error);
 	}
diff --git a/src/stores/api/response/categories-response.ts b/src/stores/api/response/categories-response.ts
new file mode 100644
index 00000000..9a7b712e
--- /dev/null
+++ b/src/stores/api/response/categories-response.ts
@@ -0,0 +1,14 @@
+export interface CategoriesCollectionResponse {
+	page: number;
+	total: number;
+	page_size: number;
+	total_pages: number;
+	data: CategoryResponse[];
+}
+
+export interface CategoryResponse {
+	uuid: string;
+	name: string;
+	slug: string;
+	description: string;
+}
diff --git a/src/stores/api/store.ts b/src/stores/api/store.ts
index 3cb5ab7f..2938ca2f 100644
--- a/src/stores/api/store.ts
+++ b/src/stores/api/store.ts
@@ -3,6 +3,7 @@ import { parseError } from '@api/http-error.ts';
 import { ProfileResponse } from '@api/response/profile-response.ts';
 import { ApiClient, ApiResponse, defaultCreds } from '@api/client.ts';
 import type { PostResponse, PostsCollectionResponse } from '@api/response/posts-response.ts';
+import { CategoriesCollectionResponse } from '@api/response/categories-response.ts';
 
 const STORE_KEY = 'api-client-store';
 
@@ -31,8 +32,17 @@ export const useApiStore = defineStore(STORE_KEY, {
 				return parseError(error);
 			}
 		},
+		async getCategories(): Promise<CategoriesCollectionResponse> {
+			const url = 'categories?limit=5';
+
+			try {
+				return await this.client.get<CategoriesCollectionResponse>(url);
+			} catch (error) {
+				return parseError(error);
+			}
+		},
 		async getPosts(): Promise<PostsCollectionResponse> {
-			const url = 'posts';
+			const url = 'posts?limit=5';
 
 			try {
 				return await this.client.get<PostsCollectionResponse>(url);

From 5c95a66581fd2958a9e54c9c1bb3b7035de177ce Mon Sep 17 00:00:00 2001
From: Gustavo Ocanto <gustavoocanto@gmail.com>
Date: Mon, 28 Jul 2025 17:18:31 +0800
Subject: [PATCH 2/3] format

---
 src/pages/PostPage.vue                    |  2 +-
 src/partials/ArticleItemPartial.vue       | 11 +++-
 src/partials/ArticlesListPartial.vue      | 61 ++++++++++++++++++++---
 src/partials/AvatarPartial.vue            |  2 +-
 src/stores/api/client.ts                  | 17 +++++++
 src/stores/api/response/posts-response.ts |  8 +++
 src/stores/api/store.ts                   |  6 +--
 7 files changed, 93 insertions(+), 14 deletions(-)

diff --git a/src/pages/PostPage.vue b/src/pages/PostPage.vue
index c13cad05..35d3c659 100644
--- a/src/pages/PostPage.vue
+++ b/src/pages/PostPage.vue
@@ -86,7 +86,7 @@
 									<!-- Post content -->
 									<div class="text-slate-500 dark:text-slate-400 space-y-8">
 										<p>{{ post.excerpt }}</p>
-										<img class="w-full" :src="post.cover_image_url" width="692" height="390" :alt="post.title" />
+										<img class="w-full" :src="post.cover_image_url" width="692" height="390" :alt="post.title" fetchpriority="high" aria-hidden="true" />
 										<div ref="postContainer" class="space-y-4" v-html="htmlContent"></div>
 									</div>
 								</article>
diff --git a/src/partials/ArticleItemPartial.vue b/src/partials/ArticleItemPartial.vue
index 190037d3..852ed8a0 100644
--- a/src/partials/ArticleItemPartial.vue
+++ b/src/partials/ArticleItemPartial.vue
@@ -1,7 +1,16 @@
 <template>
 	<article v-if="item" class="py-5 border-b border-slate-100 dark:border-slate-800">
 		<div class="flex items-start">
-			<img class="rounded-sm w-16 h-16 sm:w-[88px] sm:h-[88px] object-cover mr-6" :src="item.cover_image_url" width="88" height="88" :alt="item.title" />
+			<img
+				class="rounded-sm w-16 h-16 sm:w-[88px] sm:h-[88px] object-cover mr-6"
+				:src="item.cover_image_url"
+				width="88"
+				height="88"
+				:alt="item.title"
+				loading="lazy"
+				decoding="async"
+				fetchpriority="low"
+			/>
 			<div>
 				<div class="text-xs text-slate-700 uppercase mb-1 dark:text-slate-500">
 					{{ date().format(new Date(item.published_at)) }}
diff --git a/src/partials/ArticlesListPartial.vue b/src/partials/ArticlesListPartial.vue
index 04301b7c..6a60f9fc 100644
--- a/src/partials/ArticlesListPartial.vue
+++ b/src/partials/ArticlesListPartial.vue
@@ -5,7 +5,17 @@
 		<!-- Filters -->
 		<ul class="flex flex-wrap text-sm border-b border-slate-100 dark:border-slate-800">
 			<li v-for="category in categories" :key="category.uuid" class="px-3 -mb-px">
-				<a class="block py-3 font-medium text-slate-500 border-b-2 border-fuchsia-500 dark:text-slate-300 dark:border-teal-500" href="#">{{ category.name }}</a>
+				<a
+					href="#"
+					:class="
+						filters.category === category.slug
+							? 'text-slate-800 border-fuchsia-500 dark:text-slate-200 dark:border-teal-500'
+							: 'text-slate-500 border-transparent hover:border-slate-300 dark:text-slate-300 dark:hover:border-slate-700'
+					"
+					class="block py-3 font-medium border-b-2"
+					@click.prevent="selectCategory(category.slug)"
+					>{{ category.name }}</a
+				>
 			</li>
 		</ul>
 
@@ -17,28 +27,63 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
 import { useApiStore } from '@api/store.ts';
 import { debugError } from '@api/http-error.ts';
+import { onMounted, reactive, ref, watch } from 'vue';
 import ArticleItemPartial from '@partials/ArticleItemPartial.vue';
-import type { PostResponse, PostsCollectionResponse } from '@api/response/posts-response.ts';
+import type { PostResponse, PostsCollectionResponse, PostsFilters } from '@api/response/posts-response.ts';
 import { CategoriesCollectionResponse, CategoryResponse } from '@api/response/categories-response.ts';
 
 const apiStore = useApiStore();
-
-const collection = ref<PostsCollectionResponse>();
 const items = ref<PostResponse[]>([]);
 
 const categoriesCollection = ref<CategoriesCollectionResponse>();
 const categories = ref<CategoryResponse[]>([]);
 
-onMounted(async () => {
+let debounceTimer: number;
+
+const filters = reactive<PostsFilters>({
+	category: '',
+});
+
+const fetchPosts = async () => {
 	try {
-		collection.value = await apiStore.getPosts();
-		items.value = collection.value.data as PostResponse[];
+		const collection: PostsCollectionResponse = await apiStore.getPosts(filters);
+		items.value = collection.data as PostResponse[];
+	} catch (error) {
+		debugError(error);
+	}
+};
 
+const selectCategory = (categorySlug: string) => {
+	filters.category = categorySlug;
+};
+
+//Watch for changes to the category and call fetchPosts with a debouncing
+watch(
+	() => filters.category,
+	(newCategory, oldCategory) => {
+		// Ensure it doesn't run on the initial load before a category is set
+		if (oldCategory) {
+			clearTimeout(debounceTimer);
+
+			debounceTimer = setTimeout(() => {
+				fetchPosts();
+			}, 500);
+		}
+	},
+);
+
+onMounted(async () => {
+	try {
 		categoriesCollection.value = await apiStore.getCategories();
 		categories.value = categoriesCollection.value.data as CategoryResponse[];
+
+		if (categories.value.length > 0) {
+			filters.category = categories.value[0].slug;
+
+			await fetchPosts();
+		}
 	} catch (error) {
 		debugError(error);
 	}
diff --git a/src/partials/AvatarPartial.vue b/src/partials/AvatarPartial.vue
index a1530f23..404c8079 100644
--- a/src/partials/AvatarPartial.vue
+++ b/src/partials/AvatarPartial.vue
@@ -1,5 +1,5 @@
 <template>
-	<img :class="className" :src="props.avatar" :alt="props.alt" />
+	<img :class="className" :src="props.avatar" :alt="props.alt" fetchpriority="high" aria-hidden="true" />
 </template>
 
 <script setup lang="ts">
diff --git a/src/stores/api/client.ts b/src/stores/api/client.ts
index 93f7794b..57725708 100644
--- a/src/stores/api/client.ts
+++ b/src/stores/api/client.ts
@@ -80,6 +80,23 @@ export class ApiClient {
 		return headers;
 	}
 
+	public async post<T>(url: string, data: object): Promise<T> {
+		const headers = this.createHeaders();
+		const fullUrl = new URL(url, this.basedURL);
+
+		const response = await fetch(fullUrl.href, {
+			method: 'POST',
+			headers: headers,
+			body: JSON.stringify(data),
+		});
+
+		if (!response.ok) {
+			throw new HttpError(response, await response.text());
+		}
+
+		return await response.json();
+	}
+
 	public async get<T>(url: string): Promise<T> {
 		const headers = this.createHeaders();
 		const fullUrl = new URL(url, this.basedURL);
diff --git a/src/stores/api/response/posts-response.ts b/src/stores/api/response/posts-response.ts
index efc07499..eec2f40f 100644
--- a/src/stores/api/response/posts-response.ts
+++ b/src/stores/api/response/posts-response.ts
@@ -44,3 +44,11 @@ export interface PostsTagResponse {
 	name: string;
 	description: string;
 }
+
+export interface PostsFilters {
+	text: ?string;
+	title: ?string;
+	author: ?string;
+	category: ?string;
+	tag: ?string;
+}
diff --git a/src/stores/api/store.ts b/src/stores/api/store.ts
index 2938ca2f..7c0ec8fa 100644
--- a/src/stores/api/store.ts
+++ b/src/stores/api/store.ts
@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 import { parseError } from '@api/http-error.ts';
 import { ProfileResponse } from '@api/response/profile-response.ts';
 import { ApiClient, ApiResponse, defaultCreds } from '@api/client.ts';
-import type { PostResponse, PostsCollectionResponse } from '@api/response/posts-response.ts';
+import type { PostResponse, PostsCollectionResponse, PostsFilters } from '@api/response/posts-response.ts';
 import { CategoriesCollectionResponse } from '@api/response/categories-response.ts';
 
 const STORE_KEY = 'api-client-store';
@@ -41,11 +41,11 @@ export const useApiStore = defineStore(STORE_KEY, {
 				return parseError(error);
 			}
 		},
-		async getPosts(): Promise<PostsCollectionResponse> {
+		async getPosts(filters: PostsFilters): Promise<PostsCollectionResponse> {
 			const url = 'posts?limit=5';
 
 			try {
-				return await this.client.get<PostsCollectionResponse>(url);
+				return await this.client.post<PostsCollectionResponse>(url, filters);
 			} catch (error) {
 				return parseError(error);
 			}

From dc1cb693183ea5a7322004b97c446c4c38ef179b Mon Sep 17 00:00:00 2001
From: Gustavo Ocanto <gustavoocanto@gmail.com>
Date: Tue, 29 Jul 2025 12:26:28 +0800
Subject: [PATCH 3/3] search + debounce

---
 package-lock.json                         | 13 +++++++
 package.json                              |  2 +
 src/partials/ArticlesListPartial.vue      | 32 +++++++++-------
 src/partials/HeaderPartial.vue            | 45 +++++++++++++++++++++--
 src/stores/api/response/posts-response.ts | 10 ++---
 src/stores/api/store.ts                   |  5 +++
 6 files changed, 85 insertions(+), 22 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9cab21e2..939159cc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
 			"dependencies": {
 				"dompurify": "^3.2.6",
 				"highlight.js": "^11.11.1",
+				"lodash": "^4.17.21",
 				"marked": "^16.0.0",
 				"pinia": "^3.0.2",
 				"vue": "^3.5.13",
@@ -20,6 +21,7 @@
 				"@eslint/js": "^9.25.1",
 				"@tailwindcss/forms": "^0.5.10",
 				"@tailwindcss/vite": "^4.1.4",
+				"@types/lodash": "^4.17.20",
 				"@types/node": "^22.14.1",
 				"@typescript-eslint/eslint-plugin": "^8.38.0",
 				"@typescript-eslint/parser": "^8.38.0",
@@ -1610,6 +1612,12 @@
 			"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
 			"dev": true
 		},
+		"node_modules/@types/lodash": {
+			"version": "4.17.20",
+			"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.20.tgz",
+			"integrity": "sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA==",
+			"dev": true
+		},
 		"node_modules/@types/node": {
 			"version": "22.16.5",
 			"resolved": "https://registry.npmjs.org/@types/node/-/node-22.16.5.tgz",
@@ -3304,6 +3312,11 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/lodash": {
+			"version": "4.17.21",
+			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+			"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+		},
 		"node_modules/lodash.merge": {
 			"version": "4.6.2",
 			"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
diff --git a/package.json b/package.json
index bfd4f6dc..4e2bfd91 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
 	"dependencies": {
 		"dompurify": "^3.2.6",
 		"highlight.js": "^11.11.1",
+		"lodash": "^4.17.21",
 		"marked": "^16.0.0",
 		"pinia": "^3.0.2",
 		"vue": "^3.5.13",
@@ -23,6 +24,7 @@
 		"@eslint/js": "^9.25.1",
 		"@tailwindcss/forms": "^0.5.10",
 		"@tailwindcss/vite": "^4.1.4",
+		"@types/lodash": "^4.17.20",
 		"@types/node": "^22.14.1",
 		"@typescript-eslint/eslint-plugin": "^8.38.0",
 		"@typescript-eslint/parser": "^8.38.0",
diff --git a/src/partials/ArticlesListPartial.vue b/src/partials/ArticlesListPartial.vue
index 6a60f9fc..84baac5e 100644
--- a/src/partials/ArticlesListPartial.vue
+++ b/src/partials/ArticlesListPartial.vue
@@ -27,6 +27,7 @@
 </template>
 
 <script setup lang="ts">
+import debounce from 'lodash/debounce';
 import { useApiStore } from '@api/store.ts';
 import { debugError } from '@api/http-error.ts';
 import { onMounted, reactive, ref, watch } from 'vue';
@@ -40,40 +41,43 @@ const items = ref<PostResponse[]>([]);
 const categoriesCollection = ref<CategoriesCollectionResponse>();
 const categories = ref<CategoryResponse[]>([]);
 
-let debounceTimer: number;
+const selectCategory = (categorySlug: string) => {
+	filters.category = categorySlug;
+};
 
 const filters = reactive<PostsFilters>({
 	category: '',
+	text: '',
 });
 
 const fetchPosts = async () => {
 	try {
 		const collection: PostsCollectionResponse = await apiStore.getPosts(filters);
+
 		items.value = collection.data as PostResponse[];
 	} catch (error) {
 		debugError(error);
 	}
 };
 
-const selectCategory = (categorySlug: string) => {
-	filters.category = categorySlug;
-};
-
-//Watch for changes to the category and call fetchPosts with a debouncing
+// --- Categories' Filter:
 watch(
 	() => filters.category,
-	(newCategory, oldCategory) => {
-		// Ensure it doesn't run on the initial load before a category is set
-		if (oldCategory) {
-			clearTimeout(debounceTimer);
+	debounce(() => {
+		fetchPosts();
+	}, 500),
+);
 
-			debounceTimer = setTimeout(() => {
-				fetchPosts();
-			}, 500);
-		}
+// --- Search: filter post by the given search criteria.
+watch(
+	() => apiStore.searchTerm,
+	(newSearchTerm: string): void => {
+		filters.text = newSearchTerm.trim();
+		fetchPosts();
 	},
 );
 
+// --- Mount the Vue component
 onMounted(async () => {
 	try {
 		categoriesCollection.value = await apiStore.getCategories();
diff --git a/src/partials/HeaderPartial.vue b/src/partials/HeaderPartial.vue
index 69715d1c..63099428 100644
--- a/src/partials/HeaderPartial.vue
+++ b/src/partials/HeaderPartial.vue
@@ -3,14 +3,17 @@
 		<div class="flex items-center justify-between h-16 before:block">
 			<div class="grow flex justify-end space-x-4">
 				<!-- Search form -->
-				<form class="w-full max-w-[276px]">
+				<form class="w-full max-w-[276px]" @submit.prevent="performSearch">
 					<div class="flex flex-wrap">
 						<div class="w-full">
 							<label class="block text-sm sr-only" for="search">Search</label>
 							<div class="relative flex items-center">
-								<input id="search" type="search" class="form-input py-1 w-full pl-10" />
+								<input id="search" v-model="searchQuery" type="search" class="form-input py-1 w-full pl-10" :class="{ 'border-red-500': validationError }" @keyup="onSearchInput" />
 								<div class="absolute inset-0 right-auto flex items-center justify-center">
-									<svg class="w-4 h-4 shrink-0 mx-3" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+									<svg v-if="validationError" class="w-4 h-4 shrink-0 mx-3" viewBox="0 0 16 16" title="Clear search" @click="clearSearchAndError">
+										<path class="stroke-current text-red-500 cursor-pointer" stroke-width="2" stroke-linecap="round" d="M4 4l8 8m0-8l-8 8" />
+									</svg>
+									<svg v-else class="w-4 h-4 shrink-0 mx-3" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
 										<path
 											class="blog-header-search-icon"
 											d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5zm8.707 12.293a.999.999 0 11-1.414 1.414L11.9 13.314a8.019 8.019 0 001.414-1.414l2.393 2.393z"
@@ -52,7 +55,43 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue';
+import debounce from 'lodash/debounce';
 import { useDarkMode } from '@/dark-mode.ts';
+import { useApiStore } from '@api/store.ts';
 
 const { toggleDarkMode } = useDarkMode();
+const apiStore = useApiStore();
+
+const searchQuery = ref('');
+const validationError = ref<string>('');
+
+const clearSearchAndError = () => {
+	onSearchInput.cancel();
+	searchQuery.value = '';
+	performSearch();
+};
+
+const onSearchInput = debounce(() => {
+	performSearch();
+}, 500);
+
+const performSearch = () => {
+	validationError.value = '';
+	const query = searchQuery.value.trim();
+
+	if (query === '') {
+		apiStore.setSearchTerm(query);
+
+		return;
+	}
+
+	if (query.length < 5) {
+		validationError.value = 'Search term must be at least 5 characters.';
+
+		return;
+	}
+
+	apiStore.setSearchTerm(query);
+};
 </script>
diff --git a/src/stores/api/response/posts-response.ts b/src/stores/api/response/posts-response.ts
index eec2f40f..e04a6d26 100644
--- a/src/stores/api/response/posts-response.ts
+++ b/src/stores/api/response/posts-response.ts
@@ -46,9 +46,9 @@ export interface PostsTagResponse {
 }
 
 export interface PostsFilters {
-	text: ?string;
-	title: ?string;
-	author: ?string;
-	category: ?string;
-	tag: ?string;
+	text?: string;
+	title?: string;
+	author?: string;
+	category?: string;
+	tag?: string;
 }
diff --git a/src/stores/api/store.ts b/src/stores/api/store.ts
index 7c0ec8fa..f7e2e9ad 100644
--- a/src/stores/api/store.ts
+++ b/src/stores/api/store.ts
@@ -9,6 +9,7 @@ const STORE_KEY = 'api-client-store';
 
 export interface ApiStoreState {
 	client: ApiClient;
+	searchTerm: string;
 }
 
 const client = new ApiClient(defaultCreds);
@@ -16,8 +17,12 @@ const client = new ApiClient(defaultCreds);
 export const useApiStore = defineStore(STORE_KEY, {
 	state: (): ApiStoreState => ({
 		client: client,
+		searchTerm: '',
 	}),
 	actions: {
+		setSearchTerm(term: string): void {
+			this.searchTerm = term;
+		},
 		boot(): void {
 			if (this.client.isDev()) {
 				console.log('API client booted ...');