merge discover page and tags page

ui/component/router/view.jsx

@@ -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}`}

ui/component/tag/view.jsx

@@ -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) {

ui/constants/pages.js

@@ -19,11 +19,14 @@ exports.SHOW = 'show';
 exports.ACCOUNT = 'account';
 exports.SEARCH = 'search';
 exports.TRANSACTIONS = 'transactions';
-exports.TAGS = 'tags';
+exports.TAGS = 'tagsdsfsdfdsf';
-exports.TAGS_FOLLOWING = 'following/tags';
+exports.TAGS_FOLLOWING = 'tags';
-exports.TAGS_FOLLOWING_MANAGE = 'following/tags/manage';
+exports.DEPRECATED__TAGS_FOLLOWING = 'following/tags';
-exports.CHANNELS_FOLLOWING = 'following/channels';
+exports.TAGS_FOLLOWING_MANAGE = 'tags/manage';
-exports.CHANNELS_FOLLOWING_MANAGE = 'following/channels/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';

ui/page/discover/index.js

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

ui/page/discover/view.jsx

@@ -1,23 +1,85 @@
 // @flow
 import * as ICONS from 'constants/icons';
-import React from 'react';
+import React, { useRef } from 'react';
-import ClaimListDiscover from 'component/claimListDiscover';
 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={
-          <span>
+          tag ? (
-            <Icon icon={ICONS.DISCOVER} size={10} />
+            <span>
-            {__('All Content')}
+              <Icon icon={ICONS.TAG} size={10} />
-          </span>
+              {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;

ui/page/tags/index.js

@@ -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);

ui/page/tags/view.jsx

@@ -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;