Move claim lookup on publish page into redux

ui/js/page/publish/index.js

@@ -6,8 +6,14 @@ import {
   selectMyClaims,
   selectFetchingMyChannels,
   selectMyChannelClaims,
+  selectClaimsByUri,
 } from "selectors/claims";
-import { doFetchClaimListMine, doFetchChannelListMine } from "actions/content";
+import { selectResolvingUris } from "selectors/content";
+import {
+  doFetchClaimListMine,
+  doFetchChannelListMine,
+  doResolveUri,
+} from "actions/content";
 import rewards from "rewards";
 import PublishPage from "./view";
 
@@ -15,6 +21,8 @@ const select = state => ({
   myClaims: selectMyClaims(state),
   fetchingChannels: selectFetchingMyChannels(state),
   channels: selectMyChannelClaims(state),
+  claimsByUri: selectClaimsByUri(state),
+  resolvingUris: selectResolvingUris(state),
 });
 
 const perform = dispatch => ({
@@ -24,6 +32,7 @@ const perform = dispatch => ({
   claimFirstChannelReward: () =>
     dispatch(doClaimRewardType(rewards.TYPE_FIRST_CHANNEL)),
   fetchChannelListMine: () => dispatch(doFetchChannelListMine()),
+  resolveUri: uri => dispatch(doResolveUri(uri)),
 });
 
 export default connect(select, perform)(PublishPage);

ui/js/page/publish/view.jsx

@@ -23,9 +23,6 @@ class PublishPage extends React.PureComponent {
       channel: "anonymous",
       newChannelName: "@",
       newChannelBid: 10,
-      nameResolved: null,
-      myClaimExists: null,
-      topClaimValue: 0.0,
       myClaimValue: 0.0,
       myClaimMetadata: null,
       copyrightNotice: "",
@@ -44,15 +41,6 @@ class PublishPage extends React.PureComponent {
     const { fetchingChannels, fetchChannelListMine } = this.props;
 
     if (!fetchingChannels) fetchChannelListMine();
-    // Calls API to update displayed list of channels. If a channel name is provided, will select
-    // that channel at the same time (used immediately after creating a channel)
-    // lbry.channel_list_mine().then(channels => {
-    //   this.props.claimFirstChannelReward();
-    //   this.setState({
-    //     channels: channels,
-    //     ...(channel ? { channel } : {}),
-    //   });
-    // });
   }
 
   handleSubmit(event) {
@@ -65,7 +53,7 @@ class PublishPage extends React.PureComponent {
     });
 
     let checkFields = this._requiredFields;
-    if (!this.state.myClaimExists) {
+    if (!this.myClaimExists()) {
       checkFields.unshift("file");
     }
 
@@ -182,6 +170,49 @@ class PublishPage extends React.PureComponent {
     });
   }
 
+  claim() {
+    const { claimsByUri } = this.props;
+    const { uri } = this.state;
+
+    return claimsByUri[uri];
+  }
+
+  topClaimValue() {
+    if (!this.claim()) return null;
+
+    return parseFloat(this.claim().amount);
+  }
+
+  myClaimExists() {
+    const { myClaims } = this.props;
+    const { name } = this.state;
+
+    if (!name) return false;
+
+    return !!myClaims.find(claim => claim.name === name);
+  }
+
+  topClaimIsMine() {
+    const myClaimInfo = this.myClaimInfo();
+    const { claimsByUri } = this.props;
+    const { uri } = this.state;
+
+    if (!uri) return null;
+
+    const claim = claimsByUri[uri];
+
+    if (!claim) return true;
+    if (!myClaimInfo) return false;
+
+    return myClaimInfo.amount >= claimInfo.amount;
+  }
+
+  myClaimInfo() {
+    return Object.values(this.props.myClaims).find(
+      claim => claim.name === name
+    );
+  }
+
   handleNameChange(event) {
     var rawName = event.target.value;
 
@@ -189,7 +220,7 @@ class PublishPage extends React.PureComponent {
       this.setState({
         rawName: "",
         name: "",
-        nameResolved: false,
+        uri: "",
       });
 
       return;
@@ -203,61 +234,14 @@ class PublishPage extends React.PureComponent {
     }
 
     const name = rawName.toLowerCase();
+    const uri = lbryuri.normalize(name);
     this.setState({
       rawName: rawName,
       name: name,
-      nameResolved: null,
+      uri,
-      myClaimExists: null,
     });
 
-    const myClaimInfo = Object.values(this.props.myClaims).find(
+    this.props.resolveUri(uri);
-      claim => claim.name === name
-    );
-
-    this.setState({
-      myClaimExists: !!myClaimInfo,
-    });
-    lbry.resolve({ uri: name }).then(
-      claimInfo => {
-        if (name != this.state.name) {
-          return;
-        }
-
-        if (!claimInfo) {
-          this.setState({
-            nameResolved: false,
-          });
-        } else {
-          const topClaimIsMine =
-            myClaimInfo && myClaimInfo.amount >= claimInfo.amount;
-          const newState = {
-            nameResolved: true,
-            topClaimValue: parseFloat(claimInfo.amount),
-            myClaimExists: !!myClaimInfo,
-            myClaimValue: myClaimInfo ? parseFloat(myClaimInfo.amount) : null,
-            myClaimMetadata: myClaimInfo ? myClaimInfo.value : null,
-            topClaimIsMine: topClaimIsMine,
-          };
-
-          if (topClaimIsMine) {
-            newState.bid = myClaimInfo.amount;
-          } else if (this.state.myClaimMetadata) {
-            // Just changed away from a name we have a claim on, so clear pre-fill
-            newState.bid = "";
-          }
-
-          this.setState(newState);
-        }
-      },
-      () => {
-        // Assume an error means the name is available
-        this.setState({
-          name: name,
-          nameResolved: false,
-          myClaimExists: false,
-        });
-      }
-    );
   }
 
   handleBidChange(event) {
@@ -427,22 +411,27 @@ class PublishPage extends React.PureComponent {
   }
 
   getNameBidHelpText() {
-    if (!this.state.name) {
+    if (
+      this.state.uri &&
+      this.props.resolvingUris.indexOf(this.state.uri) !== -1
+    ) {
+      return <BusyMessage />;
+    } else if (!this.state.name) {
       return __("Select a URL for this publish.");
-    } else if (this.state.nameResolved === false) {
+    } else if (!this.claim()) {
       return __("This URL is unused.");
-    } else if (this.state.myClaimExists) {
+    } else if (this.myClaimExists()) {
       return __(
         "You have already used this URL. Publishing to it again will update your previous publish."
       );
-    } else if (this.state.topClaimValue) {
+    } else if (this.topClaimValue()) {
       return (
         <span>
           {__n(
             'A deposit of at least "%s" credit is required to win "%s". However, you can still get a permanent URL for any amount.',
             'A deposit of at least "%s" credits is required to win "%s". However, you can still get a permanent URL for any amount.',
-            this.state.topClaimValue /*pluralization param*/,
+            this.topClaimValue() /*pluralization param*/,
-            this.state.topClaimValue,
+            this.topClaimValue(),
             this.state.name /*regular params*/
           )}
         </span>
@@ -487,7 +476,7 @@ class PublishPage extends React.PureComponent {
                   this.onFileChange(event);
                 }}
                 helper={
-                  this.state.myClaimExists
+                  this.myClaimExists()
                     ? __(
                         "If you don't choose a file, the file from your existing claim will be used."
                       )
@@ -820,11 +809,7 @@ class PublishPage extends React.PureComponent {
                       this.handleBidChange(event);
                     }}
                     value={this.state.bid}
-                    placeholder={
+                    placeholder={this.claim() ? this.topClaimValue() + 10 : 100}
-                      this.state.nameResolved
-                        ? this.state.topClaimValue + 10
-                        : 100
-                    }
                     helper={lbcInputHelp}
                   />
                 </div>
@@ -889,7 +874,7 @@ class PublishPage extends React.PureComponent {
         >
           <p>
             {__("Your file has been published to LBRY at the address")}
-            {" "}<code>lbry://{this.state.name}</code>!
+            {" "}<code>{this.state.uri}</code>!
           </p>
           <p>
             {__(

ui/js/selectors/claims.js

@@ -93,21 +93,33 @@ export const selectClaimListMineIsPending = createSelector(
   state => state.isClaimListMinePending
 );
 
-export const selectMyClaims = createSelector(
+export const selectMyClaimsRaw = createSelector(
   _selectState,
   state => state.myClaims || new Set()
 );
 
+export const selectMyClaims = createSelector(
+  selectMyClaimsRaw,
+  selectClaimsById,
+  (myClaimIds, byId) => {
+    const claims = [];
+
+    myClaimIds.forEach(id => {
+      const claim = byId[id];
+
+      if (claim) claims.push(claim);
+    });
+
+    return claims;
+  }
+);
+
 export const selectMyClaimsOutpoints = createSelector(
   selectMyClaims,
-  selectClaimsById,
+  myClaims => {
-  (claimIds, byId) => {
     const outpoints = [];
 
-    claimIds.forEach(claimId => {
+    myClaims.forEach(claim => outpoints.push(`${claim.txid}:${claim.nout}`));
-      const claim = byId[claimId];
-      if (claim) outpoints.push(`${claim.txid}:${claim.nout}`);
-    });
 
     return outpoints;
   }