LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

WunderBar customizations for re-use

Browse source
This commit is contained in:
infinite-persistence 2021-06-03 10:59:01 +08:00 committed by jessopb
parent d36c8748e3
commit 510056a479
3 changed files with 63 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
ui/component/wunderbar/view.jsx
View file

@ -7,15 +7,24 @@ import WunderbarSuggestions from 'component/wunderbarSuggestions';
type Props = {
doOpenMobileSearch: () => void,
channelsOnly?: boolean,
noTopSuggestion?: boolean,
noBottomLinks?: boolean,
customSelectAction?: (string) => void,
};
export default function WunderBar(props: Props) {
const { doOpenMobileSearch } = props;
const { doOpenMobileSearch, channelsOnly, noTopSuggestion, noBottomLinks, customSelectAction } = props;
const isMobile = useIsMobile();
return isMobile ? (
<Button icon={ICONS.SEARCH} className="wunderbar__mobile-search" onClick={() => doOpenMobileSearch()} />
) : (
<WunderbarSuggestions />
<WunderbarSuggestions
channelsOnly={channelsOnly}
noTopSuggestion={noTopSuggestion}
noBottomLinks={noBottomLinks}
customSelectAction={customSelectAction}
/>
);
}

55
ui/component/wunderbarSuggestions/view.jsx
View file

@ -18,6 +18,7 @@ import { useHistory } from 'react-router';
import { formatLbryUrlForWeb } from 'util/url';
import useThrottle from 'effects/use-throttle';
import Yrbl from 'component/yrbl';
import { SEARCH_OPTIONS } from 'constants/search';
const LBRY_PROTOCOL = 'lbry://';
const WEB_DEV_PREFIX = `${URL_DEV}/`;
@ -39,10 +40,25 @@ type Props = {
showMature: boolean,
isMobile: boolean,
doCloseMobileSearch: () => void,
channelsOnly?: boolean,
noTopSuggestion?: boolean,
noBottomLinks?: boolean,
customSelectAction?: (string) => void,
};
export default function WunderBarSuggestions(props: Props) {
const { navigateToSearchPage, doShowSnackBar, doResolveUris, showMature, isMobile, doCloseMobileSearch } = props;
const {
navigateToSearchPage,
doShowSnackBar,
doResolveUris,
showMature,
isMobile,
doCloseMobileSearch,
channelsOnly,
noTopSuggestion,
noBottomLinks,
customSelectAction,
} = props;
const inputRef: ElementRef<any> = React.useRef();
const isFocused = inputRef && inputRef.current && inputRef.current === document.activeElement;
@ -55,7 +71,10 @@ export default function WunderBarSuggestions(props: Props) {
const [term, setTerm] = React.useState(queryFromUrl);
const throttledTerm = useThrottle(term, 500) || '';
const searchSize = isMobile ? 20 : 5;
const { results, loading } = useLighthouse(throttledTerm, showMature, searchSize);
const additionalOptions = channelsOnly
? { isBackgroundSearch: false, [SEARCH_OPTIONS.CLAIM_TYPE]: SEARCH_OPTIONS.INCLUDE_CHANNELS }
: {};
const { results, loading } = useLighthouse(throttledTerm, showMature, searchSize, additionalOptions);
const noResults = throttledTerm && !loading && results && results.length === 0;
const nameFromQuery = throttledTerm.trim().replace(/\s+/g, '').replace(/:/g, '#');
const uriFromQuery = `lbry://${nameFromQuery}`;
@ -91,6 +110,12 @@ export default function WunderBarSuggestions(props: Props) {
inputRef.current.blur();
}
if (customSelectAction) {
// Give them full results, as our resolved one might truncate the claimId.
customSelectAction(results ? results.find((r) => r.startsWith(value)) : '');
return;
}
if (wasCopiedFromWeb) {
const prefix = webDomainList[webDomainIndex];
let query = value.slice(prefix.length).replace(/:/g, '#');
@ -266,24 +291,26 @@ export default function WunderBarSuggestions(props: Props) {
className={classnames('wunderbar__suggestions', { 'wunderbar__suggestions--mobile': isMobile })}
>
<ComboboxList>
{uriFromQueryIsValid ? <WunderbarTopSuggestion query={nameFromQuery} /> : null}
{uriFromQueryIsValid && !noTopSuggestion ? <WunderbarTopSuggestion query={nameFromQuery} /> : null}
<div className="wunderbar__label">{__('Search Results')}</div>
{results.slice(0, isMobile ? 20 : 5).map((uri) => (
<WunderbarSuggestion key={uri} uri={uri} />
))}
<div className="wunderbar__bottom-links">
<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>
{!noBottomLinks && (
<div className="wunderbar__bottom-links">
<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>
</ComboboxPopover>
)}

15
ui/effects/use-lighthouse.js
View file

@ -5,10 +5,15 @@ import { getSearchQueryString } from 'util/query-params';
import { isURIValid } from 'lbry-redux';
import useThrottle from './use-throttle';
export default function useLighthouse(query: string, showMature?: boolean, size?: number = 5) {
export default function useLighthouse(
query: string,
showMature?: boolean,
size?: number = 5,
additionalOptions: any = {}
) {
const [results, setResults] = React.useState();
const [loading, setLoading] = React.useState();
const queryString = query ? getSearchQueryString(query, { nsfw: showMature, size }) : '';
const queryString = query ? getSearchQueryString(query, { nsfw: showMature, size, ...additionalOptions }) : '';
const throttledQuery = useThrottle(queryString, 500);
React.useEffect(() => {
@ -19,9 +24,11 @@ export default function useLighthouse(query: string, showMature?: boolean, size?
let isSubscribed = true;
lighthouse
.search(throttledQuery)
.then(results => {
.then((results) => {
if (isSubscribed) {
setResults(results.map(result => `lbry://${result.name}#${result.claimId}`).filter(uri => isURIValid(uri)));
setResults(
results.map((result) => `lbry://${result.name}#${result.claimId}`).filter((uri) => isURIValid(uri))
);
setLoading(false);
}
})