Merge pull request #1267 from daovist/explore-channels

Support channel definitions from /file/list_homepage

src/renderer/component/categoryList/index.js

@@ -0,0 +1,18 @@
+import { connect } from 'react-redux';
+import { doFetchClaimsByChannel } from 'redux/actions/content';
+import {
+  makeSelectClaimsInChannelForCurrentPage,
+  makeSelectFetchingChannelClaims,
+} from 'lbry-redux';
+import CategoryList from './view';
+
+const select = (state, props) => ({
+  channelClaims: makeSelectClaimsInChannelForCurrentPage(props.categoryLink)(state),
+  fetching: makeSelectFetchingChannelClaims(props.categoryLink)(state),
+});
+
+const perform = dispatch => ({
+  fetchChannel: channel => dispatch(doFetchClaimsByChannel(channel)),
+});
+
+export default connect(select, perform)(CategoryList);

src/renderer/component/categoryList/view.jsx

@@ -5,11 +5,15 @@ import ToolTip from 'component/common/tooltip';
 import FileCard from 'component/fileCard';
 import Button from 'component/button';
 import * as icons from 'constants/icons';
+import Claim from 'types/claim';
 
 type Props = {
   category: string,
   names: Array<string>,
-  categoryLink?: string,
+  categoryLink: ?string,
+  fetching: boolean,
+  channelClaims: Array<Claim>,
+  fetchChannel: string => void,
 };
 
 type State = {
@@ -18,6 +22,11 @@ type State = {
 };
 
 class CategoryList extends React.PureComponent<Props, State> {
+  static defaultProps = {
+    names: [],
+    categoryLink: '',
+  };
+
   constructor() {
     super();
 
@@ -32,6 +41,11 @@ class CategoryList extends React.PureComponent<Props, State> {
   }
 
   componentDidMount() {
+    const { fetching, categoryLink, fetchChannel } = this.props;
+    if (!fetching) {
+      fetchChannel(categoryLink);
+    }
+
     const cardRow = this.rowItems;
     if (cardRow) {
       const cards = cardRow.getElementsByTagName('section');
@@ -109,6 +123,9 @@ class CategoryList extends React.PureComponent<Props, State> {
 
   // check if a card is fully visible horizontally
   isCardVisible = (section: HTMLElement) => {
+    if (!section) {
+      return false;
+    }
     const rect = section.getBoundingClientRect();
     const isVisible = rect.left >= 0 && rect.right <= window.innerWidth;
     return isVisible;
@@ -189,7 +206,7 @@ class CategoryList extends React.PureComponent<Props, State> {
   }
 
   render() {
-    const { category, names, categoryLink } = this.props;
+    const { category, categoryLink, names, channelClaims } = this.props;
     const { canScrollNext, canScrollPrevious } = this.state;
 
     // The lint was throwing an error saying we should use <button> instead of <a>
@@ -235,6 +252,12 @@ class CategoryList extends React.PureComponent<Props, State> {
           className="card-row__scrollhouse"
         >
           {names && names.map(name => <FileCard key={name} uri={normalizeURI(name)} />)}
+
+          {channelClaims && channelClaims.length
+            ? channelClaims.map(claim => (
+                <FileCard key={claim.claim_id} uri={`lbry://${claim.name}#${claim.claim_id}`} />
+              ))
+            : null}
         </div>
       </div>
     );

src/renderer/page/discover/view.jsx

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import Page from 'component/page';
-import CategoryList from 'component/common/category-list';
+import CategoryList from 'component/categoryList';
 
 type Props = {
   fetchFeaturedUris: () => void,
@@ -27,7 +27,11 @@ class DiscoverPage extends React.PureComponent<Props> {
               featuredUris[category].length ? (
                 <CategoryList key={category} category={category} names={featuredUris[category]} />
               ) : (
-                ''
+                <CategoryList
+                  key={category}
+                  category={category.split('#')[0]}
+                  categoryLink={category}
+                />
               )
           )}
         {failedToLoad && <div className="empty">{__('Failed to load landing content.')}</div>}

src/renderer/redux/actions/content.js

@@ -42,10 +42,10 @@ export function doFetchFeaturedUris() {
     });
 
     const success = ({ Uris }) => {
-      let urisToResolve = [];
+      const urisToResolve = Object.keys(Uris).reduce(
-      Object.keys(Uris).forEach(category => {
+        (resolve, category) => [...resolve, ...Uris[category]],
-        urisToResolve = [...urisToResolve, ...Uris[category]];
+        []
-      });
+      );
 
       const actions = [
         doResolveUris(urisToResolve),