Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-20 23:12:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor & feature: search history beta v2

Browse source
This commit is contained in:
kKaskak 2023-12-06 11:38:57 +02:00
parent b906cfdc41
commit c327412deb
2 changed files with 25 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js
View file

@ -21,6 +21,7 @@ const SearchBar = ({ className, query, active }) => {
const [inputValue, setInputValue] = React.useState(query || ''); const [inputValue, setInputValue] = React.useState(query || '');
const [historyActive, setHistoryActive] = React.useState(true); const [historyActive, setHistoryActive] = React.useState(true);
const searchInputRef = React.useRef(null); const searchInputRef = React.useRef(null);
const searchHistoryRef = React.useRef(null);
const searchBarOnClick = React.useCallback(() => { const searchBarOnClick = React.useCallback(() => {
if (!active) { if (!active) {
window.location = '#/search'; window.location = '#/search';
@ -28,17 +29,22 @@ const SearchBar = ({ className, query, active }) => {
}, [active]); }, [active]);
const queryInputOnChange = React.useCallback(() => { const queryInputOnChange = React.useCallback(() => {
setInputValue(searchInputRef.current.value); setInputValue(searchInputRef.current.value);
setHistoryActive(true);
try { try {
createTorrentFromMagnet(searchInputRef.current.value); createTorrentFromMagnet(searchInputRef.current.value);
// eslint-disable-next-line no-empty // eslint-disable-next-line no-empty
} catch { } } catch { }
}, []); }, []);
const queryInputOnSubmit = React.useCallback(() => { const queryInputOnSubmit = React.useCallback((event) => {
if (searchInputRef.current !== null) { if (searchInputRef.current !== null) {
const queryParams = new URLSearchParams([['search', searchInputRef.current.value]]); const searchValue = event.target.innerText ? event.target.innerText : searchInputRef.current.value;
window.location = `#/search?${queryParams.toString()}`; if (searchValue) {
setHistoryActive(false); const queryParams = new URLSearchParams([['search', searchValue]]);
window.location = `#/search?${queryParams.toString()}`;
setInputValue(searchValue);
if (event.key === 'Enter') {
setHistoryActive(false);
}
}
} }
}, []); }, []);
React.useEffect(() => { React.useEffect(() => {
@ -51,15 +57,17 @@ const SearchBar = ({ className, query, active }) => {
setInputValue(''); setInputValue('');
window.location = '#/search'; window.location = '#/search';
}, []); }, []);
const historyInputSearch = React.useCallback((event) => { const handleBlur = (event) => {
const queryParams = new URLSearchParams([['search', event.target.innerText]]); if (!searchHistoryRef?.current?.contains(event.relatedTarget)) {
window.location = `#/search?${queryParams.toString()}`; setHistoryActive(false);
setHistoryActive(false); }
};
}, []); const handleClick = () => {
setHistoryActive((prev) => !prev);
};
return ( return (
<label className={classnames(className, styles['search-bar-container'], { 'active': active })} onClick={searchBarOnClick}> <label className={classnames(className, styles['search-bar-container'], { 'active': active })} onClick={searchBarOnClick} onBlur={handleBlur}>
{ {
active ? active ?
<TextInput <TextInput
@ -72,6 +80,7 @@ const SearchBar = ({ className, query, active }) => {
tabIndex={-1} tabIndex={-1}
onChange={queryInputOnChange} onChange={queryInputOnChange}
onSubmit={queryInputOnSubmit} onSubmit={queryInputOnSubmit}
onClick={handleClick}
/> />
: :
<div className={styles['search-input']}> <div className={styles['search-input']}>
@ -84,13 +93,13 @@ const SearchBar = ({ className, query, active }) => {
<Icon className={styles['icon']} name={'close'} /> <Icon className={styles['icon']} name={'close'} />
</Button> </Button>
: :
<Button className={styles['submit-button-container']} tabIndex={-1} onClick={queryInputOnSubmit}> <Button className={styles['submit-button-container']} tabIndex={-1}>
<Icon className={styles['icon']} name={'search'} /> <Icon className={styles['icon']} name={'search'} />
</Button> </Button>
} }
{ {
searchHistory.items.length > 0 && historyActive && active ? searchHistory.items.length > 0 && historyActive && active ?
<div className={styles['search-history']}> <div className={styles['search-history']} onBlur={handleBlur} ref={searchHistoryRef}>
<div className={styles['search-history-actions']}> <div className={styles['search-history-actions']}>
<div className={styles['search-history-label']}>{t('STREMIO_TV_SEARCH_HISTORY_TITLE')}</div> <div className={styles['search-history-label']}>{t('STREMIO_TV_SEARCH_HISTORY_TITLE')}</div>
<button className={styles['search-history-clear']} onClick={() => searchHistory.clear()}>{t('CLEAR_HISTORY')}</button> <button className={styles['search-history-clear']} onClick={() => searchHistory.clear()}>{t('CLEAR_HISTORY')}</button>
@ -98,7 +107,7 @@ const SearchBar = ({ className, query, active }) => {
<div className={styles['search-history-items']}> <div className={styles['search-history-items']}>
{searchHistory.items.slice(0, 8).map((item, index) => { {searchHistory.items.slice(0, 8).map((item, index) => {
return ( return (
<button key={index} className={styles['search-history-item']} onClick={historyInputSearch}>{item}</button> <button key={index} className={styles['search-history-item']} onClick={queryInputOnSubmit}>{item}</button>
); );
})} })}
</div> </div>

3
src/common/NavBar/HorizontalNavBar/SearchBar/styles.less
View file

@ -90,8 +90,7 @@
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;
gap: 0.5rem 0
;
.search-history-item { .search-history-item {
color: var(--primary-foreground-color); color: var(--primary-foreground-color);
text-align: left; text-align: left;