Merge pull request #3781 from anup2307/fix-browserhistory

Fixed browser history issue from the historypush and related components

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) {

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);
 }

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,15 +596,15 @@ 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();
         } else {
           // 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());

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,

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 });
       }