Custom query params are not stored in a separate object

They will be directly stored in the url just like other known query params. This also makes extra checking for other unknown query params not needed. They will also be added to state as custom query params.
storybook-eol · Aug 30, 2016 · 1aaee5f · 1aaee5f
1 parent d6ed1d7
commit 1aaee5f
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 38 deletions.
diff --git a/src/modules/ui/configs/__tests__/handle_routing.js b/src/modules/ui/configs/__tests__/handle_routing.js
@@ -2,7 +2,6 @@ import { changeUrl, handleInitialUrl, config } from '../handle_routing';
 import { expect } from 'chai';
 const { describe, it } = global;
 import sinon from 'sinon';
-import qs from 'qs';
 
 describe('manager.ui.config.handle_routing', () => {
   describe('changeUrl', () => {
@@ -19,7 +18,7 @@ describe('manager.ui.config.handle_routing', () => {
           selectedKind: 'kk',
           selectedStory: 'ss',
           customQueryParams: {
-            test: 'teststring',
+            customText: 'test',
           },
         },
         shortcuts: {
@@ -37,9 +36,8 @@ describe('manager.ui.config.handle_routing', () => {
         getState: () => reduxState,
       };
 
-      let url = '?selectedKind=kk&selectedStory=ss&full=0&down=1&left=1&panelRight=1&downPanel=pp';
-      const queryString = qs.stringify({ custom: reduxState.api.customQueryParams });
-      url = `${url}&${queryString}`;
+      // eslint-disable-next-line max-len
+      const url = '?selectedKind=kk&selectedStory=ss&full=0&down=1&left=1&panelRight=1&downPanel=pp&customText=test';
 
       const pushState = {
         url,
@@ -50,9 +48,7 @@ describe('manager.ui.config.handle_routing', () => {
         left: true,
         panelRight: true,
         downPanel: 'pp',
-        custom: {
-          test: 'teststring',
-        },
+        customText: 'test',
       };
 
       const originalPushState = window.history.pushState;
@@ -81,11 +77,8 @@ describe('manager.ui.config.handle_routing', () => {
         },
       };
 
-      let url =
-        '?selectedKind=kk&selectedStory=ss&full=1&down=0&left=0&panelRight=0&downPanel=test';
-
-      const queryString = qs.stringify({ custom: { test: 'teststring' } });
-      url = `${url}&${queryString}`;
+      // eslint-disable-next-line max-len
+      const url = '?selectedKind=kk&selectedStory=ss&full=1&down=0&left=0&panelRight=0&downPanel=test&customText=teststring';
 
       const location = {
         search: url,
@@ -104,7 +97,7 @@ describe('manager.ui.config.handle_routing', () => {
         downPanelInRight: false,
       })).to.be.true;
       expect(actions.ui.selectDownPanel.calledWith('test')).to.be.true;
-      expect(actions.api.setQueryParams.calledWith({ test: 'teststring' })).to.be.true;
+      expect(actions.api.setQueryParams.calledWith({ customText: 'teststring' })).to.be.true;
       /* eslint-enable no-unused-expressions */
     });
   });

diff --git a/src/modules/ui/configs/handle_routing.js b/src/modules/ui/configs/handle_routing.js
@@ -10,7 +10,7 @@ export function changeUrl(reduxStore) {
   const { api, shortcuts, ui } = reduxStore.getState();
   if (!api) return;
 
-  const { selectedKind, selectedStory } = api;
+  const { selectedKind, selectedStory, customQueryParams } = api;
   const queryString = qs.stringify({ selectedKind, selectedStory });
 
   if (queryString === '') return;
@@ -35,31 +35,13 @@ export function changeUrl(reduxStore) {
 
   const uiQuery = qs.stringify({ downPanel });
 
-  const {
-    customQueryParams: custom,
-  } = api;
-  const customParamsString = qs.stringify({ custom });
-
   let url = `?${queryString}&${layoutQuery}&${uiQuery}`;
-  if (customParamsString) {
-    url = `${url}&${customParamsString}`;
-  }
 
-  const currentQs = location.search.substring(1);
-  if (currentQs && currentQs.length > 0) {
-    const parsedQs = qs.parse(currentQs);
-    const knownKeys = [
-      'selectedKind', 'selectedStory', 'full', 'down', 'left', 'panelRight',
-      'downPanel', 'custom',
-    ];
-    knownKeys.forEach(key => {
-      delete(parsedQs[key]);
-    });
-    const otherParams = qs.stringify(parsedQs);
-    url = `${url}&${otherParams}`;
+  const customParamsString = qs.stringify(customQueryParams);
+  if (customParamsString.length > 0) {
+    url = `${url}&${customParamsString}`;
   }
 
-
   const state = {
     url,
     selectedKind,
@@ -69,7 +51,7 @@ export function changeUrl(reduxStore) {
     left,
     panelRight,
     downPanel,
-    custom,
+    ...customQueryParams,
   };
 
   window.history.pushState(state, '', url);
@@ -84,7 +66,7 @@ export function updateStore(queryParams, actions) {
     left = 1,
     panelRight = 0,
     downPanel,
-    custom,
+    ...custom,
   } = queryParams;
 
   if (selectedKind && selectedStory) {