LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

merge discover page and tags page

Browse source
This commit is contained in:
Sean Yesmunt 2020-02-26 14:14:10 -05:00
parent 3e08d8e231
commit 73c60f62ac
7 changed files with 93 additions and 117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
ui/component/router/view.jsx
View file

@ -21,7 +21,6 @@ import InvitePage from 'page/invite';
import SearchPage from 'page/search';
import LibraryPage from 'page/library';
import WalletPage from 'page/wallet';
import TagsPage from 'page/tags';
import TagsFollowingPage from 'page/tagsFollowing';
import ChannelsFollowingPage from 'page/channelsFollowing';
import ChannelsFollowingDiscoverPage from 'page/channelsFollowingDiscover';
@ -140,13 +139,18 @@ function AppRouter(props: Props) {
{welcomeVersion < WELCOME_VERSION && <Route path="/*" component={Welcome} />}
{/* @endif */}
<Redirect from={`/$/${PAGES.CHANNELS_FOLLOWING_MANAGE}`} to={`/$/${PAGES.CHANNELS_FOLLOWING_DISCOVER}`} />
<Redirect
from={`/$/${PAGES.DEPRECATED__CHANNELS_FOLLOWING_MANAGE}`}
to={`/$/${PAGES.CHANNELS_FOLLOWING_DISCOVER}`}
/>
<Redirect from={`/$/${PAGES.DEPRECATED__CHANNELS_FOLLOWING}`} to={`/$/${PAGES.CHANNELS_FOLLOWING}`} />
<Redirect from={`/$/${PAGES.DEPRECATED__TAGS_FOLLOWING}`} to={`/$/${PAGES.TAGS_FOLLOWING}`} />
<Redirect from={`/$/${PAGES.DEPRECATED__TAGS_FOLLOWING_MANAGE}`} to={`/$/${PAGES.TAGS_FOLLOWING_MANAGE}`} />
<Route path={`/`} exact component={HomePage} />
<Route path={`/$/${PAGES.DISCOVER}`} exact component={DiscoverPage} />
<Route path={`/$/${PAGES.AUTH}`} exact component={SignInPage} />
<Route path={`/$/${PAGES.WELCOME}`} exact component={Welcome} />
<Route path={`/$/${PAGES.TAGS}`} exact component={TagsPage} />
<Route path={`/$/${PAGES.TAGS_FOLLOWING}`} exact component={TagsFollowingPage} />
<Route
path={`/$/${PAGES.CHANNELS_FOLLOWING}`}

3
ui/component/tag/view.jsx
View file

@ -1,5 +1,6 @@
// @flow
import * as ICONS from 'constants/icons';
import * as PAGES from 'constants/pages';
import React from 'react';
import classnames from 'classnames';
import { MATURE_TAGS } from 'lbry-redux';
@ -15,7 +16,7 @@ type Props = {
export default function Tag(props: Props) {
const { name, onClick, type = 'link', disabled = false } = props;
const isMature = MATURE_TAGS.includes(name);
const clickProps = onClick ? { onClick } : { navigate: `/$/tags?t=${encodeURIComponent(name)}` };
const clickProps = onClick ? { onClick } : { navigate: `/$/${PAGES.DISCOVER}?t=${encodeURIComponent(name)}` };
let title;
if (!onClick) {

13
ui/constants/pages.js
View file

@ -19,11 +19,14 @@ exports.SHOW = 'show';
exports.ACCOUNT = 'account';
exports.SEARCH = 'search';
exports.TRANSACTIONS = 'transactions';
exports.TAGS = 'tags';
exports.TAGS_FOLLOWING = 'following/tags';
exports.TAGS_FOLLOWING_MANAGE = 'following/tags/manage';
exports.CHANNELS_FOLLOWING = 'following/channels';
exports.CHANNELS_FOLLOWING_MANAGE = 'following/channels/manage';
exports.TAGS = 'tagsdsfsdfdsf';
exports.TAGS_FOLLOWING = 'tags';
exports.DEPRECATED__TAGS_FOLLOWING = 'following/tags';
exports.TAGS_FOLLOWING_MANAGE = 'tags/manage';
exports.DEPRECATED__TAGS_FOLLOWING_MANAGE = 'tags/following/manage';
exports.DEPRECATED__CHANNELS_FOLLOWING = 'following/channels';
exports.CHANNELS_FOLLOWING = 'following';
exports.DEPRECATED__CHANNELS_FOLLOWING_MANAGE = 'following/channels/manage';
exports.CHANNELS_FOLLOWING_DISCOVER = 'following/discover';
exports.WALLET = 'wallet';
exports.BLOCKED = 'blocked';

16
ui/page/discover/index.js
View file

@ -1,18 +1,14 @@
import { connect } from 'react-redux';
import { selectFollowedTags } from 'lbry-redux';
import { selectUserVerifiedEmail } from 'lbryinc';
import { selectSubscriptions } from 'redux/selectors/subscriptions';
import DiscoverPage from './view';
import { selectFollowedTags, doToggleTagFollow } from 'lbry-redux';
import Tags from './view';
const select = state => ({
followedTags: selectFollowedTags(state),
subscribedChannels: selectSubscriptions(state),
email: selectUserVerifiedEmail(state),
});
const perform = {};
export default connect(
select,
perform
)(DiscoverPage);
{
doToggleTagFollow,
}
)(Tags);

70
ui/page/discover/view.jsx
View file

@ -1,23 +1,85 @@
// @flow
import * as ICONS from 'constants/icons';
import React from 'react';
import ClaimListDiscover from 'component/claimListDiscover';
import React, { useRef } from 'react';
import Page from 'component/page';
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';
import Icon from 'component/common/icon';
function DiscoverPage() {
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');
}
return (
<Page>
<ClaimListDiscover
claimType={claimType}
headerLabel={
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}
/>
)
}
/>
</Page>
);
}
export default DiscoverPage;
export default TagsPage;

14
ui/page/tags/index.js
View file

@ -1,14 +0,0 @@
import { connect } from 'react-redux';
import { selectFollowedTags, doToggleTagFollow } from 'lbry-redux';
import Tags from './view';
const select = state => ({
followedTags: selectFollowedTags(state),
});
export default connect(
select,
{
doToggleTagFollow,
}
)(Tags);

76
ui/page/tags/view.jsx
View file

@ -1,76 +0,0 @@
// @flow
import * as ICONS from 'constants/icons';
import React, { useRef } from 'react';
import Page from 'component/page';
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';
import Icon from 'component/common/icon';
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');
}
return (
<Page>
<ClaimListDiscover
claimType={claimType}
headerLabel={
<span>
<Icon icon={ICONS.TAG} size={10} />
{tag}
</span>
}
tags={tags}
hiddenNsfwMessage={<HiddenNsfw type="page" />}
meta={
<Button
ref={buttonRef}
button="alt"
icon={ICONS.SUBSCRIBE}
iconColor="red"
onClick={handleFollowClick}
requiresAuth={IS_WEB}
label={label}
/>
}
/>
</Page>
);
}
export default TagsPage;