diff --git a/static/app-strings.json b/static/app-strings.json index 4fda07061..22747666f 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -929,5 +929,12 @@ "Custom": "Custom", "Playing in %seconds_left% seconds": "Playing in %seconds_left% seconds", "Up Next by %channel%": "Up Next by %channel%", - "Install Now": "Install Now" -} + "Install Now": "Install Now", + "Repost": "Repost", + "Repost your favorite claims to help more people discover them!": "Repost your favorite claims to help more people discover them!", + "Advanced": "Advanced", + "community name": "community name", + "Change this to repost to a different %lbry_naming_link%.": "Change this to repost to a different %lbry_naming_link%.", + "Reposting": "Reposting", + "Woohoo! Sucessfully reposted this claim.": "Woohoo! Sucessfully reposted this claim." +} \ No newline at end of file diff --git a/ui/modal/modalRepost/index.js b/ui/modal/modalRepost/index.js index 04e2e5a45..55a476ac1 100644 --- a/ui/modal/modalRepost/index.js +++ b/ui/modal/modalRepost/index.js @@ -10,6 +10,8 @@ import { selectRepostLoading, doClearRepostError, doToast, + selectMyClaimsWithoutChannels, + doFetchClaimListMine, } from 'lbry-redux'; import ModalRepost from './view'; @@ -20,6 +22,7 @@ const select = (state, props) => ({ balance: selectBalance(state), error: selectRepostError(state), reposting: selectRepostLoading(state), + myClaims: selectMyClaimsWithoutChannels(state), }); export default connect( @@ -29,5 +32,6 @@ export default connect( doRepost, doClearRepostError, doToast, + doFetchClaimListMine, } )(ModalRepost); diff --git a/ui/modal/modalRepost/view.jsx b/ui/modal/modalRepost/view.jsx index 510187c86..0fac91d08 100644 --- a/ui/modal/modalRepost/view.jsx +++ b/ui/modal/modalRepost/view.jsx @@ -1,4 +1,5 @@ // @flow +import * as ICONS from 'constants/icons'; import { CHANNEL_NEW, MINIMUM_PUBLISH_BID, INVALID_NAME_ERROR } from 'constants/claim'; import React from 'react'; import { Modal } from 'modal/modal'; @@ -8,6 +9,8 @@ import SelectChannel from 'component/selectChannel'; import ErrorText from 'component/common/error-text'; import { FormField } from 'component/common/form'; import { parseURI, isNameValid, creditsToString } from 'lbry-redux'; +import usePersistedState from 'effects/use-persisted-state'; +import I18nMessage from 'component/i18nMessage'; type Props = { doHideModal: () => void, @@ -18,6 +21,8 @@ type Props = { claim: ?StreamClaim, balance: number, channels: ?Array, + myClaims: ?Array, + doFetchClaimListMine: () => void, error: ?string, reposting: boolean, }; @@ -34,60 +39,66 @@ function ModalRepost(props: Props) { channels, error, reposting, + myClaims, + doFetchClaimListMine, } = props; - const defaultName = claim && `${claim.name}-repost`; - const originalClaimId = claim && claim.claim_id; - - const [repostChannel, setRepostChannel] = React.useState(); + const defaultName = claim && claim.name; + const contentClaimId = claim && claim.claim_id; + const [repostChannel, setRepostChannel] = usePersistedState('repost-channel'); + const [repostBid, setRepostBid] = usePersistedState('repost-bid', 0.01); const [showAdvanced, setShowAdvanced] = React.useState(); - const [repostBid, setRepostBid] = React.useState(0.1); const [repostName, setRepostName] = React.useState(defaultName); - const [repostNameError, setRepostNameError] = React.useState(); - const [repostBidError, setRepostBidError] = React.useState(); + + let repostBidError; + if (repostBid === 0) { + repostBidError = __('Deposit cannot be 0'); + } else if (balance === repostBid) { + repostBidError = __('Please decrease your deposit to account for transaction fees'); + } else if (balance < repostBid) { + repostBidError = __('Deposit cannot be higher than your balance'); + } else if (repostBid < MINIMUM_PUBLISH_BID) { + repostBidError = __('Your deposit must be higher'); + } + + let repostNameError; + if (!repostName) { + repostNameError = __('A name is required'); + } else if (!isNameValid(repostName, false)) { + repostNameError = INVALID_NAME_ERROR; + } else if ( + channels && + channels.find(claim => claim.name === repostChannel) && + myClaims && + myClaims.find(claim => claim.name === repostName) + ) { + repostNameError = __('You already have a claim with this name.'); + } const channelStrings = channels && channels.map(channel => channel.permanent_url).join(','); React.useEffect(() => { if (!repostChannel && channelStrings) { const channels = channelStrings.split(','); const newChannelUrl = channels[0]; - const { claimName, claimId } = parseURI(newChannelUrl); - setRepostChannel({ name: claimName, claimId }); + const { claimName } = parseURI(newChannelUrl); + setRepostChannel(claimName); } }, [channelStrings]); + const myClaimsString = myClaims && myClaims.map(channel => channel.permanent_url).join(','); React.useEffect(() => { - let bidError; - if (repostBid === 0) { - bidError = __('Deposit cannot be 0'); - } else if (balance === repostBid) { - bidError = __('Please decrease your deposit to account for transaction fees'); - } else if (balance < repostBid) { - bidError = __('Deposit cannot be higher than your balance'); - } else if (repostBid < MINIMUM_PUBLISH_BID) { - bidError = __('Your deposit must be higher'); + if (myClaimsString === '') { + doFetchClaimListMine(); } - - setRepostBidError(bidError); - }, [repostBid, balance]); - - React.useEffect(() => { - let nameError; - if (!repostName) { - nameError = __('A name is required'); - } else if (!isNameValid(repostName, false)) { - nameError = INVALID_NAME_ERROR; - } - - setRepostNameError(nameError); - }, [repostName]); + }, [myClaimsString, doFetchClaimListMine]); function handleSubmit() { - if (repostName && repostBid && repostChannel && originalClaimId) { + const channelToRepostTo = channels && channels.find(channel => channel.name === repostChannel); + if (channelToRepostTo && repostName && repostBid && repostChannel && contentClaimId) { doRepost({ name: repostName, bid: creditsToString(repostBid), - channel_id: repostChannel.claimId, - claim_id: originalClaimId, + channel_id: channelToRepostTo.claim_id, + claim_id: contentClaimId, }).then(() => { doHideModal(); doToast({ message: __('Woohoo! Sucessfully reposted this claim.') }); @@ -100,41 +111,44 @@ function ModalRepost(props: Props) { doHideModal(); } + const showAdvancedSection = showAdvanced || repostNameError || repostBidError; return ( Repost {title} } subtitle={ - error && {__('There was an error reposting this claim. Please try again later.')} + error ? ( + {__('There was an error reposting this claim. Please try again later.')} + ) : ( + {__('Repost your favorite claims to help more people discover them!')} + ) } - body={ + actions={
setRepostChannel(newChannel)} />
- {!showAdvanced && ( -
- {showAdvanced && ( + {showAdvancedSection && (
{`lbry://${ - !repostChannel || repostChannel.name === CHANNEL_NEW ? '' : `${repostChannel.name}/` + !repostChannel || repostChannel === CHANNEL_NEW ? '' : `${repostChannel}/` }`}
- {__('The name of your repost, something about reposting to help search')} + + ), + }} + > + Change this to repost to a different %lbry_naming_link%. +
)} + +
+
} - actions={ - -