From 62927db33c41691871555004a17c0a992a667008 Mon Sep 17 00:00:00 2001 From: efc Date: Sat, 23 Feb 2019 18:02:04 -0600 Subject: [PATCH] resolves analyzer settings back bug --- src/Analyzer.tsx | 23 ++++++++++++++++++----- src/Loader.tsx | 8 ++++---- src/Utilities.ts | 2 ++ src/ValueCard.tsx | 8 ++++---- 4 files changed, 28 insertions(+), 13 deletions(-) diff --git a/src/Analyzer.tsx b/src/Analyzer.tsx index ac483df..afe61e4 100644 --- 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 { * 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 { * 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 { */ 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 index 2600166..4f76d2b 100644 --- a/src/Loader.tsx +++ b/src/Loader.tsx @@ -66,9 +66,9 @@ export class Loader extends React.Component { * 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 { * 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 { * 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 index b66f953..2bdafa6 100644 --- 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 index bbfd828..24d88bc 100644 --- a/src/ValueCard.tsx +++ b/src/ValueCard.tsx @@ -101,9 +101,9 @@ export class ValueCard extends React.Component { */ 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 { */ 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 { * 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()