Cancel resolving URis when unmounting discover/file list pages

ui/js/actions/content.js

@@ -50,6 +50,37 @@ export function doResolveUri(uri) {
   };
 }
 
+export function doCancelResolveUri(uri) {
+  return function(dispatch, getState) {
+    uri = lbryuri.normalize(uri);
+
+    const state = getState();
+    const alreadyResolving = selectResolvingUris(state).indexOf(uri) !== -1;
+
+    if (alreadyResolving) {
+      lbry.cancelResolve({ uri });
+      dispatch({
+        type: types.RESOLVE_URI_CANCELED,
+        data: {
+          uri,
+        },
+      });
+    }
+  };
+}
+
+export function doCancelAllResolvingUris() {
+  return function(dispatch, getState) {
+    const state = getState();
+    const resolvingUris = selectResolvingUris(state);
+    const actions = [];
+
+    resolvingUris.forEach(uri => actions.push(doCancelResolveUri(uri)));
+
+    dispatch(batchActions(...actions));
+  };
+}
+
 export function doFetchFeaturedUris() {
   return function(dispatch, getState) {
     const state = getState();

ui/js/constants/action_types.js

@@ -40,6 +40,7 @@ export const FETCH_FEATURED_CONTENT_COMPLETED =
   "FETCH_FEATURED_CONTENT_COMPLETED";
 export const RESOLVE_URI_STARTED = "RESOLVE_URI_STARTED";
 export const RESOLVE_URI_COMPLETED = "RESOLVE_URI_COMPLETED";
+export const RESOLVE_URI_CANCELED = "RESOLVE_URI_CANCELED";
 export const FETCH_CHANNEL_CLAIMS_STARTED = "FETCH_CHANNEL_CLAIMS_STARTED";
 export const FETCH_CHANNEL_CLAIMS_COMPLETED = "FETCH_CHANNEL_CLAIMS_COMPLETED";
 export const FETCH_CLAIM_LIST_MINE_STARTED = "FETCH_CLAIM_LIST_MINE_STARTED";

ui/js/page/discover/index.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
-import { doFetchFeaturedUris } from "actions/content";
+import { doFetchFeaturedUris, doCancelAllResolvingUris } from "actions/content";
 import {
   selectFeaturedUris,
   selectFetchingFeaturedUris,
@@ -14,6 +14,7 @@ const select = state => ({
 
 const perform = dispatch => ({
   fetchFeaturedUris: () => dispatch(doFetchFeaturedUris()),
+  cancelResolvingUris: () => dispatch(doCancelAllResolvingUris()),
 });
 
 export default connect(select, perform)(DiscoverPage);

ui/js/page/discover/view.jsx

@@ -39,6 +39,10 @@ class DiscoverPage extends React.PureComponent {
     this.props.fetchFeaturedUris();
   }
 
+  componentWillUnmount() {
+    this.props.cancelResolvingUris();
+  }
+
   render() {
     const { featuredUris, fetchingFeaturedUris } = this.props;
     const failedToLoad =
@@ -62,7 +66,9 @@ class DiscoverPage extends React.PureComponent {
                 : ""
           )}
         {failedToLoad &&
-          <div className="empty">{__("Failed to load landing content.")}</div>}
+          <div className="empty">
+            {__("Failed to load landing content.")}
+          </div>}
       </main>
     );
   }

ui/js/page/fileListDownloaded/index.js

@@ -6,6 +6,7 @@ import {
   selectFileListDownloadedOrPublishedIsPending,
 } from "selectors/file_info";
 import { doNavigate } from "actions/app";
+import { doCancelAllResolvingUris } from "actions/content";
 import FileListDownloaded from "./view";
 
 const select = state => ({
@@ -17,6 +18,7 @@ const perform = dispatch => ({
   navigate: path => dispatch(doNavigate(path)),
   fetchFileInfosDownloaded: () =>
     dispatch(doFetchFileInfosAndPublishedClaims()),
+  cancelResolvingUris: () => dispatch(doCancelAllResolvingUris()),
 });
 
 export default connect(select, perform)(FileListDownloaded);

ui/js/page/fileListDownloaded/view.jsx

@@ -15,6 +15,10 @@ class FileListDownloaded extends React.PureComponent {
     if (!this.props.isPending) this.props.fetchFileInfosDownloaded();
   }
 
+  componentWillUnmount() {
+    this.props.cancelResolvingUris();
+  }
+
   render() {
     const { fileInfos, isPending, navigate } = this.props;
 
@@ -27,8 +31,7 @@ class FileListDownloaded extends React.PureComponent {
       } else {
         content = (
           <span>
-            {__("You haven't downloaded anything from LBRY yet. Go")}
+            {__("You haven't downloaded anything from LBRY yet. Go")}{" "}
-            {" "}
             <Link
               onClick={() => navigate("/discover")}
               label={__("search for your first download")}

ui/js/page/fileListPublished/index.js

@@ -8,6 +8,7 @@ import {
 } from "selectors/file_info";
 import { doClaimRewardType } from "actions/rewards";
 import { doNavigate } from "actions/app";
+import { doCancelAllResolvingUris } from "actions/content";
 import FileListPublished from "./view";
 
 const select = state => ({
@@ -20,6 +21,7 @@ const perform = dispatch => ({
   fetchFileListPublished: () => dispatch(doFetchFileInfosAndPublishedClaims()),
   claimFirstPublishReward: () =>
     dispatch(doClaimRewardType(rewards.TYPE_FIRST_PUBLISH)),
+  cancelResolvingUris: () => dispatch(doCancelAllResolvingUris()),
 });
 
 export default connect(select, perform)(FileListPublished);

ui/js/page/fileListPublished/view.jsx

@@ -19,6 +19,10 @@ class FileListPublished extends React.PureComponent {
     if (this.props.fileInfos.length > 0) this.props.claimFirstPublishReward();
   }
 
+  componentWillUnmount() {
+    this.props.cancelResolvingUris();
+  }
+
   render() {
     const { fileInfos, isPending, navigate } = this.props;
 
@@ -38,8 +42,9 @@ class FileListPublished extends React.PureComponent {
       } else {
         content = (
           <span>
-            {__("It looks like you haven't published anything to LBRY yet. Go")}
+            {__(
-            {" "}
+              "It looks like you haven't published anything to LBRY yet. Go"
+            )}{" "}
             <Link
               onClick={() => navigate("/publish")}
               label={__("share your beautiful cats with the world")}

ui/js/reducers/content.js

@@ -31,7 +31,9 @@ reducers[types.RESOLVE_URI_STARTED] = function(state, action) {
   });
 };
 
-reducers[types.RESOLVE_URI_COMPLETED] = function(state, action) {
+reducers[types.RESOLVE_URI_CANCELED] = reducers[
+  types.RESOLVE_URI_COMPLETED
+] = function(state, action) {
   const { uri } = action.data;
   const resolvingUris = state.resolvingUris;
   const index = state.resolvingUris.indexOf(uri);
@@ -45,10 +47,6 @@ reducers[types.RESOLVE_URI_COMPLETED] = function(state, action) {
   });
 };
 
-reducers[types.RESOLVE_URI_CANCELED] = function(state, action) {
-  return reducers[types.RESOLVE_URI_COMPLETED](state, action);
-};
-
 export default function reducer(state = defaultState, action) {
   const handler = reducers[action.type];
   if (handler) return handler(state, action);