74 lines
2.1 KiB
JavaScript
74 lines
2.1 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;
|