refactor: refactored search

package.json

@@ -14,7 +14,8 @@
 		"start": "astro dev",
 		"build": "astro build",
 		"preview": "astro preview --host",
-		"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json}\""
+		"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json}\"",
+		"lint": "eslint '**/*.{js,mjs,ts,tsx}'"
 	},
 	"devDependencies": {
 		"@astrojs/solid-js": "^0.4.1",

src/components/ArticlesList/ArticlesList.tsx

@@ -27,13 +27,12 @@ const ArticlesList: Component<ArticlesListProps> = (props) => {
 	const isEmpty = () => Object.keys(articles()).length === 0;
 
 	createEffect(() => {
-		const { state } = window.history;
 		let filtered = props.data;
 
 		/**
 		 * Find articles by title
 		 */
-		if (state.search || search()) {
+		if (search()) {
 			filtered = utils.findArticlesBySearch(search(), filtered);
 			setArticles(filtered);
 		}

src/components/SearchInput/SearchInput.tsx

@@ -2,8 +2,7 @@ import type { Component, JSX } from 'solid-js';
 
 import { createEffect } from 'solid-js';
 import { search, setSearch } from '@stores/searchStore';
-import * as utils from '@root/utils/history';
+import * as utils from '@utils/history';
-
 import './SearchInput.scss';
 
 type SearchInputProps = {
@@ -13,15 +12,18 @@ type SearchInputProps = {
 
 const SearchInput: Component<SearchInputProps> = (props) => {
 	/**
-	 * Reset signal state and delete `search` param from url
+	 * Reset state and delete `search` param from url
 	 */
 	const resetSearch = () => {
 		const url = utils.deleteParamFromUrl('search');
 
 		setSearch('');
-		utils.extendHistoryState({ search: '' }, url);
+		history.replaceState(null, '', url);
 	};
 
+	/**
+	 * Update state and set url param
+	 */
 	const onSearch: JSX.EventHandler<HTMLInputElement, InputEvent> = (e) => {
 		const value = e.currentTarget.value;
 
@@ -30,18 +32,17 @@ const SearchInput: Component<SearchInputProps> = (props) => {
 			return;
 		}
 
-		setSearch(e.currentTarget.value);
+		const url = utils.setParamToUrl('search', value);
 
-		const url = utils.setParamToUrl('search', search());
+		history.replaceState(null, '', `${location.pathname}?${url}`);
-
+		setSearch(value);
-		utils.extendHistoryState({ search: search() }, `${window.location.pathname}?${url}`);
 	};
 
 	/**
 	 * Set the signal state by reading the `search` parameter from the URL.
 	 */
 	createEffect(() => {
-		const param = new URLSearchParams(window.location.search).get('search');
+		const param = new URLSearchParams(location.search).get('search');
 
 		if (!param) {
 			resetSearch();
@@ -49,8 +50,6 @@ const SearchInput: Component<SearchInputProps> = (props) => {
 		}
 
 		setSearch(param);
-
-		utils.extendHistoryState({ search: param });
 	});
 
 	return (

src/components/TagsList/TagsList.tsx

@@ -1,8 +1,8 @@
 import type { Component, JSX } from 'solid-js';
 
 import { For, createEffect } from 'solid-js';
-import { selectedTags, setSelectedTags } from '@root/stores/searchStore';
+import { selectedTags, setSelectedTags } from '@stores/searchStore';
-import * as utils from '@root/utils/history';
+import * as utils from '@utils/history';
 
 type TagsListProps = {
 	data: string[];
@@ -18,7 +18,7 @@ const TagsList: Component<TagsListProps> = (props) => {
 		const url = utils.deleteParamFromUrl('tags');
 
 		setSelectedTags([]);
-		utils.extendHistoryState({ tags: [] }, url);
+		history.replaceState(null, '', url);
 	};
 
 	const onSelect: JSX.EventHandler<HTMLLIElement, PointerEvent> = (e) => {
@@ -37,8 +37,8 @@ const TagsList: Component<TagsListProps> = (props) => {
 				return;
 			}
 
-			utils.extendHistoryState({ tags: updated }, `${window.location.pathname}?${url}`);
 			setSelectedTags(updated);
+			history.replaceState(null, '', `${location.pathname}?${url}`);
 			return;
 		}
 
@@ -49,18 +49,21 @@ const TagsList: Component<TagsListProps> = (props) => {
 		const url = utils.setParamToUrl('tags', updated.join(','));
 
 		setSelectedTags(updated);
-		utils.extendHistoryState({ tags: updated }, `${window.location.pathname}?${url}`);
+		history.replaceState(null, '', `${location.pathname}?${url}`);
 	};
 
 	createEffect(() => {
-		const param = new URLSearchParams(window.location.search).get('tags');
+		let param: string | string[] = new URLSearchParams(location.search).get('tags');
 
 		if (!param) {
 			resetSelected();
 			return;
 		}
 
-		if (param.split(',').length === 0) {
+		/* to array */
+		param = param.split(',');
+
+		if (param.length === 0) {
 			resetSelected();
 			return;
 		}
@@ -68,13 +71,14 @@ const TagsList: Component<TagsListProps> = (props) => {
 		const tags: string[] = [];
 
 		for (const tag of props.data) {
-			if (param.split(',').includes(tag.toLocaleLowerCase())) {
+			const isTagExist = param.includes(tag.toLocaleLowerCase());
+
+			if (isTagExist) {
 				tags.push(tag.toLocaleLowerCase());
 			}
 		}
 
 		setSelectedTags(tags);
-		utils.extendHistoryState({ tags });
 	});
 
 	return (

src/utils/articles.ts

@@ -31,7 +31,7 @@ export const filterArticlesByYear = (articles: ArticleType[]): { [year: number]:
 export const findArticlesBySearch = (search: string, articles: ArticleBlockType): ArticleBlockType => {
 	const filtered = Object.values(articles)
 		.flat()
-		.filter((article) => article.title.toLocaleLowerCase().includes(search));
+		.filter((article) => article.title.toLocaleLowerCase().includes(search.toLocaleLowerCase()));
 
 	return filterArticlesByYear(filtered);
 };