bubble/yarkov.tech
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/yarkov.tech.git synced 2026-10-11 10:29:21 +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", "start": "astro dev",
"build": "astro build", "build": "astro build",
"preview": "astro preview --host", "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": { "devDependencies": {
"@astrojs/solid-js": "^0.4.1", "@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; const isEmpty = () => Object.keys(articles()).length === 0;
createEffect(() => { createEffect(() => {
const { state } = window.history;
let filtered = props.data; let filtered = props.data;
/** /**
* Find articles by title * Find articles by title
*/ */
if (state.search || search()) { if (search()) {
filtered = utils.findArticlesBySearch(search(), filtered); filtered = utils.findArticlesBySearch(search(), filtered);
setArticles(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 { createEffect } from 'solid-js';
import { search, setSearch } from '@stores/searchStore'; import { search, setSearch } from '@stores/searchStore';
import * as utils from '@root/utils/history'; import * as utils from '@utils/history';
import './SearchInput.scss'; import './SearchInput.scss';
type SearchInputProps = { type SearchInputProps = {
@ -13,15 +12,18 @@ type SearchInputProps = {
const SearchInput: Component<SearchInputProps> = (props) => { 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 resetSearch = () => {
const url = utils.deleteParamFromUrl('search'); const url = utils.deleteParamFromUrl('search');
setSearch(''); setSearch('');
utils.extendHistoryState({ search: '' }, url); history.replaceState(null, '', url);
}; };
/**
* Update state and set url param
*/
const onSearch: JSX.EventHandler<HTMLInputElement, InputEvent> = (e) => { const onSearch: JSX.EventHandler<HTMLInputElement, InputEvent> = (e) => {
const value = e.currentTarget.value; const value = e.currentTarget.value;
@ -30,18 +32,17 @@ const SearchInput: Component<SearchInputProps> = (props) => {
return; 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. * Set the signal state by reading the `search` parameter from the URL.
*/ */
createEffect(() => { createEffect(() => {
const param = new URLSearchParams(window.location.search).get('search'); const param = new URLSearchParams(location.search).get('search');
if (!param) { if (!param) {
resetSearch(); resetSearch();
@ -49,8 +50,6 @@ const SearchInput: Component<SearchInputProps> = (props) => {
} }
setSearch(param); setSearch(param);
utils.extendHistoryState({ search: param });
}); });
return ( return (

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

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