fixing back and next transition

This commit is contained in:
Sebastian 2022-04-14 17:08:36 -03:00
parent bf3e011183
commit a2e8ab9445
No known key found for this signature in database
GPG Key ID: BE4FF68352439FC1

View File

@ -100,24 +100,26 @@ export function AnastasisClientFrame(props: AnastasisClientFrameProps): VNode {
return <p>Fatal: Reducer must be in context.</p>; return <p>Fatal: Reducer must be in context.</p>;
} }
const doBack = async (): Promise<void> => { const doBack = async (): Promise<void> => {
history.back();
if (props.onBack) { if (props.onBack) {
await props.onBack(); await props.onBack();
} else {
await reducer.back();
} }
}; };
const doNext = async (): Promise<void> => { const doNext = async (fromPopstate?: boolean): Promise<void> => {
try { if (!fromPopstate) {
const nextId: number = try {
(history.state && typeof history.state.id === "number" const nextId: number =
? history.state.id (history.state && typeof history.state.id === "number"
: 0) + 1; ? history.state.id
: 0) + 1;
currentHistoryId = nextId; currentHistoryId = nextId;
history.pushState({ id: nextId }, "unused", `#${nextId}`); history.pushState({ id: nextId }, "unused", `#${nextId}`);
} catch (e) { } catch (e) {
console.log(e); console.log(e);
}
} }
if (props.onNext) { if (props.onNext) {
@ -136,9 +138,9 @@ export function AnastasisClientFrame(props: AnastasisClientFrameProps): VNode {
const browserOnBackButton = useCallback(async (ev: PopStateEvent) => { const browserOnBackButton = useCallback(async (ev: PopStateEvent) => {
//check if we are going back or forward //check if we are going back or forward
if (!ev.state || ev.state.id === 0 || ev.state.id < currentHistoryId) { if (!ev.state || ev.state.id === 0 || ev.state.id < currentHistoryId) {
await reducer.back(); await doBack();
} else { } else {
await reducer.transition("next", {}); await doNext(true);
} }
// reducer // reducer
@ -169,13 +171,13 @@ export function AnastasisClientFrame(props: AnastasisClientFrameProps): VNode {
justifyContent: "space-between", justifyContent: "space-between",
}} }}
> >
<button class="button" onClick={doBack}> <button class="button" onClick={() => doBack()}>
Back Back
</button> </button>
<AsyncButton <AsyncButton
class="button is-info" class="button is-info"
data-tooltip={props.hideNext} data-tooltip={props.hideNext}
onClick={doNext} onClick={() => doNext()}
disabled={props.hideNext !== undefined} disabled={props.hideNext !== undefined}
> >
Next Next