Merge pull request #113 from lbryio/back-navigation-tweaks

back navigation fixes and tweaks

src/constants.js

@@ -64,6 +64,8 @@ const Constants = {
   ACTION_CLEAR_PUBLISH_FORM_STATE: 'CLEAR_PUBLISH_FORM_STATE',
   ACTION_CLEAR_CHANNEL_FORM_STATE: 'CLEAR_CHANNEL_FORM_STATE',
 
+  ACTION_SET_EXPLICIT_NAVIGATE_BACK: 'SET_EXPLICIT_NAVIGATE_BACK',
+
   ACTION_FULLSCREEN_MODE_TOGGLED: 'FULLSCREEN_MODE_TOGGLED',
 
   ORIENTATION_HORIZONTAL: 'horizontal',

src/page/channel/view.js

@@ -173,9 +173,10 @@ class ChannelPage extends React.PureComponent {
       const { permanent_url: permanentUrl } = claim;
       navigation.navigate({
         routeName: Constants.DRAWER_ROUTE_CHANNEL_CREATOR,
-        params: { editChannelUrl: permanentUrl },
+        params: { editChannelUrl: permanentUrl, returnUrl: permanentUrl },
       });
     }
+    this.onEditPressed = null;
   };
 
   onTipPressed = () => {
@@ -210,7 +211,7 @@ class ChannelPage extends React.PureComponent {
             },
           },
         ],
-        { cancelable: true }
+        { cancelable: true },
       );
     }
   };

src/page/channelCreator/index.js

@@ -13,7 +13,12 @@ import {
   doToast,
 } from 'lbry-redux';
 import { doGetSync } from 'lbryinc';
-import { doPushDrawerStack, doPopDrawerStack, doSetPlayerVisible } from 'redux/actions/drawer';
+import {
+  doPushDrawerStack,
+  doPopDrawerStack,
+  doSetPlayerVisible,
+  doSetExplicitNavigateBack,
+} from 'redux/actions/drawer';
 import { doUpdateChannelFormState, doClearChannelFormState } from 'redux/actions/form';
 import { selectDrawerStack } from 'redux/selectors/drawer';
 import { selectChannelFormState, selectHasChannelFormState } from 'redux/selectors/form';
@@ -44,9 +49,10 @@ const perform = dispatch => ({
   pushDrawerStack: (routeName, params) => dispatch(doPushDrawerStack(routeName, params)),
   popDrawerStack: () => dispatch(doPopDrawerStack()),
   setPlayerVisible: () => dispatch(doSetPlayerVisible(false)),
+  setExplicitNavigateBack: flag => dispatch(doSetExplicitNavigateBack(flag)),
 });
 
 export default connect(
   select,
-  perform
+  perform,
 )(ChannelCreator);

src/page/channelCreator/view.js

@@ -14,7 +14,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import { navigateToUri, logPublish, uploadImageAsset } from 'utils/helper';
+import { navigateBack, navigateToUri, logPublish, uploadImageAsset } from 'utils/helper';
 import Button from 'component/button';
 import ChannelIconItem from 'component/channelIconItem';
 import ChannelRewardsDriver from 'component/channelRewardsDriver';
