lbry-desktop/src/renderer/component/recommendedContent/view.jsx

69 lines
1.5 KiB
React
Raw Normal View History

// @flow
import React from 'react';
import FileTile from 'component/fileTile';
import type { Claim } from 'types/claim';
type Props = {
uri: string,
2018-08-03 20:28:11 +02:00
claim: ?Claim,
recommendedContent: Array<string>,
search: string => void,
};
2018-08-14 05:52:09 +02:00
export default class RecommendedContent extends React.PureComponent<Props> {
2018-08-03 20:28:11 +02:00
constructor() {
super();
2018-08-09 18:41:14 +02:00
this.didSearch = undefined;
2018-08-03 20:28:11 +02:00
}
componentDidMount() {
2018-08-03 20:28:11 +02:00
this.getRecommendedContent();
}
2018-08-03 20:28:11 +02:00
componentDidUpdate(prevProps: Props) {
const { claim, uri } = this.props;
2018-08-03 20:28:11 +02:00
if (uri !== prevProps.uri) {
2018-08-09 18:41:14 +02:00
this.didSearch = false;
2018-08-03 20:28:11 +02:00
}
2018-08-09 18:41:14 +02:00
if (claim && !this.didSearch) {
2018-08-03 20:28:11 +02:00
this.getRecommendedContent();
}
}
2018-08-03 20:28:11 +02:00
getRecommendedContent() {
const { claim, search } = this.props;
2018-08-03 20:28:11 +02:00
if (claim && claim.value && claim.value.stream && claim.value.stream.metadata) {
2018-08-14 05:52:09 +02:00
const { title } = claim.value.stream.metadata;
2018-08-03 20:28:11 +02:00
search(title);
2018-08-09 18:41:14 +02:00
this.didSearch = true;
}
2018-08-03 20:28:11 +02:00
}
2018-08-09 18:41:14 +02:00
didSearch: ?boolean;
2018-08-03 20:28:11 +02:00
render() {
const { recommendedContent } = this.props;
return (
2018-07-25 20:21:41 +02:00
<section className="card__list--recommended">
<span>Related</span>
{recommendedContent &&
2018-08-03 20:28:11 +02:00
recommendedContent.length &&
recommendedContent.map(recommendedUri => (
<FileTile
2018-08-14 05:52:09 +02:00
size="small"
2018-08-03 20:28:11 +02:00
hideNoResult
displayDescription={false}
2018-08-03 20:28:11 +02:00
key={recommendedUri}
uri={recommendedUri}
/>
))}
2018-07-25 20:21:41 +02:00
</section>
);
}
}