lbry-desktop/ui/page/home/view.jsx

227 lines
5.7 KiB
React
Raw Normal View History

2020-01-02 17:30:27 +01:00
// @flow
2020-01-20 17:47:03 +01:00
import * as ICONS from 'constants/icons';
import * as PAGES from 'constants/pages';
2020-01-02 17:30:27 +01:00
import React from 'react';
2020-01-20 17:47:03 +01:00
import moment from 'moment';
2020-01-02 17:30:27 +01:00
import Page from 'component/page';
2020-01-20 17:47:03 +01:00
import Button from 'component/button';
import ClaimTilesDiscover from 'component/claimTilesDiscover';
import Icon from 'component/common/icon';
import { parseURI } from 'lbry-redux';
import { toCapitalCase } from 'util/string';
2020-01-02 17:30:27 +01:00
2020-01-20 17:47:03 +01:00
type Props = {
authenticated: boolean,
followedTags: Array<Tag>,
subscribedChannels: Array<Subscription>,
};
2020-01-02 17:30:27 +01:00
2020-01-20 17:47:03 +01:00
type RowDataItem = {
title: string,
link?: string,
help?: any,
options?: {},
};
function HomePage(props: Props) {
const { followedTags, subscribedChannels, authenticated } = props;
2020-01-22 17:14:36 +01:00
const showAuthenticatedRows = authenticated || !IS_WEB;
2020-01-20 17:47:03 +01:00
let rowData: Array<RowDataItem> = [];
2020-01-22 17:14:36 +01:00
if (!showAuthenticatedRows) {
2020-01-20 17:47:03 +01:00
rowData.push(
{
title: 'Trending On LBRY',
link: `/$/${PAGES.DISCOVER}`,
},
{
title: 'Top Channels On LBRY',
options: {
orderBy: ['effective_amount'],
claimType: 'channel',
},
}
);
}
2020-01-22 17:14:36 +01:00
if (showAuthenticatedRows) {
2020-01-20 17:47:03 +01:00
if (subscribedChannels && subscribedChannels.length > 0) {
let releaseTime = `>${Math.floor(
moment()
.subtract(1, 'year')
.startOf('week')
.unix()
)}`;
// Warning - hack below
// If users are following more than 20 channels or tags, limit results to stuff less than 6 months old
// This helps with timeout issues for users that are following a ton of stuff
// https://github.com/lbryio/lbry-sdk/issues/2420
if (subscribedChannels.length > 20) {
releaseTime = `>${Math.floor(
moment()
.subtract(6, 'months')
.startOf('week')
.unix()
)}`;
}
2020-01-20 17:47:03 +01:00
rowData.push({
title: 'Recent From Following',
link: `/$/${PAGES.CHANNELS_FOLLOWING}`,
options: {
orderBy: ['release_time'],
releaseTime: releaseTime,
2020-01-20 17:47:03 +01:00
pageSize: subscribedChannels.length > 3 ? 8 : 4,
channelIds: subscribedChannels.map(subscription => {
const { channelClaimId } = parseURI(subscription.uri);
return channelClaimId;
}),
},
});
}
if (followedTags.length === 0) {
rowData.push({
title: 'Trending On LBRY',
link: `/$/${PAGES.DISCOVER}`,
options: {
pageSize: subscribedChannels.length > 0 ? 4 : 8,
},
});
}
if (followedTags.length > 0 && followedTags.length < 5) {
const followedRows = followedTags.map((tag: Tag) => ({
title: `Trending for #${toCapitalCase(tag.name)}`,
link: `/$/${PAGES.TAGS}?t=${tag.name}`,
options: {
pageSize: 4,
tags: [tag.name],
},
}));
rowData.push(...followedRows);
}
if (followedTags.length > 4) {
rowData.push({
title: 'Trending For Your Tags',
link: `/$/${PAGES.TAGS_FOLLOWING}`,
options: {
tags: followedTags.map(tag => tag.name),
},
});
}
}
// Everyone
rowData.push(
{
title: 'Top Content Last Week',
link: `/$/${PAGES.DISCOVER}?&type=top&time=week`,
options: {
orderBy: ['effective_amount'],
pageSize: 4,
claimType: 'stream',
2020-01-20 17:47:03 +01:00
releaseTime: `>${Math.floor(
moment()
.subtract(1, 'week')
.startOf('day')
2020-01-20 17:47:03 +01:00
.unix()
)}`,
},
},
{
title: '#HomePageCageMatch',
link: `/$/${PAGES.TAGS}?t=homepagecagematch&type=top&time=all`,
help: (
<div className="claim-grid__help">
<Icon
icon={ICONS.HELP}
tooltip
customTooltipText={__(
'This is an experiment, and may be removed in the future. Publish something with the #homepagecagematch tag to battle for the top spot on the home page!'
)}
/>
</div>
),
options: {
tags: ['homepagecagematch'],
orderBy: ['effective_amount'],
timestamp: `>${Math.floor(
moment()
.subtract(1, 'week')
.startOf('day')
2020-01-20 17:47:03 +01:00
.unix()
)}`,
},
}
);
2020-01-22 17:14:36 +01:00
if (!showAuthenticatedRows) {
2020-01-20 17:47:03 +01:00
rowData.push({
title: '#lbry',
link: `/$/${PAGES.TAGS}?t=lbry&type=top&time=all`,
options: {
tags: ['lbry'],
orderBy: ['effective_amount'],
pageSize: 4,
},
});
}
2020-01-22 17:14:36 +01:00
if (showAuthenticatedRows) {
2020-01-20 17:47:03 +01:00
rowData.push({
title: 'Trending On LBRY',
link: `/$/${PAGES.DISCOVER}`,
});
}
2020-02-06 21:11:00 +01:00
rowData.push({
title: 'Latest From @lbrycast',
link: `/@lbrycast:4`,
options: {
orderBy: ['release_time'],
pageSize: 4,
channelIds: ['4c29f8b013adea4d5cca1861fb2161d5089613ea'],
},
});
2020-01-20 17:47:03 +01:00
rowData.push({
title: 'Latest From @lbry',
link: `/@lbry:3f`,
options: {
orderBy: ['release_time'],
pageSize: 4,
channelIds: ['3fda836a92faaceedfe398225fb9b2ee2ed1f01a'],
},
});
2020-01-02 17:30:27 +01:00
return (
<Page>
2020-01-20 17:47:03 +01:00
{rowData.map(({ title, link, help, options = {} }) => (
<div key={title} className="claim-grid__wrapper">
<h1 className="section__actions">
{link ? (
<Button
className="claim-grid__title"
button="link"
navigate={link}
iconRight={ICONS.ARROW_RIGHT}
label={title}
/>
) : (
<span className="claim-grid__title">{title}</span>
)}
{help}
</h1>
<ClaimTilesDiscover {...options} />
</div>
))}
2020-01-02 17:30:27 +01:00
</Page>
);
}
export default HomePage;