Merge pull request #2261 from storybooks/replace-state

Use replaceState instead of pushState when the story stays the same
storybookjs · Nov 8, 2017 · fdbde92 · fdbde92
2 parents 5627316 + b7c9ace
commit fdbde92
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 10 deletions.
diff --git a/lib/ui/src/modules/ui/configs/handle_routing.js b/lib/ui/src/modules/ui/configs/handle_routing.js
@@ -40,15 +40,15 @@ export function getUrlState(data) {
   };
 }
 
-export function changeUrl(clientStore) {
+export function changeUrl(clientStore, usePush) {
   // Do not change the URL if we are inside a popState event.
   if (config.insidePopState) return;
 
   const data = clientStore.getAll();
   if (!data.selectedKind) return;
 
   const state = getUrlState(data);
-  window.history.pushState(state, '', state.url);
+  window.history[usePush ? 'pushState' : 'replaceState'](state, '', state.url);
 }
 
 export function updateStore(queryParams, actions) {
@@ -92,8 +92,22 @@ export default function({ clientStore }, actions) {
   // handle initial URL
   handleInitialUrl(actions, window.location);
 
+  const data = clientStore.getAll();
+  let prevKind = data.selectedKind;
+  let prevStory = data.selectedStory;
+
   // subscribe to clientStore and change the URL
-  clientStore.subscribe(() => changeUrl(clientStore));
+  clientStore.subscribe(() => {
+    const { selectedKind, selectedStory } = clientStore.getAll();
+    // use pushState only when a new story is selected
+    const usePush =
+      prevKind != null &&
+      prevStory != null &&
+      (selectedKind !== prevKind || selectedStory !== prevStory);
+    changeUrl(clientStore, usePush);
+    prevKind = selectedKind;
+    prevStory = selectedStory;
+  });
   changeUrl(clientStore);
 
   // handle back button

diff --git a/lib/ui/src/modules/ui/configs/handle_routing.test.js b/lib/ui/src/modules/ui/configs/handle_routing.test.js
@@ -10,7 +10,7 @@ describe('manager.ui.config.handle_routing', () => {
       config.insidePopState = false;
     });
 
-    test('should put the correct URL and state to pushState', done => {
+    test('should put the correct URL and state to replaceState', done => {
       const state = {
         selectedKind: 'kk',
         selectedStory: 'ss',
@@ -31,7 +31,7 @@ describe('manager.ui.config.handle_routing', () => {
       const url =
         '?customText=test&selectedKind=kk&selectedStory=ss&full=0&down=1&left=1&panelRight=1&downPanel=pp';
 
-      const pushState = {
+      const replaceState = {
         url,
         selectedKind: 'kk',
         selectedStory: 'ss',
@@ -42,16 +42,16 @@ describe('manager.ui.config.handle_routing', () => {
         downPanel: 'pp',
         customText: 'test',
       };
-      const originalPushState = window.history.pushState;
-      window.history.pushState = (s, t, u) => {
-        expect(s).toEqual(pushState);
-        expect(u).toBe(pushState.url);
+      const originalReplaceState = window.history.replaceState;
+      window.history.replaceState = (s, t, u) => {
+        expect(s).toEqual(replaceState);
+        expect(u).toBe(replaceState.url);
         done();
       };
 
       changeUrl(clientStore);
 
-      window.history.pushState = originalPushState;
+      window.history.replaceState = originalReplaceState;
     });
   });