From 2fe804ee0ca9238a932090589beee25a3851792b Mon Sep 17 00:00:00 2001 From: arun Date: Mon, 27 Nov 2023 07:56:05 -0500 Subject: [PATCH] Fixed browser history issue from the historypush and related components --- src/App.jsx | 4 +--- src/js/common/utils/historyPush.js | 11 +++++++++-- src/js/pages/Ballot/Ballot.jsx | 14 +++++++------- src/js/pages/Campaigns/CampaignsHome.jsx | 6 +++--- src/js/pages/Campaigns/CampaignsHomeLoader.jsx | 2 +- 5 files changed, 21 insertions(+), 16 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 9ca284257..ebf68034a 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -294,9 +294,7 @@ class App extends Component { } onVoterStoreChange () { - historyPush({ - pathname: this.props.location.pathname, - }); + historyPush(this.props.location.pathname); } setShowHeader (doShowHeader) { diff --git a/src/js/common/utils/historyPush.js b/src/js/common/utils/historyPush.js index c6d4601e3..96daf3c47 100644 --- a/src/js/common/utils/historyPush.js +++ b/src/js/common/utils/historyPush.js @@ -3,9 +3,16 @@ import webAppConfig from '../../config'; // If history retention is not working, see TabWithPushHistory.jsx for an example of how to do it. // See v5: https://reactrouter.com/native/api/Hooks/usehistory // IMPORTANT: The HTML5 window.history, is very different from the react-router V5 history, don't use window.history! -export default function historyPush (route) { +// removePriorPathname determines whether the route should be pushed or replace the previous entry in the history stack. +export default function historyPush (route, removePriorPathname = false) { + if (route !== global.weVoteGlobalHistory.location.pathname) { + if (removePriorPathname) { + global.weVoteGlobalHistory.replace(route); + } else { + global.weVoteGlobalHistory.push(route); + } + } if (webAppConfig.LOG_ROUTING) { console.log(`historyPush ******** ${route} *******`); } - global.weVoteGlobalHistory.push(route); } diff --git a/src/js/pages/Ballot/Ballot.jsx b/src/js/pages/Ballot/Ballot.jsx index f426ef4bd..39e1da4be 100644 --- a/src/js/pages/Ballot/Ballot.jsx +++ b/src/js/pages/Ballot/Ballot.jsx @@ -190,13 +190,13 @@ class Ballot extends Component { BallotActions.voterBallotItemsRetrieve(0, '', ballotLocationShortcutFromUrl); // Change the URL to match - historyPush(`${ballotBaseUrl}/${ballotLocationShortcutFromUrl}`); + historyPush(`${ballotBaseUrl}/${ballotLocationShortcutFromUrl}`, true); } else if (ballotReturnedWeVoteIdFromUrl !== '') { // Change the ballot on load to make sure we are getting what we expect from the url BallotActions.voterBallotItemsRetrieve(0, ballotReturnedWeVoteIdFromUrl, ''); // Change the URL to match - historyPush(`${ballotBaseUrl}/id/${ballotReturnedWeVoteIdFromUrl}`); + historyPush(`${ballotBaseUrl}/id/${ballotReturnedWeVoteIdFromUrl}`, true); } else if (googleCivicElectionIdFromUrl !== 0) { // Change the ballot on load to make sure we are getting what we expect from the url if (googleCivicElectionId !== googleCivicElectionIdFromUrl) { @@ -210,7 +210,7 @@ class Ballot extends Component { if (!currentPathnameStartsWithNewUrl) { // As long as the current pathname starts with the new URL, do NOT redirect // console.log('REDIRECTING TO ballotElectionUrl'); - historyPush(ballotElectionUrl); + historyPush(ballotElectionUrl, true); } } @@ -224,12 +224,12 @@ class Ballot extends Component { // console.log('ballotElectionUrl2: ', ballotElectionUrl2); const currentPathnameStartsWithNewUrl2 = currentPathname && currentPathname.startsWith(ballotElectionUrl2); if (!currentPathnameStartsWithNewUrl2) { - historyPush(ballotElectionUrl2); + historyPush(ballotElectionUrl2, true); } } } else if (BallotStore.ballotProperties && BallotStore.ballotProperties.ballot_found === false) { // No ballot found // console.log('if (BallotStore.ballotProperties && BallotStore.ballotProperties.ballot_found === false'); - historyPush('/settings/location'); + historyPush('/settings/location', true); } else { // } else if (ballotWithItemsFromCompletionFilterType === undefined) { // console.log('WebApp doesn\'t know the election or have ballot data, so ask the API server to return best guess'); BallotActions.voterBallotItemsRetrieve(0, '', ''); @@ -596,7 +596,7 @@ class Ballot extends Component { if (voter && voter.is_signed_in) { // console.log('onVoterStoreChange, about to historyPush(pathname):', pathname); // Return to the same page without the 'voter_refresh_timer_on' variable - historyPush(pathname); + historyPush(pathname, true); } else if (numberOfVoterRetrieveAttempts < 3) { // console.log('About to startTimerToRetrieveVoter'); this.startTimerToRetrieveVoter(); @@ -604,7 +604,7 @@ class Ballot extends Component { // We have exceeded the number of allowed attempts and want to 'turn off' the request to refresh the voter object // Return to the same page without the 'voter_refresh_timer_on' variable // console.log('Exiting voterRefreshTimerOn'); - historyPush(pathname); + historyPush(pathname, true); } } else { // console.log('Ballot.jsx onVoterStoreChange VoterStore.getVoter: ', VoterStore.getVoter()); diff --git a/src/js/pages/Campaigns/CampaignsHome.jsx b/src/js/pages/Campaigns/CampaignsHome.jsx index 445c45b93..1b770583d 100644 --- a/src/js/pages/Campaigns/CampaignsHome.jsx +++ b/src/js/pages/Campaigns/CampaignsHome.jsx @@ -143,7 +143,7 @@ class CampaignsHome extends Component { const newPathname = this.getStateNamePathnameFromStateCode(voterStateCode); const { location: { pathname } } = window; if (pathname !== newPathname) { - historyPush(newPathname); + historyPush(newPathname, true); } else { this.setState({ stateCode: voterStateCode }); } @@ -572,7 +572,7 @@ class CampaignsHome extends Component { const newPathname = this.getStateNamePathnameFromStateCode(e.target.value); const { location: { pathname } } = window; if (pathname !== newPathname) { - historyPush(newPathname); + historyPush(newPathname); } else { this.setState({ stateCode: e.target.value }); } @@ -624,7 +624,7 @@ class CampaignsHome extends Component { render () { renderLog('CampaignsHome'); // Set LOG_RENDER_EVENTS to log all renders - const { + const { campaignList, campaignListTimeStampOfChange, campaignsShowing, candidateListOther, candidateListTimeStampOfChange, diff --git a/src/js/pages/Campaigns/CampaignsHomeLoader.jsx b/src/js/pages/Campaigns/CampaignsHomeLoader.jsx index dff77ea25..29789e3ed 100644 --- a/src/js/pages/Campaigns/CampaignsHomeLoader.jsx +++ b/src/js/pages/Campaigns/CampaignsHomeLoader.jsx @@ -59,7 +59,7 @@ class CampaignsHomeLoader extends Component { const newPathname = this.getStateNamePathnameFromStateCode(voterStateCode); const { location: { pathname } } = window; if (pathname !== newPathname) { - historyPush(newPathname); + historyPush(newPathname, true); } else { this.setState({ stateCode: voterStateCode }); }