lbry-desktop/ui/component/wunderbarTopSuggestion/view.jsx
Sean Yesmunt 4e0e1e2f2b cleanup
2020-12-03 16:18:04 -05:00

55 lines
1.4 KiB
JavaScript

// @flow
import React from 'react';
import LbcSymbol from 'component/common/lbc-symbol';
import WunderbarSuggestion from 'component/wunderbarSuggestion';
type Props = {
winningUri: ?string,
doResolveUris: (Array<string>) => void,
uris: Array<string>,
resolvingUris: boolean,
};
export default function WunderbarTopSuggestion(props: Props) {
const { uris, resolvingUris, winningUri, doResolveUris } = props;
const stringifiedUris = JSON.stringify(uris);
React.useEffect(() => {
if (stringifiedUris) {
const arrayUris = JSON.parse(stringifiedUris);
if (arrayUris.length > 0) {
doResolveUris(arrayUris);
}
}
}, [doResolveUris, stringifiedUris]);
if (resolvingUris) {
return (
<div className="wunderbar__winning-claim">
<div className="wunderbar__label wunderbar__placeholder-label" />
<div className="wunderbar__suggestion wunderbar__placeholder-suggestion">
<div className="wunderbar__placeholder-thumbnail" />
<div className="wunderbar__placeholder-info" />
</div>
<hr className="wunderbar__top-separator" />
</div>
);
}
if (!winningUri) {
return null;
}
return (
<>
<div className="wunderbar__label">
<LbcSymbol prefix={__('Most Supported')} />
</div>
<WunderbarSuggestion uri={winningUri} />
<hr className="wunderbar__top-separator" />
</>
);
}