all: Fixes joining navigation jank

Uses the `replaceState` feature of the history API to change-in-place the page
location instead of pushing a new entry, which prevents backward navigation.
Also irons out some inconsistent behavior on joining.

Fixes #3504, fixes #3503, fixes some unfiled bugs
This commit is contained in:
Tyler Brown Cifu Shuster 2020-09-17 13:40:40 -07:00
parent 6f5663bcd3
commit 22e6422bbf
6 changed files with 28 additions and 11 deletions

View File

@ -81,7 +81,7 @@ export default class ChatApi extends BaseApi<StoreState> {
* If we don't host the chat, then it just leaves
*/
delete(path: Path) {
this.viewAction({ delete: { 'app-path': path } });
return this.viewAction({ delete: { 'app-path': path } });
}
/**

View File

@ -41,13 +41,22 @@ export class JoinScreen extends Component {
this.setState({ awaiting: true }, () => {
const station = values.station.trim();
if (`/${station}` in props.chatSynced) {
props.history.push(`/~chat/room${station}`);
if (props.station) {
props.history.replace(`/~chat/room${station}`);
} else {
props.history.push(`/~chat/room${station}`);
}
return;
}
const ship = station.substr(1).slice(0,station.substr(1).indexOf('/'));
props.api.chat.join(ship, station, true);
props.history.push(`/~chat/room${station}`);
props.api.chat.join(ship, station, true).then(() => {
if (props.station) {
props.history.replace(`/~chat/room${station}`);
} else {
props.history.push(`/~chat/room${station}`);
}
});
});
}

View File

@ -1,6 +1,6 @@
import React, { memo } from 'react';
export const DeleteButton = memo(({ isOwner, station, changeLoading, association, contacts, api }) => {
export const DeleteButton = memo(({ isOwner, station, changeLoading, association, contacts, api, history }) => {
const leaveButtonClasses = (!isOwner) ? 'pointer' : 'c-default';
const deleteButtonClasses = (isOwner) ?
'b--red2 red2 pointer bg-gray0-d' :
@ -12,7 +12,9 @@ export const DeleteButton = memo(({ isOwner, station, changeLoading, association
true,
isOwner ? 'Deleting chat...' : 'Leaving chat...',
() => {
api.chat.delete(station);
api.chat.delete(station).then(() => {
history.push("/~chat");
});
}
);
};

View File

@ -67,7 +67,8 @@ export class SettingsScreen extends Component {
groups,
api,
station,
match
match,
history
} = this.props;
const isOwner = deSig(match.params.ship) === window.ship;
@ -88,6 +89,7 @@ export class SettingsScreen extends Component {
station={station}
association={association}
contacts={contacts}
history={history}
api={api} />
<MetadataSettings
isOwner={isOwner}

View File

@ -28,19 +28,23 @@ export class JoinScreen extends Component {
const incomingGroup = `${props.ship}/${props.name}`;
// push to group if already exists
if (`/ship/${incomingGroup}` in props.groups) {
this.props.history.push(`/~groups/ship/${incomingGroup}`);
this.props.history.replace(`/~groups/ship/${incomingGroup}`);
return;
}
this.setState({ group: incomingGroup }, () => {
this.onClickJoin();
});
}
// once we've joined, push to group page
// once we've joined, replace to group page
if (props.groups) {
if (state.awaiting) {
const group = `/ship/${state.group}`;
if (group in props.groups) {
props.history.push(`/~groups${group}`);
if (props.ship && props.name) {
props.history.replace(`/~groups${group}`);
} else {
props.history.push(`/~groups${group}`);
}
}
}
}

View File

@ -31,7 +31,7 @@ export function JoinScreen(props: JoinScreenProps & RouteComponentProps) {
try {
await api.publish.publishAction(action);
await waiter((p) => !!p.notebooks?.[ship]?.[book]);
props.history.push(`/~publish/notebook/${ship}/${book}`);
props.history.replace(`/~publish/notebook/${ship}/${book}`);
} catch (e) {
console.error(e);
setError(true);