wip

lbryio · Aug 2, 2018 · a71f320 · a71f320
1 parent 0110f17
commit a71f320
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 32 deletions.
diff --git a/src/renderer/component/recommendedContent/index.js b/src/renderer/component/recommendedContent/index.js
@@ -1,19 +1,21 @@
 import * as settings from 'constants/settings';
 import { connect } from 'react-redux';
 import { doFetchClaimsByChannel } from 'redux/actions/content';
-import { makeSelectClaimsInChannelForCurrentPage } from 'lbry-redux';
+import { makeSelectClaimForUri, doSearch, makeSelectRecommendedContentForUri } from 'lbry-redux';
 import { doSetClientSetting } from 'redux/actions/settings';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
 import RecommendedVideos from './view';
 
 const select = (state, props) => ({
-  claimsInChannel: makeSelectClaimsInChannelForCurrentPage(props.channelUri)(state),
+  claim: makeSelectClaimForUri(props.uri)(state),
+  recommendedContent: makeSelectRecommendedContentForUri(props.uri, props.channelUri)(state),
   autoplay: makeSelectClientSetting(settings.AUTOPLAY)(state),
 });
 
 const perform = dispatch => ({
   fetchClaims: (uri, page) => dispatch(doFetchClaimsByChannel(uri, page)),
   setAutoplay: value => dispatch(doSetClientSetting(settings.AUTOPLAY, value)),
+  search: query => dispatch(doSearch(query, 20)),
 });
 
 export default connect(

diff --git a/src/renderer/component/recommendedContent/view.jsx b/src/renderer/component/recommendedContent/view.jsx
@@ -4,47 +4,65 @@ import FileTile from 'component/fileTile';
 import { FormRow, FormField } from 'component/common/form';
 import ToolTip from 'component/common/tooltip';
 import type { Claim } from 'types/claim';
-import { buildURI, parseURI } from 'lbry-redux';
 
 type Props = {
   uri: string,
-  channelUri: ?string,
-  claimsInChannel: ?Array<Claim>,
+  claim: ?Claim,
   autoplay: boolean,
+  recommendedContent: Array<string>,
+  search: string => void,
   setAutoplay: boolean => void,
-  fetchClaims: (string, number) => void,
 };
 
-export default class RecommendedContent extends React.PureComponent<Props> {
+type State = {
+  didSearch: boolean,
+};
+
+export default class RecommendedContent extends React.PureComponent<Props, State> {
+  constructor() {
+    super();
+
+    this.state = {
+      didSearch: false,
+    };
+  }
+
   componentDidMount() {
-    const { channelUri, fetchClaims, claimsInChannel } = this.props;
-    if (channelUri && !claimsInChannel) {
-      fetchClaims(channelUri, 1);
-    }
+    this.getRecommendedContent();
   }
 
-  render() {
-    const { claimsInChannel, autoplay, uri, setAutoplay } = this.props;
+  componentDidUpdate(prevProps: Props) {
+    const { claim, uri } = this.props;
+    const { didSearch } = this.state;
 
-    let recommendedContent;
-    if (claimsInChannel) {
-      recommendedContent = claimsInChannel.filter(claim => {
-        const { name, claim_id: claimId, channel_name: channelName, value } = claim;
-        const { isChannel } = parseURI(uri);
+    if (uri !== prevProps.uri) {
+      this.setState({ didSearch: false });
+    }
 
-        // The uri may include the channel name
-        const recommendedUri =
-          isChannel && value && value.publisherSignature
-            ? buildURI({
-                contentName: name,
-                claimName: channelName,
-                claimId: value.publisherSignature.certificateId,
-              })
-            : buildURI({ claimName: name, claimId });
+    if (claim && !didSearch) {
+      this.getRecommendedContent();
+    }
+  }
+
+  getRecommendedContent() {
+    const { claim, search } = this.props;
+
+    if (claim && claim.value && claim.value.stream && claim.value.stream.metadata) {
+      const {
+        value: {
+          stream: {
+            metadata: { title },
+          },
+        },
+      } = claim;
 
-        return recommendedUri !== uri;
-      });
+      search(title);
+      this.setState({ didSearch: true });
     }
+  }
+
+  render() {
+    const { autoplay, setAutoplay, recommendedContent } = this.props;
 
     return (
       <section className="card__list--recommended">
@@ -62,12 +80,13 @@ export default class RecommendedContent extends React.PureComponent<Props> {
           </ToolTip>
         </FormRow>
         {recommendedContent &&
-          recommendedContent.map(({ permanent_url: permanentUrl }) => (
+          recommendedContent.map(recommendedUri => (
             <FileTile
               small
+              hideNoResult
               displayDescription={false}
-              key={permanentUrl}
-              uri={`lbry://${permanentUrl}`}
+              key={recommendedUri}
+              recommendedUri={recommendedUri}
             />
           ))}
       </section>