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

86 lines
2.2 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
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';
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';
2019-06-28 09:33:07 +02:00
2020-02-26 20:14:10 +01:00
type Props = {
location: { search: string },
followedTags: Array<Tag>,
doToggleTagFollow: string => void,
};
function TagsPage(props: Props) {
const {
location: { search },
followedTags,
doToggleTagFollow,
} = props;
const buttonRef = useRef();
const isHovering = useHover(buttonRef);
const urlParams = new URLSearchParams(search);
const claimType = urlParams.get('claim_type');
const tagsQuery = urlParams.get('t') || '';
const tags = tagsQuery.split(',');
// Eventually allow more than one tag on this page
// Restricting to one to make follow/unfollow simpler
const tag = tags[0];
const isFollowing = followedTags.map(({ name }) => name).includes(tag);
let label = isFollowing ? __('Following') : __('Follow');
if (isHovering && isFollowing) {
label = __('Unfollow');
}
function handleFollowClick() {
doToggleTagFollow(tag);
const nowFollowing = !isFollowing;
analytics.tagFollowEvent(tag, nowFollowing, 'tag-page');
}
2019-06-11 20:10:58 +02:00
return (
2019-06-17 22:32:38 +02:00
<Page>
2020-01-02 21:36:03 +01:00
<ClaimListDiscover
2020-02-29 00:13:49 +01:00
claimType={claimType ? [claimType] : undefined}
2020-01-02 21:36:03 +01:00
headerLabel={
2020-02-26 20:14:10 +01:00
tag ? (
<span>
<Icon icon={ICONS.TAG} size={10} />
{tag}
</span>
) : (
<span>
<Icon icon={ICONS.DISCOVER} size={10} />
{__('All Content')}
</span>
)
}
tags={tags}
hiddenNsfwMessage={<HiddenNsfw type="page" />}
meta={
tag && (
<Button
ref={buttonRef}
button="alt"
icon={ICONS.SUBSCRIBE}
iconColor="red"
onClick={handleFollowClick}
requiresAuth={IS_WEB}
label={label}
/>
)
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
}
2020-02-26 20:14:10 +01:00
export default TagsPage;