lbry-desktop/ui/js/page/discover/view.jsx
2017-05-03 23:44:08 -04:00

103 lines
No EOL
3.2 KiB
JavaScript

import React from 'react';
import lbryio from 'lbryio.js';
import FileTile from 'component/fileTile';
import { FileTileStream } from 'component/fileTileStream'
import {ToolTip} from 'component/tooltip.js';
const communityCategoryToolTipText = ('Community Content is a public space where anyone can share content with the ' +
'rest of the LBRY community. Bid on the names "one," "two," "three," "four" and ' +
'"five" to put your content here!');
const FeaturedCategory = (props) => {
const {
category,
names,
} = props
return <div className="card-row card-row--small">
<h3 className="card-row__header">{category}
{category && category.match(/^community/i) && <ToolTip label="What's this?" body={communityCategoryToolTipText} className="tooltip--header" />}
</h3>
{names && names.map(name => <FileTile key={name} displayStyle="card" uri={lbryuri.normalize(name)} />)}
</div>
}
const DiscoverPage = (props) => {
const {
featuredUris
} = props
return <main>{
Object.keys(featuredUris).length === 0 ?
<div className="empty">Failed to load landing content.</div> :
<div>
{
Object.keys(featuredUris).map((category) => {
return featuredUris[category].length ?
<FeaturedCategory key={category} category={category} names={featuredUris[category]} /> :
'';
})
}
</div>
}</main>
}
//
// let DiscoverPage = React.createClass({
// getInitialState: function() {
// return {
// featuredUris: {},
// failed: false
// };
// },
// componentWillMount: function() {
// lbryio.call('discover', 'list', { version: "early-access" } ).then(({Categories, Uris}) => {
// let featuredUris = {}
// Categories.forEach((category) => {
// if (Uris[category] && Uris[category].length) {
// featuredUris[category] = Uris[category]
// }
// })
// this.setState({ featuredUris: featuredUris });
// }, () => {
// this.setState({
// failed: true
// })
// });
// },
// render: function() {
// return <main>{
// this.state.failed ?
// <div className="empty">Failed to load landing content.</div> :
// <div>
// {
// Object.keys(this.state.featuredUris).map((category) => {
// return this.state.featuredUris[category].length ?
// <FeaturedCategory key={category} category={category} names={this.state.featuredUris[category]} /> :
// '';
// })
// }
// </div>
// }</main>;
// }
// })
// const DiscoverPage = (props) => {
// const {
// isSearching,
// query,
// results,
// searchActive,
// } = props
//
// return (
// <main>
// { (!searchActive || (!isSearching && !query)) && <FeaturedContent {...props} /> }
// { searchActive && isSearching ? <SearchActive /> : null }
// { searchActive && !isSearching && query && results.length ? <SearchResults results={results} /> : null }
// { searchActive && !isSearching && query && !results.length ? <SearchNoResults query={query} /> : null }
// </main>
// );
// }
export default DiscoverPage;