From f7367f5c6a6ce13c325612b2df823b0df6275168 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sat, 16 Sep 2017 19:50:44 -0600 Subject: [PATCH] tidy up edit / publish logic edit claim by id fix #553 display title and icon based on action: edit / publish tidy up remove unused code --- ui/js/component/fileActions/index.js | 2 +- ui/js/component/fileActions/view.jsx | 17 +++-- ui/js/component/publishForm/view.jsx | 68 ++++++++++---------- ui/js/selectors/navigation.js | 2 +- ui/js/selectors/search.js | 92 +++++++++++++++------------- 5 files changed, 98 insertions(+), 83 deletions(-) diff --git a/ui/js/component/fileActions/index.js b/ui/js/component/fileActions/index.js index fea552312..b94e2bbcb 100644 --- a/ui/js/component/fileActions/index.js +++ b/ui/js/component/fileActions/index.js @@ -24,7 +24,7 @@ const perform = dispatch => ({ openModal: (modal, props) => dispatch(doOpenModal(modal, props)), startDownload: uri => dispatch(doPurchaseUri(uri)), restartDownload: (uri, outpoint) => dispatch(doStartDownload(uri, outpoint)), - editClaim: fileInfo => dispatch(doNavigate("/publish", fileInfo)), + editClaim: claimId => dispatch(doNavigate("/publish", { id: claimId })), }); export default connect(select, perform)(FileActions); diff --git a/ui/js/component/fileActions/view.jsx b/ui/js/component/fileActions/view.jsx index eed07ab44..361338b89 100644 --- a/ui/js/component/fileActions/view.jsx +++ b/ui/js/component/fileActions/view.jsx @@ -9,12 +9,17 @@ class FileActions extends React.PureComponent { } render() { - const { fileInfo, uri, openModal, claimIsMine, editClaim } = this.props; + const { + fileInfo, + uri, + openModal, + claimIsMine, + editClaim, + checkAvailability, + } = this.props; - const name = fileInfo ? fileInfo.name : null; - const channel = fileInfo ? fileInfo.channel_name : null; - - const metadata = fileInfo ? fileInfo.metadata : null, + const claimId = fileInfo ? fileInfo.claim_id : null, + metadata = fileInfo ? fileInfo.metadata : null, showMenu = fileInfo && Object.keys(fileInfo).length > 0, title = metadata ? metadata.title : uri; @@ -25,7 +30,7 @@ class FileActions extends React.PureComponent { button="text" icon="icon-edit" label={__("Edit")} - onClick={() => editClaim({ name, channel })} + onClick={() => editClaim(claimId)} />} claim.name === name + claim => claim.claim_id === id ); } @@ -272,9 +273,10 @@ class PublishForm extends React.PureComponent { }); } - handlePrefillClicked() { - const claimInfo = this.myClaimInfo(); - const { source } = claimInfo.value.stream; + handlePrefillClaim(claimInfo) { + const { claim_id, name, channel_name, amount } = claimInfo; + const { source, metadata } = claimInfo.value.stream; + const { license, licenseUrl, @@ -283,17 +285,21 @@ class PublishForm extends React.PureComponent { description, language, nsfw, - } = claimInfo.value.stream.metadata; + } = metadata; let newState = { - mode: "edit", + id: claim_id, + channel: channel_name || "anonymous", + bid: amount, meta_title: title, meta_thumbnail: thumbnail, meta_description: description, meta_language: language, meta_nsfw: nsfw, + mode: "edit", prefillDone: true, - bid: claimInfo.amount, + rawName: name, + name, source, }; @@ -423,16 +429,11 @@ class PublishForm extends React.PureComponent { } componentWillMount() { - let { name, channel } = this.props.params; - - channel = channel || this.state.channel; - this.props.fetchClaimListMine(); this._updateChannelList(); - if (name) { - this.setState({ name, rawName: name, channel }); - } + const { id } = this.props.params; + this.setState({ id }); } componentDidMount() { @@ -461,37 +462,38 @@ class PublishForm extends React.PureComponent { } getNameBidHelpText() { - if (this.state.prefillDone) { + const { prefillDone, name, uri } = this.state; + const { resolvingUris } = this.props; + const claim = this.claim(); + + if (prefillDone) { return __("Existing claim data was prefilled"); } - if ( - this.state.uri && - this.props.resolvingUris.indexOf(this.state.uri) !== -1 && - this.claim() === undefined - ) { + if (uri && resolvingUris.indexOf(uri) !== -1 && claim === undefined) { return __("Checking..."); - } else if (!this.state.name) { + } else if (!name) { return __("Select a URL for this publish."); - } else if (!this.claim()) { + } else if (!claim) { return __("This URL is unused."); - } else if (this.myClaimExists() && !this.state.prefillDone) { + } else if (this.myClaimExists() && !prefillDone) { return ( {__("You already have a claim with this name.")}{" "} this.handlePrefillClicked()} + onClick={() => this.handleEditClaim()} /> ); - } else if (this.claim()) { - if (this.topClaimValue() === 1) { + } else if (claim) { + const topClaimValue = this.topClaimValue(); + if (topClaimValue === 1) { return ( {__( 'A deposit of at least one credit is required to win "%s". However, you can still get a permanent URL for any amount.', - this.state.name + name )} ); @@ -500,8 +502,8 @@ class PublishForm extends React.PureComponent { {__( 'A deposit of at least "%s" credits is required to win "%s". However, you can still get a permanent URL for any amount.', - this.topClaimValue(), - this.state.name + topClaimValue, + name )} ); diff --git a/ui/js/selectors/navigation.js b/ui/js/selectors/navigation.js index 08ae51774..f11f35eb9 100644 --- a/ui/js/selectors/navigation.js +++ b/ui/js/selectors/navigation.js @@ -87,7 +87,7 @@ export const selectPageTitle = createSelector( case "start": return __("Start"); case "publish": - return __("Publish"); + return params.id ? __("Edit") : __("Publish"); case "help": return __("Help"); case "developer": diff --git a/ui/js/selectors/search.js b/ui/js/selectors/search.js index e3c6fbb4a..4e02c2542 100644 --- a/ui/js/selectors/search.js +++ b/ui/js/selectors/search.js @@ -1,5 +1,9 @@ import { createSelector } from "reselect"; -import { selectPageTitle, selectCurrentPage } from "selectors/navigation"; +import { + selectPageTitle, + selectCurrentPage, + selectCurrentParams, +} from "selectors/navigation"; export const _selectState = state => state.search || {}; @@ -36,45 +40,49 @@ export const selectWunderBarAddress = createSelector( (page, title, query) => (page != "search" ? title : query ? query : title) ); -export const selectWunderBarIcon = createSelector(selectCurrentPage, page => { - switch (page) { - case "auth": - return "icon-user"; - case "search": - return "icon-search"; - case "settings": - return "icon-gear"; - case "help": - return "icon-question"; - case "report": - return "icon-file"; - case "downloaded": - return "icon-folder"; - case "published": - return "icon-folder"; - case "history": - return "icon-history"; - case "send": - return "icon-send"; - case "rewards": - return "icon-rocket"; - case "invite": - return "icon-envelope-open"; - case "address": - case "receive": - return "icon-address-book"; - case "wallet": - case "backup": - return "icon-bank"; - case "show": - return "icon-file"; - case "publish": - return "icon-upload"; - case "developer": - return "icon-code"; - case "discover": - return "icon-home"; - default: - return "icon-file"; +export const selectWunderBarIcon = createSelector( + selectCurrentPage, + selectCurrentParams, + (page, params) => { + switch (page) { + case "auth": + return "icon-user"; + case "search": + return "icon-search"; + case "settings": + return "icon-gear"; + case "help": + return "icon-question"; + case "report": + return "icon-file"; + case "downloaded": + return "icon-folder"; + case "published": + return "icon-folder"; + case "history": + return "icon-history"; + case "send": + return "icon-send"; + case "rewards": + return "icon-rocket"; + case "invite": + return "icon-envelope-open"; + case "address": + case "receive": + return "icon-address-book"; + case "wallet": + case "backup": + return "icon-bank"; + case "show": + return "icon-file"; + case "publish": + return params.id ? __("icon-pencil") : __("icon-upload"); + case "developer": + return "icon-code"; + case "discover": + return "icon-home"; + default: + return "icon-file"; + } } -}); +);