improved back navigation with file URIs and drawer menu items (#443)

.travis.yml

@@ -28,7 +28,7 @@ install:
 - cd ..
 - mv buildozer.spec.travis buildozer.spec
 - mkdir -p cd ~/.buildozer/android/platform/
-- wget -q 'https://us.crystax.net/download/crystax-ndk-10.3.2-linux-x86_64.tar.xz' -P ~/.buildozer/android/
+- wget -q 'https://dist.testnet.lbry.tech/crystax-ndk-10.3.2-linux-x86_64.tar.xz' -P ~/.buildozer/android/
 - wget -q 'https://dl.google.com/android/android-sdk_r23-linux.tgz' -P ~/.buildozer/android/platform/
 - wget -q 'https://dl.google.com/android/repository/platform-27_r01.zip' -P ~/.buildozer/android/platform/
 - wget -q 'https://dl.google.com/android/repository/build-tools_r26.0.1-linux.zip' -P ~/.buildozer/android/platform/

app/src/component/AppNavigator.js

@@ -33,7 +33,6 @@ import {
   TextInput,
   ToastAndroid
 } from 'react-native';
-import { doPopDrawerStack } from 'redux/actions/drawer';
 import { doDeleteCompleteBlobs } from 'redux/actions/file';
 import { selectDrawerStack } from 'redux/selectors/drawer';
 import { SETTINGS, doDismissToast, doToast, selectToast } from 'lbry-redux';
@@ -246,7 +245,7 @@ class AppWithNavigationState extends React.Component {
   componentWillMount() {
     AppState.addEventListener('change', this._handleAppStateChange);
     BackHandler.addEventListener('hardwareBackPress', function() {
-      const { dispatch, nav, drawerStack, popDrawerStack } = this.props;
+      const { dispatch, nav, drawerStack } = this.props;
       // There should be a better way to check this
       if (nav.routes.length > 0) {
         if (nav.routes[0].routeName === 'Main') {
@@ -255,7 +254,7 @@ class AppWithNavigationState extends React.Component {
               mainRoute.routes[0].index > 0 /* Discover stack index */ ||
               mainRoute.routes[4].index > 0 /* Wallet stack index */ ||
               mainRoute.index >= 5 /* Settings and About screens */) {
-            dispatchNavigateBack(dispatch, nav, drawerStack, doPopDrawerStack);
+            dispatchNavigateBack(dispatch, nav, drawerStack);
             return true;
           }
         }

app/src/constants.js

@@ -27,6 +27,8 @@ const Constants = {
   DRAWER_ROUTE_WALLET: "Wallet",
   DRAWER_ROUTE_SETTINGS: "Settings",
   DRAWER_ROUTE_ABOUT: "About",
+  DRAWER_ROUTE_SEARCH: "Search",
+  DRAWER_ROUTE_TRANSACTION_HISTORY: "TransactionHistory",
 
   SUBSCRIPTIONS_VIEW_ALL: 'view_all',
   SUBSCRIPTIONS_VIEW_LATEST_FIRST: 'view_latest_first',
@@ -45,5 +47,7 @@ export const DrawerRoutes = [
   Constants.DRAWER_ROUTE_REWARDS,
   Constants.DRAWER_ROUTE_WALLET,
   Constants.DRAWER_ROUTE_SETTINGS,
-  Constants.DRAWER_ROUTE_ABOUT
+  Constants.DRAWER_ROUTE_ABOUT,
+  Constants.DRAWER_ROUTE_SEARCH,
+  Constants.DRAWER_ROUTE_TRANSACTION_HISTORY
 ];

app/src/page/search/index.js

@@ -5,6 +5,8 @@ import {
   selectIsSearching,
   selectSearchValue
 } from 'lbry-redux';
+import { doPushDrawerStack } from 'redux/actions/drawer';
+import Constants from 'constants';
 import SearchPage from './view';
 
 const select = (state) => ({
@@ -14,7 +16,8 @@ const select = (state) => ({
 });
 
 const perform = dispatch => ({
-  search: (query) => dispatch(doSearch(query, 25))
+  search: (query) => dispatch(doSearch(query, 25)),
+  pushDrawerStack: () => dispatch(doPushDrawerStack(Constants.DRAWER_ROUTE_SEARCH)),
 });
 
 export default connect(select, perform)(SearchPage);

app/src/page/search/view.js

@@ -21,6 +21,10 @@ class SearchPage extends React.PureComponent {
     title: 'Search Results'
   };
 
+  componentWillMount() {
+    this.props.pushDrawerStack();
+  }
+
   componentDidMount() {
     const { navigation, search } = this.props;
     const { searchQuery } = navigation.state.params;

app/src/page/transactionHistory/index.js

@@ -4,6 +4,7 @@ import {
   selectTransactionItems,
   selectIsFetchingTransactions,
 } from 'lbry-redux';
+import { doPushDrawerStack } from 'redux/actions/drawer';
 import TransactionHistoryPage from './view';
 
 const select = state => ({
@@ -13,6 +14,7 @@ const select = state => ({
 
 const perform = dispatch => ({
   fetchTransactions: () => dispatch(doFetchTransactions()),
+  pushDrawerStack: () => dispatch(doPushDrawerStack(Constants.DRAWER_ROUTE_TRANSACTION_HISTORY)),
 });
 
 export default connect(select, perform)(TransactionHistoryPage);

app/src/page/transactionHistory/view.js

@@ -4,6 +4,10 @@ import TransactionList from '../../component/transactionList';
 import walletStyle from '../../styles/wallet';
 
 class TransactionHistoryPage extends React.PureComponent {
+  componentWillMount() {
+    this.props.pushDrawerStack();
+  }
+
   componentDidMount() {
     this.props.fetchTransactions();
   }

app/src/redux/reducers/drawer.js

@@ -9,7 +9,7 @@ reducers[Constants.ACTION_PUSH_DRAWER_STACK] = (state, action) => {
   const routeName = action.data;
   const newStack = state.stack.slice();
 
-  if (routeName !== newStack[newStack.length -1]) {
+  if (routeName !== newStack[newStack.length - 1]) {
     newStack.push(routeName);
   }
 

app/src/utils/helper.js

@@ -1,5 +1,6 @@
 import { NavigationActions, StackActions } from 'react-navigation';
-import { buildURI } from 'lbry-redux';
+import { buildURI, isURIValid } from 'lbry-redux';
+import { doPopDrawerStack, doPushDrawerStack } from 'redux/actions/drawer';
 import { DrawerRoutes } from 'constants';
 import Constants from 'constants';
 
@@ -18,7 +19,7 @@ function getRouteForSpecialUri(uri) {
   return targetRoute;
 }
 
-export function dispatchNavigateToUri(dispatch, nav, uri) {
+export function dispatchNavigateToUri(dispatch, nav, uri, isNavigatingBack) {
   if (uri.startsWith('lbry://?')) {
     dispatch(NavigationActions.navigate({ routeName: getRouteForSpecialUri(uri) }));
     return;
@@ -32,6 +33,11 @@ export function dispatchNavigateToUri(dispatch, nav, uri) {
   }
 
   const params = { uri, uriVars };
+
+  if (!isNavigatingBack) {
+    dispatch(doPushDrawerStack(uri));
+  }
+
   if (nav && nav.routes && nav.routes.length > 0 && 'Main' === nav.routes[0].routeName) {
     const mainRoute = nav.routes[0];
     const discoverRoute = mainRoute.routes[0];
@@ -86,7 +92,7 @@ function parseUriVars(vars) {
   return uriVars;
 }
 
-export function navigateToUri(navigation, uri, additionalParams) {
+export function navigateToUri(navigation, uri, additionalParams, isNavigatingBack) {
   if (!navigation) {
     return;
   }
@@ -107,49 +113,49 @@ export function navigateToUri(navigation, uri, additionalParams) {
     uriVars = parseUriVars(uriVarsStr);
   }
 
+  const { store } = window;
   const params = Object.assign({ uri, uriVars }, additionalParams);
   if ('File' === navigation.state.routeName) {
     const stackAction = StackActions.replace({ routeName: 'File', newKey: uri, params });
     navigation.dispatch(stackAction);
+    if (store && store.dispatch && !isNavigatingBack) {
+      store.dispatch(doPushDrawerStack(uri));
+    }
     return;
   }
 
   navigation.navigate({ routeName: 'File', key: uri, params });
+  if (store && store.dispatch && !isNavigatingBack) {
+    store.dispatch(doPushDrawerStack(uri));
+  }
 }
 
 export function navigateBack(navigation, drawerStack, popDrawerStack) {
-  const shouldPopStack = DrawerRoutes.indexOf(navigation.state.routeName) > -1;
-  if (shouldPopStack) {
-    navigation.goBack();
   if (popDrawerStack) {
     popDrawerStack();
   }
 
-    navigation.navigate({ routeName: drawerStack[drawerStack.length > 1 ? drawerStack.length - 2 : 0] });
-    return;
-  }
-
+  const target = drawerStack[drawerStack.length > 1 ? drawerStack.length - 2 : 0];
   navigation.goBack(navigation.state.key);
+  if (DrawerRoutes.indexOf(target) === -1 && isURIValid(target)) {
+    navigateToUri(navigation, target, null, true);
+  } else {
+    navigation.navigate({ routeName: target  });
+  }
 }
 
-export function dispatchNavigateBack(dispatch, nav, drawerStack, popDrawerStack) {
-  const drawerRouteIndex = nav.routes[0].index;
-  const shouldPopStack = (
-    (drawerRouteIndex > 0 && drawerRouteIndex !== 3) || // not the discover nor wallet stack
-    (drawerRouteIndex === 3 && nav.routes[0].routes[drawerRouteIndex].index === 0) // wallet stack, and tx history page not active
-  );
-  if (shouldPopStack) {
-    dispatch(NavigationActions.back());
-    if (popDrawerStack) {
-      dispatch(popDrawerStack());
-    }
+export function dispatchNavigateBack(dispatch, nav, drawerStack) {
+  dispatch(doPopDrawerStack());
 
+  const target = drawerStack[drawerStack.length > 1 ? drawerStack.length - 2 : 0];
+  dispatch(NavigationActions.back());
+
+  if (DrawerRoutes.indexOf(target) === -1 && isURIValid(target)) {
+    dispatchNavigateToUri(dispatch, nav, target, true);
+  } else {
     const navigateAction = NavigationActions.navigate({ routeName: drawerStack[drawerStack.length > 1 ? drawerStack.length - 2 : 0] });
     dispatch(navigateAction);
-    return;
   }
-
-  dispatch(NavigationActions.back());
 }
 
 export function uriFromFileInfo(fileInfo) {