fixing back and next transition

packages/anastasis-webui/src/pages/home/index.tsx

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