add back tags search

This commit is contained in:
Sean Yesmunt 2021-04-13 00:30:39 -04:00
parent bf24bd3193
commit a23f0cb30f
2 changed files with 42 additions and 6 deletions

View file

@ -1,4 +1,5 @@
// @flow // @flow
import type { ElementRef } from 'react';
import { URL, URL_LOCAL, URL_DEV, KNOWN_APP_DOMAINS } from 'config'; import { URL, URL_LOCAL, URL_DEV, KNOWN_APP_DOMAINS } from 'config';
import * as PAGES from 'constants/pages'; import * as PAGES from 'constants/pages';
import * as ICONS from 'constants/icons'; import * as ICONS from 'constants/icons';
@ -17,7 +18,6 @@ import { useHistory } from 'react-router';
import { formatLbryUrlForWeb } from 'util/url'; import { formatLbryUrlForWeb } from 'util/url';
import useThrottle from 'effects/use-throttle'; import useThrottle from 'effects/use-throttle';
import Yrbl from 'component/yrbl'; import Yrbl from 'component/yrbl';
import type { ElementRef } from 'react';
const LBRY_PROTOCOL = 'lbry://'; const LBRY_PROTOCOL = 'lbry://';
const WEB_DEV_PREFIX = `${URL_DEV}/`; const WEB_DEV_PREFIX = `${URL_DEV}/`;
@ -25,6 +25,7 @@ const WEB_LOCAL_PREFIX = `${URL_LOCAL}/`;
const WEB_PROD_PREFIX = `${URL}/`; const WEB_PROD_PREFIX = `${URL}/`;
const SEARCH_PREFIX = `$/${PAGES.SEARCH}q=`; const SEARCH_PREFIX = `$/${PAGES.SEARCH}q=`;
const INVALID_URL_ERROR = "Invalid LBRY URL entered. Only A-Z, a-z, 0-9, and '-' allowed."; const INVALID_URL_ERROR = "Invalid LBRY URL entered. Only A-Z, a-z, 0-9, and '-' allowed.";
const TAG_SEARCH_PREFIX = 'tag:';
const L_KEY_CODE = 76; const L_KEY_CODE = 76;
const ESC_KEY_CODE = 27; const ESC_KEY_CODE = 27;
@ -109,7 +110,10 @@ export default function WunderBarSuggestions(props: Props) {
} }
} }
if (!isLbryUrl) { if (value.startsWith(TAG_SEARCH_PREFIX)) {
const tag = value.slice(TAG_SEARCH_PREFIX.length);
push(`/$/${PAGES.DISCOVER}?t=${tag}`);
} else if (!isLbryUrl) {
navigateToSearchPage(value); navigateToSearchPage(value);
} else { } else {
let query = 'lbry://' + value.slice(LBRY_PROTOCOL.length).replace(/:/g, '#'); let query = 'lbry://' + value.slice(LBRY_PROTOCOL.length).replace(/:/g, '#');
@ -268,9 +272,18 @@ export default function WunderBarSuggestions(props: Props) {
{results.slice(0, isMobile ? 20 : 5).map((uri) => ( {results.slice(0, isMobile ? 20 : 5).map((uri) => (
<WunderbarSuggestion key={uri} uri={uri} /> <WunderbarSuggestion key={uri} uri={uri} />
))} ))}
<div className="wunderbar__bottom-links">
<ComboboxOption value={term} className="wunderbar__more-results"> <ComboboxOption value={term} className="wunderbar__more-results">
<Button button="link" label={__('View All Results')} /> <Button button="link" label={__('View All Results')} />
</ComboboxOption> </ComboboxOption>
<ComboboxOption value={`${TAG_SEARCH_PREFIX}${term}`} className="wunderbar__more-results">
<Button className="wunderbar__tag-search" button="link">
Explore
<div className="tag">{term.split(' ').join('')}</div>
</Button>
</ComboboxOption>
</div>
</ComboboxList> </ComboboxList>
</ComboboxPopover> </ComboboxPopover>
)} )}

View file

@ -192,7 +192,7 @@
} }
@media (min-width: $breakpoint-small) { @media (min-width: $breakpoint-small) {
margin-bottom: var(--spacing-m); margin-bottom: var(--spacing-xs);
} }
} }
@ -241,6 +241,29 @@
} }
} }
.wunderbar__tag-search {
.tag {
display: flex;
align-items: center;
height: 1.2rem;
margin-left: var(--spacing-xxs);
&:hover {
background-color: var(--color-tag-bg);
color: var(--color-tag);
}
}
}
.wunderbar__bottom-links {
display: flex;
align-items: center;
:first-child {
flex: 1;
}
}
[data-reach-combobox-option] { [data-reach-combobox-option] {
padding: 0; padding: 0;
border-radius: var(--border-radius); border-radius: var(--border-radius);