lbry-desktop/ui/component/wunderbarTopSuggestion/view.jsx

56 lines
1.4 KiB
React
Raw Normal View History

2020-12-03 18:29:47 +01:00
// @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,
2020-12-03 18:29:47 +01:00
};
export default function WunderbarTopSuggestion(props: Props) {
2020-12-03 22:06:54 +01:00
const { uris, resolvingUris, winningUri, doResolveUris } = props;
2020-12-03 18:29:47 +01:00
const stringifiedUris = JSON.stringify(uris);
2020-12-03 18:29:47 +01:00
React.useEffect(() => {
if (stringifiedUris) {
const arrayUris = JSON.parse(stringifiedUris);
2020-12-03 18:29:47 +01:00
if (arrayUris.length > 0) {
doResolveUris(arrayUris);
}
2020-12-03 18:29:47 +01:00
}
}, [doResolveUris, stringifiedUris]);
2020-12-03 18:29:47 +01:00
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>
);
}
2020-12-03 18:29:47 +01:00
if (!winningUri) {
return null;
}
return (
<>
2020-12-03 22:06:54 +01:00
<div className="wunderbar__label">
<LbcSymbol prefix={__('Most Supported')} />
</div>
2020-12-03 18:29:47 +01:00
2020-12-03 22:06:54 +01:00
<WunderbarSuggestion uri={winningUri} />
2020-12-03 18:29:47 +01:00
<hr className="wunderbar__top-separator" />
</>
);
}