diff --git a/ui/component/router/view.jsx b/ui/component/router/view.jsx index ba8eae4dc..4d3d166c0 100644 --- a/ui/component/router/view.jsx +++ b/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 && } {/* @endif */} - + + + + - ({ followedTags: selectFollowedTags(state), - subscribedChannels: selectSubscriptions(state), - email: selectUserVerifiedEmail(state), }); -const perform = {}; - export default connect( select, - perform -)(DiscoverPage); + { + doToggleTagFollow, + } +)(Tags); diff --git a/ui/page/discover/view.jsx b/ui/page/discover/view.jsx index df1657984..cd75d3f95 100644 --- a/ui/page/discover/view.jsx +++ b/ui/page/discover/view.jsx @@ -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, + 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 ( - - {__('All Content')} - + tag ? ( + + + {tag} + + ) : ( + + + {__('All Content')} + + ) + } + tags={tags} + hiddenNsfwMessage={} + meta={ + tag && ( +