74 lines
1.9 KiB
JavaScript
74 lines
1.9 KiB
JavaScript
import React from 'react';
|
|
import lbryio from 'lbryio.js';
|
|
import lbryuri from 'lbryuri';
|
|
import FileCard from 'component/fileCard';
|
|
import { BusyMessage } from 'component/common.js';
|
|
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 =>
|
|
<FileCard
|
|
key={name}
|
|
displayStyle="card"
|
|
uri={lbryuri.normalize(name)}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
class DiscoverPage extends React.Component {
|
|
componentWillMount() {
|
|
this.props.fetchFeaturedUris();
|
|
}
|
|
|
|
render() {
|
|
const { featuredUris, fetchingFeaturedUris } = this.props;
|
|
const failedToLoad =
|
|
!fetchingFeaturedUris &&
|
|
(featuredUris === undefined ||
|
|
(featuredUris !== undefined && Object.keys(featuredUris).length === 0));
|
|
|
|
return (
|
|
<main>
|
|
{fetchingFeaturedUris &&
|
|
<BusyMessage message={__('Fetching content')} />}
|
|
{typeof featuredUris === 'object' &&
|
|
Object.keys(featuredUris).map(
|
|
category =>
|
|
featuredUris[category].length
|
|
? <FeaturedCategory
|
|
key={category}
|
|
category={category}
|
|
names={featuredUris[category]}
|
|
/>
|
|
: ''
|
|
)}
|
|
{failedToLoad &&
|
|
<div className="empty">{__('Failed to load landing content.')}</div>}
|
|
</main>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default DiscoverPage;
|