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

135 lines
3.7 KiB
React
Raw Normal View History

2020-02-17 20:12:28 +01:00
// @flow
import * as ICONS from 'constants/icons';
import * as PAGES from 'constants/pages';
import React from 'react';
import Page from 'component/page';
import Button from 'component/button';
import ClaimTilesDiscover from 'component/claimTilesDiscover';
import ClaimListDiscover from 'component/claimListDiscover';
import * as CS from 'constants/claim_search';
import { toCapitalCase } from 'util/string';
import { SIMPLE_SITE } from 'config';
2020-02-17 20:12:28 +01:00
type Props = {
followedTags: Array<Tag>,
subscribedChannels: Array<Subscription>,
blockedChannels: Array<string>,
homepageData: any,
};
2020-02-17 20:12:28 +01:00
type ChannelsFollowingItem = {
2020-02-17 20:12:28 +01:00
title: string,
link?: string,
help?: any,
options?: {},
};
function ChannelsFollowingDiscover(props: Props) {
const { followedTags, subscribedChannels, blockedChannels, homepageData } = props;
const { PRIMARY_CONTENT_CHANNEL_IDS } = homepageData;
let rowData: Array<ChannelsFollowingItem> = [];
const notChannels = subscribedChannels
.map(({ uri }) => uri)
.concat(blockedChannels)
.map(uri => uri.split('#')[1]);
2020-02-17 20:12:28 +01:00
rowData.push({
title: 'Top Channels Of All Time',
link: `/$/${PAGES.DISCOVER}?claim_type=channel&${CS.ORDER_BY_KEY}=${CS.ORDER_BY_TOP}&${CS.FRESH_KEY}=${CS.FRESH_ALL}`,
options: {
2020-02-26 19:39:03 +01:00
pageSize: 12,
claimType: 'channel',
orderBy: ['effective_amount'],
},
});
rowData.push({
title: 'Latest From @lbrycast',
link: `/@lbrycast:4`,
2020-02-17 20:12:28 +01:00
options: {
orderBy: ['release_time'],
pageSize: 8,
channelIds: ['4c29f8b013adea4d5cca1861fb2161d5089613ea'],
},
});
rowData.push({
title: 'Trending Channels',
2020-03-09 19:26:08 +01:00
link: `/$/${PAGES.DISCOVER}?claim_type=channel`,
options: {
2020-02-26 19:39:03 +01:00
pageSize: 8,
2020-02-17 20:12:28 +01:00
claimType: 'channel',
orderBy: ['trending_group', 'trending_mixed'],
2020-02-17 20:12:28 +01:00
},
});
if (followedTags.length > 0 && followedTags.length < 5) {
const followedRows = followedTags.map((tag: Tag) => ({
title: `Trending Channels for #${toCapitalCase(tag.name)}`,
2020-02-28 16:11:55 +01:00
link: `/$/${PAGES.DISCOVER}?t=${tag.name}&claim_type=channel`,
options: {
claimType: 'channel',
pageSize: 4,
tags: [tag.name],
},
}));
rowData.push(...followedRows);
}
if (followedTags.length > 4) {
rowData.push({
title: 'Trending For Your Tags',
2020-02-21 17:33:14 +01:00
link: `/$/${PAGES.TAGS_FOLLOWING}?claim_type=channel`,
options: {
claimType: 'channel',
tags: followedTags.map(tag => tag.name),
},
});
}
const rowDataWithGenericOptions = rowData.map(row => {
return {
...row,
options: {
...row.options,
notChannels,
},
};
});
2020-02-17 20:12:28 +01:00
return (
<Page>
{rowDataWithGenericOptions.map(({ title, link, help, options = {} }) => (
2020-02-17 20:12:28 +01:00
<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)}
2020-02-17 20:12:28 +01:00
/>
) : (
<span className="claim-grid__title">{__(title)}</span>
2020-02-17 20:12:28 +01:00
)}
{help}
</h1>
<ClaimTilesDiscover {...options} />
</div>
))}
<h1 className="claim-grid__title">{__('More Channels')}</h1>
{/* odysee: claimIds = PRIMARY_CONTENT_CHANNEL_IDS if simplesite CLD */}
<ClaimListDiscover
2020-11-10 18:47:31 +01:00
defaultOrderBy={CS.ORDER_BY_TRENDING}
defaultFreshness={CS.FRESH_ALL}
2020-11-10 18:47:31 +01:00
claimType={CS.CLAIM_CHANNEL}
channelIds={SIMPLE_SITE ? PRIMARY_CONTENT_CHANNEL_IDS : undefined}
/>
2020-02-17 20:12:28 +01:00
</Page>
);
}
export default ChannelsFollowingDiscover;