Unverified Commit 514e077f authored by Akinwale Ariwodola's avatar Akinwale Ariwodola Committed by GitHub
Browse files

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

back navigation fixes and tweaks
parents 3a5edc46 456c7876
...@@ -64,6 +64,8 @@ const Constants = { ...@@ -64,6 +64,8 @@ const Constants = {
ACTION_CLEAR_PUBLISH_FORM_STATE: 'CLEAR_PUBLISH_FORM_STATE', ACTION_CLEAR_PUBLISH_FORM_STATE: 'CLEAR_PUBLISH_FORM_STATE',
ACTION_CLEAR_CHANNEL_FORM_STATE: 'CLEAR_CHANNEL_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', ACTION_FULLSCREEN_MODE_TOGGLED: 'FULLSCREEN_MODE_TOGGLED',
ORIENTATION_HORIZONTAL: 'horizontal', ORIENTATION_HORIZONTAL: 'horizontal',
......
...@@ -173,9 +173,10 @@ class ChannelPage extends React.PureComponent { ...@@ -173,9 +173,10 @@ class ChannelPage extends React.PureComponent {
const { permanent_url: permanentUrl } = claim; const { permanent_url: permanentUrl } = claim;
navigation.navigate({ navigation.navigate({
routeName: Constants.DRAWER_ROUTE_CHANNEL_CREATOR, routeName: Constants.DRAWER_ROUTE_CHANNEL_CREATOR,
params: { editChannelUrl: permanentUrl }, params: { editChannelUrl: permanentUrl, returnUrl: permanentUrl },
}); });
} }
this.onEditPressed = null;
}; };
onTipPressed = () => { onTipPressed = () => {
...@@ -210,7 +211,7 @@ class ChannelPage extends React.PureComponent { ...@@ -210,7 +211,7 @@ class ChannelPage extends React.PureComponent {
}, },
}, },
], ],
{ cancelable: true } { cancelable: true },
); );
} }
}; };
......
...@@ -13,7 +13,12 @@ import { ...@@ -13,7 +13,12 @@ import {
doToast, doToast,
} from 'lbry-redux'; } from 'lbry-redux';
import { doGetSync } from 'lbryinc'; 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 { doUpdateChannelFormState, doClearChannelFormState } from 'redux/actions/form';
import { selectDrawerStack } from 'redux/selectors/drawer'; import { selectDrawerStack } from 'redux/selectors/drawer';
import { selectChannelFormState, selectHasChannelFormState } from 'redux/selectors/form'; import { selectChannelFormState, selectHasChannelFormState } from 'redux/selectors/form';
...@@ -44,9 +49,10 @@ const perform = dispatch => ({ ...@@ -44,9 +49,10 @@ const perform = dispatch => ({
pushDrawerStack: (routeName, params) => dispatch(doPushDrawerStack(routeName, params)), pushDrawerStack: (routeName, params) => dispatch(doPushDrawerStack(routeName, params)),
popDrawerStack: () => dispatch(doPopDrawerStack()), popDrawerStack: () => dispatch(doPopDrawerStack()),
setPlayerVisible: () => dispatch(doSetPlayerVisible(false)), setPlayerVisible: () => dispatch(doSetPlayerVisible(false)),
setExplicitNavigateBack: flag => dispatch(doSetExplicitNavigateBack(flag)),
}); });
export default connect( export default connect(
select, select,
perform perform,
)(ChannelCreator); )(ChannelCreator);
...@@ -14,7 +14,7 @@ import { ...@@ -14,7 +14,7 @@ import {
TouchableOpacity, TouchableOpacity,
View, View,
} from 'react-native'; } from 'react-native';
import { navigateToUri, logPublish, uploadImageAsset } from 'utils/helper'; import { navigateBack, navigateToUri, logPublish, uploadImageAsset } from 'utils/helper';
import Button from 'component/button'; import Button from 'component/button';
import ChannelIconItem from 'component/channelIconItem'; import ChannelIconItem from 'component/channelIconItem';
import ChannelRewardsDriver from 'component/channelRewardsDriver'; import ChannelRewardsDriver from 'component/channelRewardsDriver';
...@@ -37,6 +37,7 @@ export default class ChannelCreator extends React.PureComponent { ...@@ -37,6 +37,7 @@ export default class ChannelCreator extends React.PureComponent {
state = { state = {
autoStyle: null, autoStyle: null,
returnUrl: null,
canSave: true, canSave: true,
claimId: null, claimId: null,
creditsInputFocused: false, creditsInputFocused: false,
...@@ -77,6 +78,7 @@ export default class ChannelCreator extends React.PureComponent { ...@@ -77,6 +78,7 @@ export default class ChannelCreator extends React.PureComponent {
descriptionFocused: false, descriptionFocused: false,
websiteFocused: false, websiteFocused: false,
emailFocused: false, emailFocused: false,
hasReturnedBack: false,
}; };
didFocusListener; didFocusListener;
...@@ -118,7 +120,14 @@ export default class ChannelCreator extends React.PureComponent { ...@@ -118,7 +120,14 @@ export default class ChannelCreator extends React.PureComponent {
}; };
componentWillReceiveProps(nextProps) { 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; const { currentRoute, drawerStack, updatingChannel, updateChannelError } = nextProps;
if (Constants.DRAWER_ROUTE_CHANNEL_CREATOR === currentRoute && currentRoute !== prevRoute) { if (Constants.DRAWER_ROUTE_CHANNEL_CREATOR === currentRoute && currentRoute !== prevRoute) {
...@@ -142,6 +151,11 @@ export default class ChannelCreator extends React.PureComponent { ...@@ -142,6 +151,11 @@ export default class ChannelCreator extends React.PureComponent {
) { ) {
// navigated back from the form // navigated back from the form
this.setState({ currentPhase: Constants.PHASE_LIST }); 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 { ...@@ -171,11 +185,12 @@ export default class ChannelCreator extends React.PureComponent {
let isEditMode = false; let isEditMode = false;
if (navigation.state.params) { if (navigation.state.params) {
const { editChannelUrl, displayForm } = navigation.state.params; const { editChannelUrl, displayForm, returnUrl } = navigation.state.params;
if (editChannelUrl) { if (editChannelUrl) {
isEditMode = true; isEditMode = true;
this.setState({ editChannelUrl, currentPhase: Constants.PHASE_CREATE }); this.setState({ editChannelUrl, currentPhase: Constants.PHASE_CREATE });
} }
this.setState({ returnUrl });
} }
if (!isEditMode && hasFormState) { if (!isEditMode && hasFormState) {
......
...@@ -86,8 +86,10 @@ class DiscoverPage extends React.PureComponent { ...@@ -86,8 +86,10 @@ class DiscoverPage extends React.PureComponent {
} }
onComponentFocused = () => { onComponentFocused = () => {
const { pushDrawerStack, setPlayerVisible } = this.props; const { pushDrawerStack, setPlayerVisible, currentRoute } = this.props;
// pushDrawerStack(); if (currentRoute === Constants.DRAWER_ROUTE_DISCOVER) {
pushDrawerStack();
}
NativeModules.Firebase.setCurrentScreen('Your tags'); NativeModules.Firebase.setCurrentScreen('Your tags');
setPlayerVisible(); setPlayerVisible();
......
...@@ -360,7 +360,11 @@ class FilePage extends React.PureComponent { ...@@ -360,7 +360,11 @@ class FilePage extends React.PureComponent {
onEditPressed = () => { onEditPressed = () => {
const { claim, navigation } = this.props; 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 = () => { onDeletePressed = () => {
......
...@@ -47,7 +47,7 @@ import Tag from 'component/tag'; ...@@ -47,7 +47,7 @@ import Tag from 'component/tag';
import TagSearch from 'component/tagSearch'; import TagSearch from 'component/tagSearch';
import UriBar from 'component/uriBar'; import UriBar from 'component/uriBar';
import publishStyle from 'styles/publish'; import publishStyle from 'styles/publish';
import { navigateToUri, logPublish, uploadImageAsset } from 'utils/helper'; import { navigateToUri, navigateBack, logPublish, uploadImageAsset } from 'utils/helper';
const languages = { const languages = {
en: 'English', en: 'English',
...@@ -141,6 +141,8 @@ class PublishPage extends React.PureComponent { ...@@ -141,6 +141,8 @@ class PublishPage extends React.PureComponent {
// other // other
publishStarted: false, publishStarted: false,
storagePermissionRequired: false, storagePermissionRequired: false,
hasReturnedBack: false,
returnUrl: null,
}; };
didFocusListener; didFocusListener;
...@@ -236,7 +238,7 @@ class PublishPage extends React.PureComponent { ...@@ -236,7 +238,7 @@ class PublishPage extends React.PureComponent {
let isEditMode = false, let isEditMode = false,
vanityUrlSet = false; vanityUrlSet = false;
if (navigation.state.params) { if (navigation.state.params) {
const { displayForm, editMode, claimToEdit, vanityUrl } = navigation.state.params; const { displayForm, editMode, claimToEdit, vanityUrl, returnUrl } = navigation.state.params;
if (editMode) { if (editMode) {
this.prepareEdit(claimToEdit); this.prepareEdit(claimToEdit);
isEditMode = true; isEditMode = true;
...@@ -250,6 +252,7 @@ class PublishPage extends React.PureComponent { ...@@ -250,6 +252,7 @@ class PublishPage extends React.PureComponent {
vanityUrl: claimName, vanityUrl: claimName,
}); });
} }
this.setState({ returnUrl });
} }
if (!isEditMode && hasFormState) { if (!isEditMode && hasFormState) {
...@@ -472,7 +475,15 @@ class PublishPage extends React.PureComponent { ...@@ -472,7 +475,15 @@ class PublishPage extends React.PureComponent {
} }
componentWillReceiveProps(nextProps) { 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; const { currentRoute, drawerStack, publishFormValues } = nextProps;
if (Constants.DRAWER_ROUTE_PUBLISH === currentRoute && currentRoute !== prevRoute) { if (Constants.DRAWER_ROUTE_PUBLISH === currentRoute && currentRoute !== prevRoute) {
...@@ -486,6 +497,11 @@ class PublishPage extends React.PureComponent { ...@@ -486,6 +497,11 @@ class PublishPage extends React.PureComponent {
) { ) {
// navigated back from the form // navigated back from the form
this.showSelector(); this.showSelector();
if (!this.state.hasReturnedBack && this.state.returnUrl) {
this.setState({ hasReturnedBack: true }, () => {
navigateBack(navigation, drawerStack, popDrawerStack, setPlayerVisible);
});
}
} }
} }
......
...@@ -42,6 +42,9 @@ reducers[Constants.ACTION_PUSH_DRAWER_STACK] = (state, action) => { ...@@ -42,6 +42,9 @@ reducers[Constants.ACTION_PUSH_DRAWER_STACK] = (state, action) => {
if (lastRoute === Constants.DRAWER_ROUTE_PUBLISH_FORM && routeName === Constants.DRAWER_ROUTE_PUBLISH) { if (lastRoute === Constants.DRAWER_ROUTE_PUBLISH_FORM && routeName === Constants.DRAWER_ROUTE_PUBLISH) {
canPushStack = false; canPushStack = false;
} }
if (routeName === Constants.DRAWER_ROUTE_DISCOVER && newStack.length === 1) {
canPushStack = false;
}
let lastRouteInStack; let lastRouteInStack;
if (canPushStack) { if (canPushStack) {
......
...@@ -170,6 +170,7 @@ export function navigateBack(navigation, drawerStack, popDrawerStack, setPlayerV ...@@ -170,6 +170,7 @@ export function navigateBack(navigation, drawerStack, popDrawerStack, setPlayerV
if (popDrawerStack) { if (popDrawerStack) {
popDrawerStack(); popDrawerStack();
} }
if (setPlayerVisible) { if (setPlayerVisible) {
setPlayerVisible(false); setPlayerVisible(false);
} }
...@@ -177,6 +178,7 @@ export function navigateBack(navigation, drawerStack, popDrawerStack, setPlayerV ...@@ -177,6 +178,7 @@ export function navigateBack(navigation, drawerStack, popDrawerStack, setPlayerV
const target = drawerStack[drawerStack.length > 1 ? drawerStack.length - 2 : 0]; const target = drawerStack[drawerStack.length > 1 ? drawerStack.length - 2 : 0];
const { route, params } = target; const { route, params } = target;
navigation.goBack(navigation.state.key); navigation.goBack(navigation.state.key);
if (!DrawerRoutes.includes(route) && !InnerDrawerRoutes.includes(route) && isURIValid(route)) { if (!DrawerRoutes.includes(route) && !InnerDrawerRoutes.includes(route) && isURIValid(route)) {
navigateToUri(navigation, route, null, true, null, setPlayerVisible); navigateToUri(navigation, route, null, true, null, setPlayerVisible);
} else { } else {
...@@ -186,7 +188,7 @@ export function navigateBack(navigation, drawerStack, popDrawerStack, setPlayerV ...@@ -186,7 +188,7 @@ export function navigateBack(navigation, drawerStack, popDrawerStack, setPlayerV
if (Constants.DRAWER_ROUTE_CHANNEL_CREATOR_FORM === route) { if (Constants.DRAWER_ROUTE_CHANNEL_CREATOR_FORM === route) {
targetRoute = Constants.DRAWER_ROUTE_CHANNEL_CREATOR; targetRoute = Constants.DRAWER_ROUTE_CHANNEL_CREATOR;
} else if (Constants.DRAWER_ROUTE_PUBLISH_FORM === route) { } else if (Constants.DRAWER_ROUTE_PUBLISH_FORM === route) {
targetRoute = Constants.DRAWER_ROUTE_PUBLISH_FORM; targetRoute = Constants.DRAWER_ROUTE_PUBLISH;
} }
if (targetParams) { if (targetParams) {
...@@ -201,8 +203,15 @@ export function navigateBack(navigation, drawerStack, popDrawerStack, setPlayerV ...@@ -201,8 +203,15 @@ export function navigateBack(navigation, drawerStack, popDrawerStack, setPlayerV
} }
export function dispatchNavigateBack(dispatch, nav, drawerStack) { export function dispatchNavigateBack(dispatch, nav, drawerStack) {
if (drawerStack[drawerStack.length - 1].route === Constants.DRAWER_ROUTE_FILE_VIEW) { const currentRoute = drawerStack[drawerStack.length - 1].route;
// inner file_view (web / image view) is handled differently 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()); dispatch(doPopDrawerStack());
return; return;
} }
...@@ -223,7 +232,7 @@ export function dispatchNavigateBack(dispatch, nav, drawerStack) { ...@@ -223,7 +232,7 @@ export function dispatchNavigateBack(dispatch, nav, drawerStack) {
if (Constants.DRAWER_ROUTE_CHANNEL_CREATOR_FORM === route) { if (Constants.DRAWER_ROUTE_CHANNEL_CREATOR_FORM === route) {
targetRoute = Constants.DRAWER_ROUTE_CHANNEL_CREATOR; targetRoute = Constants.DRAWER_ROUTE_CHANNEL_CREATOR;
} else if (Constants.DRAWER_ROUTE_PUBLISH_FORM === route) { } else if (Constants.DRAWER_ROUTE_PUBLISH_FORM === route) {
targetRoute = Constants.DRAWER_ROUTE_PUBLISH_FORM; targetRoute = Constants.DRAWER_ROUTE_PUBLISH;
} }
if (targetParams) { if (targetParams) {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment