bubble/yarkov.tech
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/yarkov.tech.git synced 2026-10-11 18:39:14 +03:00
Code Issues Packages Projects Releases Wiki Activity

refactor: refactored search

Browse Source
This commit is contained in:
Sergey Yarkov 2022-07-22 21:05:37 +03:00
parent 486e3fbc9e
commit 9b24143229
5 changed files with 27 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

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

3
src/components/ArticlesList/ArticlesList.tsx
View File

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

21
src/components/SearchInput/SearchInput.tsx
View File

@ -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());
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<SearchInputProps> = (props) => {
}
setSearch(param);
utils.extendHistoryState({ search: param });
});
return (

22
src/components/TagsList/TagsList.tsx
View File

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

2
src/utils/articles.ts
View File

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