lbry-desktop/ui/component/recommendedContent/view.jsx
2020-08-03 16:16:04 -04:00

90 lines
2.1 KiB
JavaScript

// @flow
import { SHOW_ADS } from 'config';
import React from 'react';
import ClaimList from 'component/claimList';
import Ads from 'web/component/ads';
import Card from 'component/common/card';
import WaitUntilOnPage from 'component/common/wait-until-on-page';
type Options = {
related_to: string,
nsfw?: boolean,
};
type Props = {
uri: string,
claim: ?StreamClaim,
recommendedContent: Array<string>,
isSearching: boolean,
search: (string, Options) => void,
mature: boolean,
isAuthenticated: boolean,
};
export default class RecommendedContent extends React.PureComponent<Props> {
constructor() {
super();
this.didSearch = undefined;
this.lastReset = undefined;
}
componentDidMount() {
this.getRecommendedContent();
}
componentDidUpdate(prevProps: Props) {
const { claim, uri } = this.props;
if (uri !== prevProps.uri) {
this.didSearch = false;
this.lastReset = Date.now();
}
if (claim && !this.didSearch) {
this.getRecommendedContent();
}
}
getRecommendedContent() {
const { claim, search, mature } = this.props;
if (claim && claim.value && claim.claim_id) {
const options: Options = { size: 20, related_to: claim.claim_id, isBackgroundSearch: true };
if (claim && !mature) {
options['nsfw'] = false;
}
const { title } = claim.value;
if (title && options) {
search(title, options);
this.didSearch = true;
}
}
}
didSearch: ?boolean;
lastReset: ?any;
render() {
const { recommendedContent, isSearching, isAuthenticated } = this.props;
return (
<Card
isBodyList
title={__('Related')}
body={
<WaitUntilOnPage lastUpdateDate={this.lastReset}>
<ClaimList
isCardBody
type="small"
loading={isSearching}
uris={recommendedContent}
injectedItem={SHOW_ADS && !isAuthenticated && IS_WEB && <Ads type="video" small />}
empty={__('No related content found')}
/>
</WaitUntilOnPage>
}
/>
);
}
}