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

92 lines
3 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-11-10 18:47:31 +01:00
import { SITE_NAME, SIMPLE_SITE } from 'config';
import classnames from 'classnames';
2020-01-02 17:30:27 +01:00
import React from 'react';
import Page from 'component/page';
2020-01-20 17:47:03 +01:00
import Button from 'component/button';
import ClaimTilesDiscover from 'component/claimTilesDiscover';
2020-09-16 19:02:45 +02:00
import Icon from 'component/common/icon';
2020-07-23 16:22:57 +02:00
2020-01-20 17:47:03 +01:00
type Props = {
authenticated: boolean,
followedTags: Array<Tag>,
subscribedChannels: Array<Subscription>,
2020-10-13 21:26:59 +02:00
showNsfw: boolean,
homepageData: any,
2020-01-20 17:47:03 +01:00
};
2020-01-02 17:30:27 +01:00
2020-01-20 17:47:03 +01:00
function HomePage(props: Props) {
const { followedTags, subscribedChannels, authenticated, showNsfw, homepageData } = props;
const showPersonalizedChannels = (authenticated || !IS_WEB) && subscribedChannels && subscribedChannels.length > 0;
const showPersonalizedTags = (authenticated || !IS_WEB) && followedTags && followedTags.length > 0;
const showIndividualTags = showPersonalizedTags && followedTags.length < 5;
const { default: getHomepage } = homepageData;
2020-02-06 21:11:00 +01:00
const rowData: Array<RowDataItem> = getHomepage(
authenticated,
showPersonalizedChannels,
showPersonalizedTags,
subscribedChannels,
followedTags,
2020-10-13 21:26:59 +02:00
showIndividualTags,
showNsfw
);
2020-01-02 17:30:27 +01:00
return (
2020-08-21 17:49:13 +02:00
<Page fullWidthPage>
2020-11-10 18:47:31 +01:00
{!SIMPLE_SITE && (authenticated || !IS_WEB) && !subscribedChannels.length && (
2020-02-17 20:12:28 +01:00
<div className="notice-message">
2020-08-21 17:18:47 +02:00
<h1 className="section__title">
{__("%SITE_NAME% is more fun if you're following channels", { SITE_NAME })}
</h1>
<p className="section__actions">
<Button
button="primary"
navigate={`/$/${PAGES.CHANNELS_FOLLOWING_DISCOVER}`}
label={__('Find new channels to follow')}
/>
2020-02-17 20:12:28 +01:00
</p>
</div>
)}
{rowData.map(({ title, route, link, icon, help, options = {} }, index) => (
2020-01-20 17:47:03 +01:00
<div key={title} className="claim-grid__wrapper">
{index === 0 ? (
<div className="section__header--actions">
<span
className={classnames('claim-grid__title', {
'claim-grid__title--first': index === 0,
})}
>
{title}
</span>
</div>
) : (
<h1 className="claim-grid__header">
<Button navigate={route || link} button="link">
{icon && <Icon className="claim-grid__header-icon" sectionIcon icon={icon} size={20} />}
<span className="claim-grid__title">{__(title)}</span>
{help}
</Button>
</h1>
)}
2020-01-20 17:47:03 +01:00
2020-11-10 18:00:58 +01:00
<ClaimTilesDiscover {...options} />
2020-07-22 22:32:18 +02:00
{link && (
<Button
className="claim-grid__title--secondary"
button="link"
navigate={route || link}
2020-07-22 22:32:18 +02:00
iconRight={ICONS.ARROW_RIGHT}
label={__('View More')}
2020-07-22 22:32:18 +02:00
/>
)}
2020-01-20 17:47:03 +01:00
</div>
))}
2020-01-02 17:30:27 +01:00
</Page>
);
}
export default HomePage;