Merge pull request #216 from manu-unbxd/master

fix(handling backbutton for queryparams): sdk was not re rendering wh…
unbxd · Apr 28, 2022 · 99d6560 · 99d6560
2 parents adecbd7 + adc445a
commit 99d6560
Show file tree

Hide file tree

Showing 4 changed files with 895 additions and 779 deletions.
diff --git a/demo/src/pages/Search.js b/demo/src/pages/Search.js
@@ -86,9 +86,9 @@ const Search = () => {
         } else {
             // if hash already exists, to retain the current state, push on history
             if (routeLocation.hash && routeHistory.action !== 'POP') {
-                routeHistory.push(`${routeLocation.pathname}#${hash}`);
+                routeHistory.push(`${routeLocation.pathname}?${hash}`);
             } else if (hash) {
-                routeHistory.replace(`${routeLocation.pathname}#${hash}`);
+                routeHistory.replace(`${routeLocation.pathname}?${hash}`);
             }
             return true;
         }
@@ -105,6 +105,12 @@ const Search = () => {
             loaderComponent={<LoaderComponent />}
             errorComponent={<ErrorComponent />}
             onRouteChange={handleRouteChange}
+            onUrlBack = {
+                function() {
+                    this.state.unbxdCore.state.isBack = true;
+                    this.state.unbxdCore.renderFromUrl(window.location.search.replace('?',''));
+                }
+            }
         >
             <MobileModal showFilters={showFilters} handleClose={handleClose} />
             <SearchBar

diff --git a/package.json b/package.json
@@ -124,7 +124,7 @@
         "@semantic-release/git": "^9.0.0",
         "@semantic-release/release-notes-generator": "^9.0.1",
         "@storybook/theming": "^6.2.9",
-        "@unbxd-ui/unbxd-search-core": "^0.4.4",
+        "@unbxd-ui/unbxd-search-core": "^0.4.6",
         "prop-types": "^15.7.2",
         "semantic-release": "^17.3.0"
     },

diff --git a/src/UnbxdSearchWrapper.js b/src/UnbxdSearchWrapper.js
@@ -124,6 +124,9 @@ class UnbxdSearchWrapper extends Component {
 
     componentDidMount() {
         const { unbxdCore } = this.state;
+        const {
+            onUrlBack
+        } = this.props;
         const { trackCategory } = this.getAnalytics();
         const categoryId =
             typeof unbxdCore.options.getCategoryId === 'function' &&
@@ -154,17 +157,18 @@ class UnbxdSearchWrapper extends Component {
                 };
             });
             unbxdCore.options.productType = productTypes.CATEGORY;
-            const urlParams = unbxdCore.getQueryParams();
-            if (Object.keys(urlParams).length > 1) {
-                unbxdCore.renderFromUrl();
-            } else {
-                unbxdCore.getResults();
-            }
+            unbxdCore.getResults();
             trackCategory(window.UnbxdAnalyticsConf);
         }
 
         if (unbxdCore.options.hashMode) {
-            window.onhashchange = unbxdCore.onLocationChange.bind(unbxdCore);
+            window.onhashchange = onUrlBack ? onUrlBack.bind(this)(unbxdCore): unbxdCore.onLocationChange.bind(unbxdCore);
+        } else {
+            const backHandler = onUrlBack ? onUrlBack.bind(this): ()=>{
+                unbxdCore.state.isBack = true;
+                unbxdCore.renderFromUrl(window.location.search.replace('?',''));
+            }
+            window.addEventListener('popstate', backHandler);
         }
     }