improve handling of pending claims

src/page/publish/index.js

@@ -5,10 +5,11 @@ import {
   doToast,
   doUpdatePublishForm,
   selectBalance,
+  selectMyClaims,
   selectPublishFormValues,
 } from 'lbry-redux';
 import { selectDrawerStack } from 'redux/selectors/drawer';
-import { doUpdatePublishFormState, doClearPublishFormState } from 'redux/actions/form';
+import { doUpdatePublishFormState, doClearPublishFormState, doPendingPublishSuccess } from 'redux/actions/form';
 import { doPushDrawerStack, doPopDrawerStack, doSetPlayerVisible } from 'redux/actions/drawer';
 import { selectPublishFormState, selectHasPublishFormState } from 'redux/selectors/form';
 import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
@@ -18,6 +19,7 @@ const select = state => ({
   balance: selectBalance(state),
   drawerStack: selectDrawerStack(state),
   hasFormState: selectHasPublishFormState(state),
+  myClaims: selectMyClaims(state),
   publishFormState: selectPublishFormState(state),
   publishFormValues: selectPublishFormValues(state),
 });
@@ -25,6 +27,7 @@ const select = state => ({
 const perform = dispatch => ({
   notify: data => dispatch(doToast(data)),
   clearPublishFormState: () => dispatch(doClearPublishFormState()),
+  pendingPublishSuccess: pendingClaim => dispatch(doPendingPublishSuccess(pendingClaim)),
   updatePublishForm: value => dispatch(doUpdatePublishForm(value)),
   updatePublishFormState: data => dispatch(doUpdatePublishFormState(data)),
   publish: (success, fail) => dispatch(doPublish(success, fail)),

src/page/publish/view.js

@@ -17,10 +17,12 @@ import {
 import { FlatGrid } from 'react-native-super-grid';
 import {
   isNameValid,
+  batchActions,
   buildURI,
   normalizeURI,
   parseURI,
   regexInvalidURI,
+  ACTIONS,
   CLAIM_VALUES,
   LICENSES,
   MATURE_TAGS,
@@ -394,11 +396,11 @@ class PublishPage extends React.PureComponent {
   };
 
   handlePublishSuccess = data => {
-    const { clearPublishFormState, navigation, notify } = this.props;
+    const { clearPublishFormState, navigation, notify, pendingPublishSuccess } = this.props;
     const pendingClaim = data.outputs[0];
     logPublish(pendingClaim);
 
-    // TODO: fake temp claim for claim_list_mine
+    pendingPublishSuccess(pendingClaim);
 
     notify({
       message: `Your content was successfully published to ${this.state.uri}. It will be available in a few mintues.`,

src/page/publishes/index.js

@@ -3,7 +3,9 @@ import {
   doAbandonClaim,
   doCheckPendingPublishes,
   doFetchClaimListMine,
+  doToast,
   selectMyClaimUrisWithoutChannels,
+  selectPendingClaims,
   selectIsFetchingClaimListMine,
 } from 'lbry-redux';
 import { doPushDrawerStack, doSetPlayerVisible } from 'redux/actions/drawer';
@@ -13,12 +15,14 @@ import PublishesPage from './view';
 const select = state => ({
   uris: selectMyClaimUrisWithoutChannels(state),
   fetching: selectIsFetchingClaimListMine(state),
+  pendingClaims: selectPendingClaims(state),
 });
 
 const perform = dispatch => ({
   abandonClaim: (txid, nout) => dispatch(doAbandonClaim(txid, nout)),
   fetchMyClaims: () => dispatch(doFetchClaimListMine()),
   checkPendingPublishes: () => dispatch(doCheckPendingPublishes()),
+  notify: data => dispatch(doToast(data)),
   pushDrawerStack: () => dispatch(doPushDrawerStack(Constants.DRAWER_ROUTE_PUBLISHES)),
   setPlayerVisible: () => dispatch(doSetPlayerVisible(false)),
 });

src/page/publishes/view.js

@@ -8,7 +8,7 @@ import FileListItem from 'component/fileListItem';
 import FloatingWalletBalance from 'component/floatingWalletBalance';
 import UriBar from 'component/uriBar';
 import publishStyle from 'styles/publish';
-import { __, navigateToUri } from 'utils/helper';
+import { __, isClaimInList, navigateToUri } from 'utils/helper';
 
 class PublishesPage extends React.PureComponent {
   state = {
@@ -54,6 +54,8 @@ class PublishesPage extends React.PureComponent {
   };
 
   addOrRemoveItem = (uri, claim) => {
+    const { pendingClaims } = this.state;
+
     const { selectedClaimsMap } = this.state;
     let selectedUris = [...this.state.selectedUris];
 
@@ -172,8 +174,15 @@ class PublishesPage extends React.PureComponent {
                   if (selectionMode) {
                     this.handleSelectItem(item, claim);
                   } else {
-                    // TODO: when shortUrl is available for my claims, navigate to that URL instead
-                    navigateToUri(navigation, item);
+                    const { notify, pendingClaims } = this.props;
+                    if (isClaimInList(claim, pendingClaims)) {
+                      notify({
+                        message: __('This content is currently pending. It will be available in a few minutes.'),
+                      });
+                    } else {
+                      // TODO: when shortUrl is available for my claims, navigate to that URL instead
+                      navigateToUri(navigation, item);
+                    }
                   }
                 }}
                 onLongPress={claim => this.handleItemLongPress(item, claim)}

src/redux/actions/form.js

@@ -1,4 +1,5 @@
 import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
+import { ACTIONS, batchActions, selectMyClaims } from 'lbry-redux';
 
 export const doUpdatePublishFormState = publishFormValue => dispatch =>
   dispatch({
@@ -21,3 +22,31 @@ export const doClearChannelFormState = () => dispatch =>
   dispatch({
     type: Constants.ACTION_CLEAR_CHANNEL_FORM_STATE,
   });
+
+export const doPendingPublishSuccess = pendingClaim => (dispatch, getState) => {
+  const state = getState();
+  const myClaims = selectMyClaims(state);
+  const { permanent_url: url } = pendingClaim;
+  const actions = [
+    {
+      type: ACTIONS.PUBLISH_SUCCESS,
+    },
+  ];
+
+  // We have to fake a temp claim until the new pending one is returned by claim_list_mine
+  // We can't rely on claim_list_mine because there might be some delay before the new claims are returned
+  // Doing this allows us to show the pending claim immediately, it will get overwritten by the real one
+  const isMatch = claim => claim.claim_id === pendingClaim.claim_id;
+  const isEdit = myClaims.some(isMatch);
+
+  const myNewClaims = isEdit
+    ? myClaims.map(claim => (isMatch(claim) ? pendingClaim : claim))
+    : myClaims.concat(pendingClaim);
+  actions.push({
+    type: ACTIONS.FETCH_CLAIM_LIST_MINE_COMPLETED,
+    data: {
+      claims: myNewClaims,
+    },
+  });
+  dispatch(batchActions(...actions));
+};

src/utils/helper.js

@@ -346,3 +346,14 @@ export function uploadImageAsset(filePath, success, failure) {
       }
     });
 }
+
+// TODO: This method already exists elsewhere?
+export function isClaimInList(claim, claims = []) {
+  for (let i = 0; i < claims.length; i++) {
+    if (claims[i].claim_id === claim.claim_id) {
+      return true;
+    }
+  }
+
+  return false;
+}