Merge pull request #113 from lbryio/back-navigation-tweaks
back navigation fixes and tweaks
This commit is contained in:
commit
514e077fbb
9 changed files with 75 additions and 17 deletions
|
@ -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',
|
||||
|
|
|
@ -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 },
|
||||
);
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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 = () => {
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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) {
|
||||
|
|
Loading…
Reference in a new issue