add back tags search
This commit is contained in:
parent
bf24bd3193
commit
a23f0cb30f
2 changed files with 42 additions and 6 deletions
|
@ -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} />
|
||||||
))}
|
))}
|
||||||
<ComboboxOption value={term} className="wunderbar__more-results">
|
|
||||||
<Button button="link" label={__('View All Results')} />
|
<div className="wunderbar__bottom-links">
|
||||||
</ComboboxOption>
|
<ComboboxOption value={term} className="wunderbar__more-results">
|
||||||
|
<Button button="link" label={__('View All Results')} />
|
||||||
|
</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>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in a new issue