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

147 lines
4.4 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
2020-11-17 01:04:29 +01:00
import { SHOW_ADS, DOMAIN } from 'config';
2020-01-02 21:36:03 +01:00
import * as ICONS from 'constants/icons';
2020-02-26 20:14:10 +01:00
import React, { useRef } from 'react';
2018-03-26 23:32:43 +02:00
import Page from 'component/page';
2020-02-26 20:14:10 +01:00
import ClaimListDiscover from 'component/claimListDiscover';
import Button from 'component/button';
import useHover from 'effects/use-hover';
2020-08-10 22:47:39 +02:00
import { useIsMobile } from 'effects/use-screensize';
2020-02-26 20:14:10 +01:00
import analytics from 'analytics';
import HiddenNsfw from 'component/common/hidden-nsfw';
2020-01-02 21:36:03 +01:00
import Icon from 'component/common/icon';
import * as CS from 'constants/claim_search';
import Ads from 'web/component/ads';
2020-11-17 01:04:29 +01:00
import LbcSymbol from 'component/common/lbc-symbol';
import I18nMessage from 'component/i18nMessage';
2019-06-28 09:33:07 +02:00
2020-02-26 20:14:10 +01:00
type Props = {
location: { search: string },
followedTags: Array<Tag>,
repostedUri: string,
repostedClaim: ?GenericClaim,
doToggleTagFollowDesktop: string => void,
doResolveUri: string => void,
2020-03-26 22:47:07 +01:00
isAuthenticated: boolean,
dynamicRouteProps: RowDataItem,
2020-08-21 17:49:13 +02:00
tileLayout: boolean,
2020-02-26 20:14:10 +01:00
};
function DiscoverPage(props: Props) {
2020-02-26 20:14:10 +01:00
const {
location: { search },
followedTags,
repostedClaim,
repostedUri,
doToggleTagFollowDesktop,
doResolveUri,
2020-03-26 22:47:07 +01:00
isAuthenticated,
2020-08-21 17:49:13 +02:00
tileLayout,
dynamicRouteProps,
2020-02-26 20:14:10 +01:00
} = props;
const buttonRef = useRef();
const isHovering = useHover(buttonRef);
2020-05-21 17:38:28 +02:00
const isMobile = useIsMobile();
2020-02-26 20:14:10 +01:00
const urlParams = new URLSearchParams(search);
const claimType = urlParams.get('claim_type');
const tagsQuery = urlParams.get('t') || null;
const tags = tagsQuery ? tagsQuery.split(',') : null;
const repostedClaimIsResolved = repostedUri && repostedClaim;
2020-02-26 20:14:10 +01:00
// Eventually allow more than one tag on this page
// Restricting to one to make follow/unfollow simpler
const tag = (tags && tags[0]) || null;
2020-02-26 20:14:10 +01:00
const isFollowing = followedTags.map(({ name }) => name).includes(tag);
let label = isFollowing ? __('Following --[button label indicating a channel has been followed]--') : __('Follow');
2020-02-26 20:14:10 +01:00
if (isHovering && isFollowing) {
label = __('Unfollow');
}
React.useEffect(() => {
if (repostedUri && !repostedClaimIsResolved) {
doResolveUri(repostedUri);
}
}, [repostedUri, repostedClaimIsResolved, doResolveUri]);
2020-02-26 20:14:10 +01:00
function handleFollowClick() {
if (tag) {
doToggleTagFollowDesktop(tag);
2020-02-26 20:14:10 +01:00
const nowFollowing = !isFollowing;
analytics.tagFollowEvent(tag, nowFollowing, 'tag-page');
}
2020-02-26 20:14:10 +01:00
}
let headerLabel;
if (repostedClaim) {
headerLabel = __('Reposts of %uri%', { uri: repostedUri });
} else if (tag) {
headerLabel = (
<span>
<Icon icon={ICONS.TAG} size={10} />
{(tag === CS.TAGS_ALL && __('All Content')) || (tag === CS.TAGS_FOLLOWED && __('Followed Tags')) || tag}
</span>
);
} else {
headerLabel = (
<span>
<Icon icon={(dynamicRouteProps && dynamicRouteProps.icon) || ICONS.DISCOVER} size={10} />
{(dynamicRouteProps && dynamicRouteProps.title) || __('All Content')}
</span>
);
}
2019-06-11 20:10:58 +02:00
return (
2020-08-21 17:49:13 +02:00
<Page noFooter fullWidthPage={tileLayout}>
2020-01-02 21:36:03 +01:00
<ClaimListDiscover
limitClaimsPerChannel={3}
2020-09-17 17:55:01 +02:00
header={repostedUri ? <span /> : undefined}
2020-09-17 17:49:53 +02:00
tileLayout={repostedUri ? false : tileLayout}
2020-02-29 00:13:49 +01:00
claimType={claimType ? [claimType] : undefined}
headerLabel={headerLabel}
tags={tags}
2020-02-26 20:14:10 +01:00
hiddenNsfwMessage={<HiddenNsfw type="page" />}
repostedClaimId={repostedClaim ? repostedClaim.claim_id : null}
injectedItem={SHOW_ADS && !isAuthenticated && IS_WEB && <Ads type="video" />}
channelIds={
(dynamicRouteProps && dynamicRouteProps.options && dynamicRouteProps.options.channelIds) || undefined
}
2020-02-26 20:14:10 +01:00
meta={
2020-11-17 01:04:29 +01:00
!dynamicRouteProps ? (
<a
className="help"
href="https://lbry.com/faq/trending"
title={__('Learn more about LBRY Credits on %DOMAIN%', { DOMAIN })}
>
<I18nMessage
tokens={{
lbc: <LbcSymbol />,
}}
>
Results boosted by %lbc%
</I18nMessage>
</a>
) : (
tag &&
!isMobile && (
<Button
ref={buttonRef}
button="alt"
icon={ICONS.SUBSCRIBE}
iconColor="red"
onClick={handleFollowClick}
requiresAuth={IS_WEB}
label={label}
/>
)
2020-02-26 20:14:10 +01:00
)
2020-01-02 21:36:03 +01:00
}
/>
2019-06-11 20:10:58 +02:00
</Page>
);
2017-05-04 05:44:08 +02:00
}
export default DiscoverPage;