diff --git a/package.json b/package.json index 5e1c9ef..fcaa6d9 100644 --- a/package.json +++ b/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", diff --git a/src/components/ArticlesList/ArticlesList.tsx b/src/components/ArticlesList/ArticlesList.tsx index ed10451..1df8d84 100644 --- a/src/components/ArticlesList/ArticlesList.tsx +++ b/src/components/ArticlesList/ArticlesList.tsx @@ -27,13 +27,12 @@ const ArticlesList: Component = (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); } diff --git a/src/components/SearchInput/SearchInput.tsx b/src/components/SearchInput/SearchInput.tsx index d677a1d..80f465f 100644 --- a/src/components/SearchInput/SearchInput.tsx +++ b/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 = (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 = (e) => { const value = e.currentTarget.value; @@ -30,18 +32,17 @@ const SearchInput: Component = (props) => { return; } - setSearch(e.currentTarget.value); + const url = utils.setParamToUrl('search', value); - const url = utils.setParamToUrl('search', search()); - - utils.extendHistoryState({ search: search() }, `${window.location.pathname}?${url}`); + history.replaceState(null, '', `${location.pathname}?${url}`); + setSearch(value); }; /** * 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 = (props) => { } setSearch(param); - - utils.extendHistoryState({ search: param }); }); return ( diff --git a/src/components/TagsList/TagsList.tsx b/src/components/TagsList/TagsList.tsx index d62aec5..472a5b3 100644 --- a/src/components/TagsList/TagsList.tsx +++ b/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 * as utils from '@root/utils/history'; +import { selectedTags, setSelectedTags } from '@stores/searchStore'; +import * as utils from '@utils/history'; type TagsListProps = { data: string[]; @@ -18,7 +18,7 @@ const TagsList: Component = (props) => { const url = utils.deleteParamFromUrl('tags'); setSelectedTags([]); - utils.extendHistoryState({ tags: [] }, url); + history.replaceState(null, '', url); }; const onSelect: JSX.EventHandler = (e) => { @@ -37,8 +37,8 @@ const TagsList: Component = (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 = (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 = (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 ( diff --git a/src/utils/articles.ts b/src/utils/articles.ts index 7cae199..c96bfb4 100644 --- a/src/utils/articles.ts +++ b/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); };