This commit is contained in:
Sean Yesmunt 2020-12-03 16:06:54 -05:00
parent 0de87521b8
commit 4e0e1e2f2b
5 changed files with 10 additions and 24 deletions

View file

@ -168,7 +168,7 @@ export default function WunderBar(props: Props) {
<ComboboxList> <ComboboxList>
{uriFromQueryIsValid ? <WunderbarTopSuggestion query={nameFromQuery} /> : null} {uriFromQueryIsValid ? <WunderbarTopSuggestion query={nameFromQuery} /> : null}
<div className="wunderbar__label--results">{__('Search Results')}</div> <div className="wunderbar__label">{__('Search Results')}</div>
{results.slice(0, 5).map(uri => ( {results.slice(0, 5).map(uri => (
<WunderbarSuggestion key={uri} uri={uri} /> <WunderbarSuggestion key={uri} uri={uri} />
))} ))}

View file

@ -8,11 +8,10 @@ import ChannelThumbnail from 'component/channelThumbnail';
type Props = { type Props = {
claim: ?Claim, claim: ?Claim,
uri: string, uri: string,
noComboBox?: boolean,
}; };
export default function WunderbarSuggestion(props: Props) { export default function WunderbarSuggestion(props: Props) {
const { claim, uri, noComboBox = false } = props; const { claim, uri } = props;
if (!claim) { if (!claim) {
return null; return null;
@ -20,12 +19,8 @@ export default function WunderbarSuggestion(props: Props) {
const isChannel = claim.value_type === 'channel'; const isChannel = claim.value_type === 'channel';
const Wrapper = noComboBox
? (props: any) => <div>{props.children}</div>
: (props: any) => <ComboboxOption value={uri}>{props.children}</ComboboxOption>;
return ( return (
<Wrapper> <ComboboxOption value={uri}>
<div <div
className={classnames('wunderbar__suggestion', { className={classnames('wunderbar__suggestion', {
'wunderbar__suggestion--channel': isChannel, 'wunderbar__suggestion--channel': isChannel,
@ -39,6 +34,6 @@ export default function WunderbarSuggestion(props: Props) {
</div> </div>
</span> </span>
</div> </div>
</Wrapper> </ComboboxOption>
); );
} }

View file

@ -7,12 +7,11 @@ const select = (state, props) => {
const uriFromQuery = `lbry://${props.query}`; const uriFromQuery = `lbry://${props.query}`;
let uris = [uriFromQuery]; let uris = [uriFromQuery];
let channelUriFromQuery;
try { try {
const { isChannel } = parseURI(uriFromQuery); const { isChannel } = parseURI(uriFromQuery);
if (!isChannel) { if (!isChannel) {
channelUriFromQuery = `lbry://@${props.query}`; const channelUriFromQuery = `lbry://@${props.query}`;
uris.push(channelUriFromQuery); uris.push(channelUriFromQuery);
} }
} catch (e) {} } catch (e) {}

View file

@ -2,10 +2,8 @@
import React from 'react'; import React from 'react';
import LbcSymbol from 'component/common/lbc-symbol'; import LbcSymbol from 'component/common/lbc-symbol';
import WunderbarSuggestion from 'component/wunderbarSuggestion'; import WunderbarSuggestion from 'component/wunderbarSuggestion';
import { ComboboxOption } from '@reach/combobox';
type Props = { type Props = {
query: string,
winningUri: ?string, winningUri: ?string,
doResolveUris: (Array<string>) => void, doResolveUris: (Array<string>) => void,
uris: Array<string>, uris: Array<string>,
@ -13,7 +11,7 @@ type Props = {
}; };
export default function WunderbarTopSuggestion(props: Props) { export default function WunderbarTopSuggestion(props: Props) {
const { query, uris, resolvingUris, winningUri, doResolveUris } = props; const { uris, resolvingUris, winningUri, doResolveUris } = props;
const stringifiedUris = JSON.stringify(uris); const stringifiedUris = JSON.stringify(uris);
React.useEffect(() => { React.useEffect(() => {
@ -46,13 +44,11 @@ export default function WunderbarTopSuggestion(props: Props) {
return ( return (
<> <>
<ComboboxOption value={winningUri} className="wunderbar__winning-claim">
<div className="wunderbar__label"> <div className="wunderbar__label">
<LbcSymbol postfix={__('Winning for "%query%"', { query })} /> <LbcSymbol prefix={__('Most Supported')} />
</div> </div>
<WunderbarSuggestion uri={winningUri} noComboBox /> <WunderbarSuggestion uri={winningUri} />
</ComboboxOption>
<hr className="wunderbar__top-separator" /> <hr className="wunderbar__top-separator" />
</> </>
); );

View file

@ -98,10 +98,6 @@
.wunderbar__label { .wunderbar__label {
margin-bottom: var(--spacing-xs); margin-bottom: var(--spacing-xs);
}
.wunderbar__label--results {
@extend .wunderbar__label;
margin-left: var(--spacing-xs); margin-left: var(--spacing-xs);
} }