From 8cf66e24e9592f312f2e5460f757f6f86e581d77 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Thu, 30 Jan 2020 16:01:23 -0500 Subject: [PATCH] create more claim components to simplify ClaimPreview --- ui/component/claimPreview/index.js | 12 ------ ui/component/claimPreview/view.jsx | 58 ++++++----------------------- ui/component/claimSubtitle/index.js | 23 ++++++++++++ ui/component/claimSubtitle/view.jsx | 52 ++++++++++++++++++++++++++ ui/component/claimTitle/index.js | 10 +++++ ui/component/claimTitle/view.jsx | 21 +++++++++++ 6 files changed, 117 insertions(+), 59 deletions(-) create mode 100644 ui/component/claimSubtitle/index.js create mode 100644 ui/component/claimSubtitle/view.jsx create mode 100644 ui/component/claimTitle/index.js create mode 100644 ui/component/claimTitle/view.jsx diff --git a/ui/component/claimPreview/index.js b/ui/component/claimPreview/index.js index 3ba97052b..e46def622 100644 --- a/ui/component/claimPreview/index.js +++ b/ui/component/claimPreview/index.js @@ -1,4 +1,3 @@ -import * as PAGES from 'constants/pages'; import { connect } from 'react-redux'; import { doResolveUri, @@ -8,12 +7,9 @@ import { makeSelectClaimIsPending, makeSelectThumbnailForUri, makeSelectCoverForUri, - makeSelectTitleForUri, makeSelectClaimIsNsfw, selectBlockedChannels, selectChannelIsBlocked, - doClearPublish, - doPrepareEdit, doFileGet, makeSelectStreamingUrlForUri, } from 'lbry-redux'; @@ -21,8 +17,6 @@ import { selectBlackListedOutpoints, selectFilteredOutpoints } from 'lbryinc'; import { selectShowMatureContent } from 'redux/selectors/settings'; import { makeSelectHasVisitedUri } from 'redux/selectors/content'; import { makeSelectIsSubscribed } from 'redux/selectors/subscriptions'; -import { push } from 'connected-react-router'; - import ClaimPreview from './view'; const select = (state, props) => ({ @@ -33,7 +27,6 @@ const select = (state, props) => ({ isResolvingUri: props.uri && makeSelectIsUriResolving(props.uri)(state), thumbnail: props.uri && makeSelectThumbnailForUri(props.uri)(state), cover: props.uri && makeSelectCoverForUri(props.uri)(state), - title: props.uri && makeSelectTitleForUri(props.uri)(state), nsfw: props.uri && makeSelectClaimIsNsfw(props.uri)(state), blackListedOutpoints: selectBlackListedOutpoints(state), filteredOutpoints: selectFilteredOutpoints(state), @@ -47,11 +40,6 @@ const select = (state, props) => ({ const perform = dispatch => ({ resolveUri: uri => dispatch(doResolveUri(uri)), getFile: uri => dispatch(doFileGet(uri, false)), - beginPublish: name => { - dispatch(doClearPublish()); - dispatch(doPrepareEdit({ name })); - dispatch(push(`/$/${PAGES.PUBLISH}`)); - }, }); export default connect( diff --git a/ui/component/claimPreview/view.jsx b/ui/component/claimPreview/view.jsx index dcffc7be1..62707ef91 100644 --- a/ui/component/claimPreview/view.jsx +++ b/ui/component/claimPreview/view.jsx @@ -1,6 +1,6 @@ // @flow import type { Node } from 'react'; -import React, { Fragment, useEffect, forwardRef } from 'react'; +import React, { useEffect, forwardRef } from 'react'; import classnames from 'classnames'; import { parseURI, convertToShareLink } from 'lbry-redux'; import { withRouter } from 'react-router-dom'; @@ -9,15 +9,14 @@ import { formatLbryUrlForWeb } from 'util/url'; import { isEmpty } from 'util/object'; import FileThumbnail from 'component/fileThumbnail'; import UriIndicator from 'component/uriIndicator'; -import TruncatedText from 'component/common/truncated-text'; -import DateTime from 'component/dateTime'; import FileProperties from 'component/fileProperties'; import ClaimTags from 'component/claimTags'; import SubscribeButton from 'component/subscribeButton'; import ChannelThumbnail from 'component/channelThumbnail'; import BlockButton from 'component/blockButton'; -import Button from 'component/button'; import useGetThumbnail from 'effects/use-get-thumbnail'; +import ClaimTitle from 'component/claimTitle'; +import ClaimSubtitle from 'component/claimSubtitle'; type Props = { uri: string, @@ -46,7 +45,6 @@ type Props = { blockedChannelUris: Array, channelIsBlocked: boolean, isSubscribed: boolean, - beginPublish: string => void, actions: boolean | Node | string | number, properties: boolean | Node | string | number, onClick?: any => any, @@ -65,7 +63,6 @@ const ClaimPreview = forwardRef((props: Props, ref: any) => { uri, isResolvingUri, thumbnail, - title, nsfw, resolveUri, claim, @@ -78,7 +75,6 @@ const ClaimPreview = forwardRef((props: Props, ref: any) => { showUserBlocked, channelIsBlocked, isSubscribed, - beginPublish, actions, properties, onClick, @@ -90,15 +86,13 @@ const ClaimPreview = forwardRef((props: Props, ref: any) => { const shouldFetch = claim === undefined || (claim !== null && claim.value_type === 'channel' && isEmpty(claim.meta) && !pending); const abandoned = !isResolvingUri && !claim; - const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0; const showPublishLink = abandoned && placeholder === 'publish'; const hideActions = type === 'small' || type === 'tooltip'; - let name; let isValid = false; if (uri) { try { - ({ streamName: name } = parseURI(uri)); + parseURI(uri); isValid = true; } catch (e) { isValid = false; @@ -106,7 +100,6 @@ const ClaimPreview = forwardRef((props: Props, ref: any) => { } const isChannel = isValid ? parseURI(uri).isChannel : false; - const includeChannelTooltip = type !== 'inline' && type !== 'tooltip' && !isChannel; const signingChannel = claim && claim.signing_channel; // do not block abandoned and nsfw claims if showUserBlocked is passed @@ -165,8 +158,10 @@ const ClaimPreview = forwardRef((props: Props, ref: any) => { function handleOnClick(e) { if (onClick) { onClick(e); - } else if ((isChannel || title) && !pending) { - history.push(formatLbryUrlForWeb(claim && claim.canonical_url ? claim.canonical_url : uri)); + } + + if (claim && !pending) { + history.push(formatLbryUrlForWeb(claim.canonical_url ? claim.canonical_url : uri)); } } @@ -222,42 +217,11 @@ const ClaimPreview = forwardRef((props: Props, ref: any) => {
-
- {claim ? : {__('Nothing here')}} -
- {!isChannel && claim && } + + {!isChannel && }
-
- {!isResolvingUri && ( -
- {claim ? ( - - {' '} - {pending - ? __('Pending...') - : claim && - (isChannel ? ( - type !== 'inline' && `${claimsInChannel} ${__('publishes')}` - ) : ( - - ))} - - ) : ( - -
{__('Publish something and claim this spot!')}
-
-
- - )} -
- )} -
+
{!pending && ( diff --git a/ui/component/claimSubtitle/index.js b/ui/component/claimSubtitle/index.js new file mode 100644 index 000000000..f073807eb --- /dev/null +++ b/ui/component/claimSubtitle/index.js @@ -0,0 +1,23 @@ +import * as PAGES from 'constants/pages'; +import { connect } from 'react-redux'; +import { makeSelectClaimForUri, makeSelectClaimIsPending, doClearPublish, doPrepareEdit } from 'lbry-redux'; +import { push } from 'connected-react-router'; +import ClaimSubtitle from './view'; + +const select = (state, props) => ({ + claim: makeSelectClaimForUri(props.uri)(state), + pending: makeSelectClaimIsPending(props.uri)(state), +}); + +const perform = dispatch => ({ + beginPublish: name => { + dispatch(doClearPublish()); + dispatch(doPrepareEdit({ name })); + dispatch(push(`/$/${PAGES.PUBLISH}`)); + }, +}); + +export default connect( + select, + perform +)(ClaimSubtitle); diff --git a/ui/component/claimSubtitle/view.jsx b/ui/component/claimSubtitle/view.jsx new file mode 100644 index 000000000..d1377ea9e --- /dev/null +++ b/ui/component/claimSubtitle/view.jsx @@ -0,0 +1,52 @@ +// @flow +import React from 'react'; +import UriIndicator from 'component/uriIndicator'; +import DateTime from 'component/dateTime'; +import Button from 'component/button'; +import { parseURI } from 'lbry-redux'; + +type Props = { + uri: string, + claim: ?Claim, + pending?: boolean, + type: string, + beginPublish: string => void, +}; + +function ClaimSubtitle(props: Props) { + const { pending, uri, claim, type, beginPublish } = props; + const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0; + + let isChannel; + let name; + try { + ({ streamName: name, isChannel } = parseURI(uri)); + } catch (e) {} + + return ( +
+ {claim ? ( + + {' '} + {pending + ? __('Pending...') + : claim && + (isChannel ? ( + type !== 'inline' && `${claimsInChannel} ${__('publishes')}` + ) : ( + + ))} + + ) : ( + +
{__('Publish something and claim this spot!')}
+
+
+ + )} +
+ ); +} + +export default ClaimSubtitle; diff --git a/ui/component/claimTitle/index.js b/ui/component/claimTitle/index.js new file mode 100644 index 000000000..91fee1ad0 --- /dev/null +++ b/ui/component/claimTitle/index.js @@ -0,0 +1,10 @@ +import { connect } from 'react-redux'; +import { makeSelectClaimForUri, makeSelectTitleForUri } from 'lbry-redux'; +import ClaimPreview from './view'; + +const select = (state, props) => ({ + claim: makeSelectClaimForUri(props.uri)(state), + title: makeSelectTitleForUri(props.uri)(state), +}); + +export default connect(select)(ClaimPreview); diff --git a/ui/component/claimTitle/view.jsx b/ui/component/claimTitle/view.jsx new file mode 100644 index 000000000..70c0bf94a --- /dev/null +++ b/ui/component/claimTitle/view.jsx @@ -0,0 +1,21 @@ +// @flow +import React from 'react'; +import TruncatedText from 'component/common/truncated-text'; + +type Props = { + uri: string, + claim: ?Claim, + title: string, +}; + +function ClaimTitle(props: Props) { + const { title, claim } = props; + + return ( +
+ {claim ? : {__('Nothing here')}} +
+ ); +} + +export default ClaimTitle;