resolves analyzer settings back bug

tenseg · Feb 24, 2019 · 62927db · 62927db
1 parent 7bd951b
commit 62927db
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 13 deletions.
diff --git a/src/Analyzer.tsx b/src/Analyzer.tsx
@@ -21,6 +21,7 @@ import { Chart } from 'primereact/chart';
 import * as _u from './Utilities'
 import { Snapshot } from './Snapshot'
 import { ValueCard } from './ValueCard';
+import { ShowJSON } from './ShowJSON';
 
 /**
  * Properties for the snapshot loader.
@@ -86,9 +87,9 @@ export class Analyzer extends React.Component<Props, State> {
      * Called when an instance of a component is being created and inserted into the DOM.
      */
     componentDidMount = () => {
-        _u.debug("Analyzer did mount with history state: ", history.state)
+        _u.debug("Analyzer did mount with history state: ", history.state, history.length)
         _u.setHistory("Analyzer")
-        _u.debug(`Analyzer pushed, now history state: `, history.state)
+        _u.debug(`Analyzer pushed, now history state: `, history.state, history.length)
         this.priorBackButtonHandler = window.onpopstate
         window.onpopstate = this.handleBackButton("Analyzer")
     }
@@ -99,26 +100,37 @@ export class Analyzer extends React.Component<Props, State> {
      * Called when a component is being removed from the DOM.
      */
     componentWillUnmount = () => {
-        _u.debug("Analyzer will unmount with history state: ", history.state)
+        _u.debug("Analyzer will unmount with history state: ", history.state, history.length)
         if (_u.isHistory("Analyzer")) {
             history.back()
         }
         window.onpopstate = this.priorBackButtonHandler
     }
 
+    /**
+     * Lets us know that the settings card was shown,
+     * tracked outside the component state because we need
+     * to consult it during the `handleBackButton()` function
+     * which appears to be called asyncronously.
+     */
+    showingSettings = false
+
     /**
      * Make sure we properly exit when the back button is pressed.
      */
     handleBackButton = (from: string) => (event: PopStateEvent) => {
-        _u.debug(`Analyzer handling back button with history state ${history.state} from ${from}`)
+        _u.debug(`Analyzer handling back button from ${from} with history state`, history.state, history.length)
+        _u.debug(`Current showingSettings`, this.showingSettings)
         // only handle the exit case if this is the history.state we expect to encounter
-        if (from === "Analyzer") {
+        if (from === "Analyzer" && !this.showingSettings) {
             this.props.onExit()
         } else {
             // just in case we get a late report from another component
             // sending a programatic history.back() from its unmount
             _u.setHistory("Analyzer")
         }
+        // we always return this to fals so it only blocks once
+        this.showingSettings = false
     }
 
     /**
@@ -309,6 +321,7 @@ export class Analyzer extends React.Component<Props, State> {
      */
     renderSettings = (): JSX.Element => {
         if (!this.state.showSettings) return <></>
+        this.showingSettings = true
         // change substitutions object into plain text for editing
         let text = Object.keys(this.substitutions).reduce((sofar: string, term: string): string => {
             const substitute = this.substitutions[term]

diff --git a/src/Loader.tsx b/src/Loader.tsx
@@ -66,9 +66,9 @@ export class Loader extends React.Component<Props, State> {
      * Called when an instance of a component is being created and inserted into the DOM.
      */
     componentDidMount = () => {
-        _u.debug("Loader did mount with history state: ", history.state)
+        _u.debug("Loader did mount with history state: ", history.state, history.length)
         _u.setHistory("Loader")
-        _u.debug(`Loader pushed, now history state: `, history.state)
+        _u.debug(`Loader pushed, now history state: `, history.state, history.length)
         this.priorBackButtonHandler = window.onpopstate
         window.onpopstate = this.handleBackButton("Loader")
     }
@@ -79,7 +79,7 @@ export class Loader extends React.Component<Props, State> {
      * Called when a component is being removed from the DOM.
      */
     componentWillUnmount = () => {
-        _u.debug("Loader will unmount with history state: ", history.state)
+        _u.debug("Loader will unmount with history state: ", history.state, history.length)
         if (_u.isHistory("Loader")) {
             history.back()
         }
@@ -90,7 +90,7 @@ export class Loader extends React.Component<Props, State> {
      * Make sure we properly exit when the back button is pressed.
      */
     handleBackButton = (from: string) => (event: PopStateEvent) => {
-        _u.debug(`Loader handling back button with history state ${history.state} from ${from}`)
+        _u.debug(`Loader handling back button from ${from} with history state`, history.state, history.length)
         // only handle the exit case if this is the history.state we expect to encounter
         if (from === "Loader") {
             this.props.onLoad()

diff --git a/src/Utilities.ts b/src/Utilities.ts
@@ -351,8 +351,10 @@ export function now(): TimestampString {
 export function setHistory(value: string, key: string = 'tenseg') {
 	let state = {}
 	state[key] = value
+	state["index"] = history.length
 	if (history.state) {
 		if (history.state[key]) {
+			state["index"] = history.state["index"]
 			history.replaceState(state, '')
 			return
 		}

diff --git a/src/ValueCard.tsx b/src/ValueCard.tsx
@@ -101,9 +101,9 @@ export class ValueCard extends React.Component<Props, State> {
      */
     componentDidMount = () => {
         // register for back button
-        _u.debug(`${this.props.id} did mount with history state: `, history.state)
+        _u.debug(`${this.props.id} did mount with history state: `, history.state, history.length)
         _u.setHistory(this.props.id, this.props.historyKey)
-        _u.debug(`${this.props.id} pushed, now history state: `, history.state)
+        _u.debug(`${this.props.id} pushed, now history state: `, history.state, history.length)
         this.priorBackButtonHandler = window.onpopstate
         window.onpopstate = this.handleBackButton(this.props.id)
 
@@ -126,7 +126,7 @@ export class ValueCard extends React.Component<Props, State> {
      */
     componentWillUnmount = () => {
         // let go of the back button
-        _u.debug(`${this.props.id} will unmount with history state: `, history.state)
+        _u.debug(`${this.props.id} will unmount with history state: `, history.state, history.length)
         window.onpopstate = this.priorBackButtonHandler
         if (_u.isHistory(this.props.id, this.props.historyKey)) {
             history.back()
@@ -140,7 +140,7 @@ export class ValueCard extends React.Component<Props, State> {
      * Make sure we properly exit when the back button is pressed.
      */
     handleBackButton = (from: string) => (event: PopStateEvent) => {
-        _u.debug(`${this.props.id} handling back button with history state ${history.state} from ${from}`)
+        _u.debug(`${this.props.id} handling back button from ${from} with history state`, history.state, history.length)
         // only handle the exit case if this is the history.state we expect to encounter
         if (from === this.props.id) {
             this.props.onSave()