@@ -37,6 +37,7 @@ export default class ChannelCreator extends React.PureComponent {
 
   state = {
     autoStyle: null,
+    returnUrl: null,
     canSave: true,
     claimId: null,
     creditsInputFocused: false,
@@ -77,6 +78,7 @@ export default class ChannelCreator extends React.PureComponent {
     descriptionFocused: false,
     websiteFocused: false,
     emailFocused: false,
+    hasReturnedBack: false,
   };
 
   didFocusListener;
@@ -118,7 +120,14 @@ export default class ChannelCreator extends React.PureComponent {
   };
 
   componentWillReceiveProps(nextProps) {
-    const { currentRoute: prevRoute, drawerStack: prevDrawerStack, notify } = this.props;
+    const {
+      currentRoute: prevRoute,
+      drawerStack: prevDrawerStack,
+      popDrawerStack,
+      setPlayerVisible,
+      navigation,
+      notify,
+    } = this.props;
     const { currentRoute, drawerStack, updatingChannel, updateChannelError } = nextProps;
 
     if (Constants.DRAWER_ROUTE_CHANNEL_CREATOR === currentRoute && currentRoute !== prevRoute) {
@@ -142,6 +151,11 @@ export default class ChannelCreator extends React.PureComponent {
     ) {
       // navigated back from the form
       this.setState({ currentPhase: Constants.PHASE_LIST });
+      if (!this.state.hasReturnedBack && this.state.returnUrl) {
+        this.setState({ hasReturnedBack: true }, () => {
+          navigateBack(navigation, drawerStack, popDrawerStack, setPlayerVisible);
+        });
+      }
     }
   }
 
@@ -171,11 +185,12 @@ export default class ChannelCreator extends React.PureComponent {
 
       let isEditMode = false;
       if (navigation.state.params) {
-        const { editChannelUrl, displayForm } = navigation.state.params;
+        const { editChannelUrl, displayForm, returnUrl } = navigation.state.params;
         if (editChannelUrl) {
           isEditMode = true;
           this.setState({ editChannelUrl, currentPhase: Constants.PHASE_CREATE });
         }
+        this.setState({ returnUrl });
       }
 
       if (!isEditMode && hasFormState) {

src/page/discover/view.js

@@ -86,8 +86,10 @@ class DiscoverPage extends React.PureComponent {
   }
 
   onComponentFocused = () => {
-    const { pushDrawerStack, setPlayerVisible } = this.props;
-    // pushDrawerStack();
+    const { pushDrawerStack, setPlayerVisible, currentRoute } = this.props;
+    if (currentRoute === Constants.DRAWER_ROUTE_DISCOVER) {
+      pushDrawerStack();
+    }
 
     NativeModules.Firebase.setCurrentScreen('Your tags');
     setPlayerVisible();

src/page/file/view.js

@@ -360,7 +360,11 @@ class FilePage extends React.PureComponent {
 
   onEditPressed = () => {
     const { claim, navigation } = this.props;
-    navigation.navigate({ routeName: Constants.DRAWER_ROUTE_PUBLISH, params: { editMode: true, claimToEdit: claim } });
+    const uri = this.state.uri || this.getPurchaseUrl();
+    navigation.navigate({
+      routeName: Constants.DRAWER_ROUTE_PUBLISH,
+      params: { editMode: true, claimToEdit: claim, returnUrl: uri },
+    });
   };
 
   onDeletePressed = () => {

src/page/publish/view.js

@@ -47,7 +47,7 @@ import Tag from 'component/tag';
 import TagSearch from 'component/tagSearch';
 import UriBar from 'component/uriBar';
 import publishStyle from 'styles/publish';
-import { navigateToUri, logPublish, uploadImageAsset } from 'utils/helper';
+import { navigateToUri, navigateBack, logPublish, uploadImageAsset } from 'utils/helper';
 
 const languages = {
   en: 'English',
@@ -141,6 +141,8 @@ class PublishPage extends React.PureComponent {
     // other
     publishStarted: false,
     storagePermissionRequired: false,
+    hasReturnedBack: false,
+    returnUrl: null,
   };
 
   didFocusListener;
@@ -236,7 +238,7 @@ class PublishPage extends React.PureComponent {
       let isEditMode = false,
         vanityUrlSet = false;
       if (navigation.state.params) {
-        const { displayForm, editMode, claimToEdit, vanityUrl } = navigation.state.params;
+        const { displayForm, editMode, claimToEdit, vanityUrl, returnUrl } = navigation.state.params;
         if (editMode) {
           this.prepareEdit(claimToEdit);
           isEditMode = true;
@@ -250,6 +252,7 @@ class PublishPage extends React.PureComponent {
             vanityUrl: claimName,
           });
         }
+        this.setState({ returnUrl });
       }
 
       if (!isEditMode && hasFormState) {
@@ -472,7 +475,15 @@ class PublishPage extends React.PureComponent {
   }
 
   componentWillReceiveProps(nextProps) {
-    const { currentRoute: prevRoute, drawerStack: prevDrawerStack, notify, updatePublishFormState } = this.props;
+    const {
+      currentRoute: prevRoute,
+      drawerStack: prevDrawerStack,
+      popDrawerStack,
+      setPlayerVisible,
+      navigation,
+      notify,
+      updatePublishFormState,
+    } = this.props;
     const { currentRoute, drawerStack, publishFormValues } = nextProps;
 
     if (Constants.DRAWER_ROUTE_PUBLISH === currentRoute && currentRoute !== prevRoute) {
@@ -486,6 +497,11 @@ class PublishPage extends React.PureComponent {
     ) {
       // navigated back from the form
       this.showSelector();
+      if (!this.state.hasReturnedBack && this.state.returnUrl) {
+        this.setState({ hasReturnedBack: true }, () => {
+          navigateBack(navigation, drawerStack, popDrawerStack, setPlayerVisible);
+        });
+      }
     }
   }
 

src/redux/reducers/drawer.js

@@ -42,6 +42,9 @@ reducers[Constants.ACTION_PUSH_DRAWER_STACK] = (state, action) => {
   if (lastRoute === Constants.DRAWER_ROUTE_PUBLISH_FORM && routeName === Constants.DRAWER_ROUTE_PUBLISH) {
     canPushStack = false;
   }
+  if (routeName === Constants.DRAWER_ROUTE_DISCOVER && newStack.length === 1) {
+    canPushStack = false;
+  }
 
   let lastRouteInStack;
   if (canPushStack) {

src/utils/helper.js

@@ -170,6 +170,7 @@ export function navigateBack(navigation, drawerStack, popDrawerStack, setPlayerV
   if (popDrawerStack) {
     popDrawerStack();
   }
+
   if (setPlayerVisible) {
     setPlayerVisible(false);
   }
@@ -177,6 +178,7 @@ export function navigateBack(navigation, drawerStack, popDrawerStack, setPlayerV
   const target = drawerStack[drawerStack.length > 1 ? drawerStack.length - 2 : 0];
   const { route, params } = target;
   navigation.goBack(navigation.state.key);
+
   if (!DrawerRoutes.includes(route) && !InnerDrawerRoutes.includes(route) && isURIValid(route)) {
     navigateToUri(navigation, route, null, true, null, setPlayerVisible);
   } else {
@@ -186,7 +188,7 @@ export function navigateBack(navigation, drawerStack, popDrawerStack, setPlayerV
       if (Constants.DRAWER_ROUTE_CHANNEL_CREATOR_FORM === route) {
         targetRoute = Constants.DRAWER_ROUTE_CHANNEL_CREATOR;
       } else if (Constants.DRAWER_ROUTE_PUBLISH_FORM === route) {
-        targetRoute = Constants.DRAWER_ROUTE_PUBLISH_FORM;
+        targetRoute = Constants.DRAWER_ROUTE_PUBLISH;
       }
 
       if (targetParams) {
@@ -201,8 +203,15 @@ export function navigateBack(navigation, drawerStack, popDrawerStack, setPlayerV
 }
 
 export function dispatchNavigateBack(dispatch, nav, drawerStack) {
-  if (drawerStack[drawerStack.length - 1].route === Constants.DRAWER_ROUTE_FILE_VIEW) {
-    // inner file_view (web / image view) is handled differently
+  const currentRoute = drawerStack[drawerStack.length - 1].route;
+  if (
+    [
+      Constants.DRAWER_ROUTE_FILE_VIEW,
+      Constants.DRAWER_ROUTE_CHANNEL_CREATOR_FORM,
+      Constants.DRAWER_ROUTE_PUBLISH_FORM,
+    ].includes(currentRoute)
+  ) {
+    // inner routes are handled a little differently
     dispatch(doPopDrawerStack());
     return;
   }
@@ -223,7 +232,7 @@ export function dispatchNavigateBack(dispatch, nav, drawerStack) {
       if (Constants.DRAWER_ROUTE_CHANNEL_CREATOR_FORM === route) {
         targetRoute = Constants.DRAWER_ROUTE_CHANNEL_CREATOR;
       } else if (Constants.DRAWER_ROUTE_PUBLISH_FORM === route) {
-        targetRoute = Constants.DRAWER_ROUTE_PUBLISH_FORM;
+        targetRoute = Constants.DRAWER_ROUTE_PUBLISH;
       }
 
       if (targetParams) {