#242: attempting to fix the back button

NationalSecurityAgency · Sep 25, 2024 · 5cf1d98 · 5cf1d98
1 parent 15d9d98
commit 5cf1d98
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/skills-client-integration/skills-int-e2e-test/cypress/e2e/js.specs.js b/skills-client-integration/skills-int-e2e-test/cypress/e2e/js.specs.js
@@ -351,7 +351,7 @@ context("Native JS Tests", () => {
             cy.cdBack('User Skills');
         });
 
-        it('browser back button works correctly when internal back button is not present', () => {
+        it.only('browser back button works correctly when internal back button is not present', () => {
             cy.createDefaultTinyProject()
             cy.backendPost('/api/projects/proj1/skills/Thor', {userId: Cypress.env('proxyUser'), timestamp: Date.now()})
 

diff --git a/skills-client-js/package.json b/skills-client-js/package.json
@@ -18,6 +18,7 @@
         "licenseHeaderAdd": " npx license-check-and-add add -f license-add/license-add-config.json",
         "licenseCheck": "npm run licenseHeaderCheck && npm run licenseDepCheck ",
         "build": "npm run licenseCheck && npm run test && npm run clean && npm run build:umd && npm run build:esm",
+        "buildNoTests": "npm run licenseCheck && npm run clean && npm run build:umd && npm run build:esm",
         "build:umd": "rollup --config --format umd --file dist/skills-client-js.umd.min.js --name SkillsClient --bundleConfigAsCjs",
         "build:esm": "rollup --config --format esm --file dist/skills-client-js.esm.min.js --bundleConfigAsCjs",
         "deploy-to-examples": "npm run build && cp ./dist/skills-display-js.umd.min.js ../skills-examples/skills-example-client-js/app/assets/js/@skilltree/skills-client-js/dist",

diff --git a/skills-client-js/src/display/SkillsDisplayJS.js b/skills-client-js/src/display/SkillsDisplayJS.js
@@ -121,22 +121,38 @@ export default class SkillsDisplayJS {
       });
       child.on('route-changed', (params) => {
         const newPath = params ? params.path : null;
-        log.debug(`SkillsClient::SkillsDisplayJS::route-changed - newPath [${newPath}]`);
+        log.debug(`SkillsClient::SkillsDisplayJS::route-changed - provided params are [${JSON.stringify(params)}]`);
         if (!(newPath == null)) {
           const routePath = newPath.endsWith('index.html') ? '/' : newPath;
+          log.debug(`SkillsClient::SkillsDisplayJS::route-changed - route path is [${routePath}]`);
           if (this._shouldUpdateHistory(params)) {
             // put the new path in the URL so that when the page is reloaded or
             // sent as a link the proper route will be set in the child iframe
             const queryParams = new URLSearchParams(window.location.search);
+            const oldUrl = `${window.location.pathname}?${queryParams.toString()}`
             queryParams.set(skillsClientDisplayPath, routePath);
-            const newUrl = `${window.location.pathname}?${queryParams.toString()}${window.location.hash}`;
-            window.history.pushState({ skillsClientDisplayPath: newPath }, '', newUrl);
+            const newUrl = `${window.location.pathname}?${queryParams.toString()}`;
+            const data = {
+              position: window.history?.state?.position ? 0 : (window.history?.state?.position + 1),
+              back: oldUrl,
+              currentPath: newUrl,
+              replaced: true,
+              scroll: null,
+              skillsClientDisplayPath: newPath,
+              newUrl
+            }
+            log.debug(`SkillsClient::SkillsDisplayJS::route-changed - pushState [${JSON.stringify(data)}]`);
+            window.history.replaceState(data, '', newUrl);
+          } else {
+            log.debug(`SkillsClient::SkillsDisplayJS::route-changed - did not update history`);
           }
 
           // if the client has configured a handleRouteChanged call back, invoke it
           if (this._handleRouteChanged) {
             this._handleRouteChanged(routePath);
           }
+        } else {
+          log.debug(`SkillsClient::SkillsDisplayJS::route-changed - path was null`);
         }
 
         if (!this.options.disableAutoScroll) {