Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +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 [historyActive, setHistoryActive] = React.useState(true);
const searchInputRef = React.useRef(null);
const searchHistoryRef = React.useRef(null);
const searchBarOnClick = React.useCallback(() => {
if (!active) {
window.location = '#/search';
@ -28,17 +29,22 @@ const SearchBar = ({ className, query, active }) => {
}, [active]);
const queryInputOnChange = React.useCallback(() => {
setInputValue(searchInputRef.current.value);
setHistoryActive(true);
try {
createTorrentFromMagnet(searchInputRef.current.value);
// eslint-disable-next-line no-empty
} catch { }
}, []);
const queryInputOnSubmit = React.useCallback(() => {
const queryInputOnSubmit = React.useCallback((event) => {
if (searchInputRef.current !== null) {
const queryParams = new URLSearchParams([['search', searchInputRef.current.value]]);
window.location = `#/search?${queryParams.toString()}`;
setHistoryActive(false);
const searchValue = event.target.innerText ? event.target.innerText : searchInputRef.current.value;
if (searchValue) {
const queryParams = new URLSearchParams([['search', searchValue]]);
window.location = `#/search?${queryParams.toString()}`;
setInputValue(searchValue);
if (event.key === 'Enter') {
setHistoryActive(false);
}
}
}
}, []);
React.useEffect(() => {
@ -51,15 +57,17 @@ const SearchBar = ({ className, query, active }) => {
setInputValue('');
window.location = '#/search';
}, []);
const historyInputSearch = React.useCallback((event) => {
const queryParams = new URLSearchParams([['search', event.target.innerText]]);
window.location = `#/search?${queryParams.toString()}`;
setHistoryActive(false);
}, []);
const handleBlur = (event) => {
if (!searchHistoryRef?.current?.contains(event.relatedTarget)) {
setHistoryActive(false);
}
};
const handleClick = () => {
setHistoryActive((prev) => !prev);
};
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 ?
<TextInput
@ -72,6 +80,7 @@ const SearchBar = ({ className, query, active }) => {
tabIndex={-1}
onChange={queryInputOnChange}
onSubmit={queryInputOnSubmit}
onClick={handleClick}
/>
:
<div className={styles['search-input']}>
@ -84,13 +93,13 @@ const SearchBar = ({ className, query, active }) => {
<Icon className={styles['icon']} name={'close'} />
</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'} />
</Button>
}
{
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-label']}>{t('STREMIO_TV_SEARCH_HISTORY_TITLE')}</div>
<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']}>
{searchHistory.items.slice(0, 8).map((item, index) => {
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>

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

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