fix(handle redirects): use onRouteChange to handle redirects

a customizable hook to handle redirects and url updates.
unbxd · Jan 12, 2021 · d5328bc · d5328bc
1 parent bf01834
commit d5328bc
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 12 deletions.
diff --git a/demo/src/pages/Search.js b/demo/src/pages/Search.js
@@ -33,7 +33,12 @@ const ErrorComponent = () => {
 };
 
 const Search = () => {
-    const [productType, setProductType] = useContext(ProductTypeContext);
+    const {
+        productType,
+        setProductType,
+        enableFilters,
+        setEnableFilters
+    } = useContext(ProductTypeContext);
     const [categoryPathLinks, setCategoryPathLinks] = useState(categoryLinks);
     const [refreshId, setRefreshId] = useState(1);
     const [showFilters, setShowFilters] = useState(false);
@@ -61,12 +66,38 @@ const Search = () => {
         setRefreshId(refreshId + 1);
     };
 
-    const handleRouteChange = (hash) => {
+    const handleRouteChange = (searchObj, hash, refreshId) => {
         scrollTop();
-        if (routeLocation.hash && routeHistory.action !== 'POP') {
-            routeHistory.push(`${routeLocation.pathname}#${hash}`);
+        setEnableFilters(true);
+        const { state = {} } = searchObj;
+        const { responseObj = {} } = state;
+        const { redirect = {} } = responseObj;
+        const { type = '', value } = redirect;
+        const urlParams = searchObj.getQueryParams();
+        if (
+            routeLocation.pathname === '/' &&
+            Object.keys(urlParams).length === 0 &&
+            refreshId
+        ) {
+            return false;
+        } else if (
+            type === 'url' &&
+            typeof value === 'string' &&
+            value.length > 0
+        ) {
+            if (routeLocation.pathname === '/' && routeLocation.hash) {
+                routeHistory.push(value);
+            } else {
+                routeHistory.replace(value);
+            }
+            return true;
         } else {
-            routeHistory.replace(`${routeLocation.pathname}#${hash}`);
+            if (routeLocation.hash && routeHistory.action !== 'POP') {
+                routeHistory.push(`${routeLocation.pathname}#${hash}`);
+            } else {
+                routeHistory.replace(`${routeLocation.pathname}#${hash}`);
+            }
+            return true;
         }
     };
 
@@ -94,6 +125,7 @@ const Search = () => {
                 categoryPathLinks={categoryPathLinks}
                 handleCategoryLinkClick={handleCategoryLinkClick}
                 handleShow={handleShow}
+                enableFilters={enableFilters}
             />
 
             <Route exact path="/">

diff --git a/src/UnbxdSearchWrapper.js b/src/UnbxdSearchWrapper.js
@@ -172,7 +172,7 @@ class UnbxdSearchWrapper extends Component {
 
     componentDidUpdate(prevProps) {
         const { refreshId } = prevProps;
-        const { productType } = this.props;
+        const { productType, onRouteChange } = this.props;
         const {
             unbxdCore,
             categoryId,
@@ -215,11 +215,15 @@ class UnbxdSearchWrapper extends Component {
             renderFromUrl();
         } else if (refreshId !== this.props.refreshId) {
             this.resetSearch();
-            unbxdCore.options.productType = productType;
-            if (productType === productTypes.SEARCH) {
-                getResults(query);
-            } else {
-                getResults();
+            if (onRouteChange(unbxdCore, '', refreshId)) {
+                unbxdCore.options.productType = productType;
+                const currentQuery =
+                    urlParams[unbxdCore.options.searchQueryParam];
+                if (productType === productTypes.SEARCH) {
+                    getResults(currentQuery);
+                } else {
+                    getResults();
+                }
             }
         }
     }

diff --git a/src/utils/unbxdCallBack.js b/src/utils/unbxdCallBack.js
@@ -9,7 +9,7 @@ function unbxdCallBack(unbxdSearchObj, eventName, data) {
         });
         const { onRouteChange } = this.props;
         if (typeof onRouteChange === 'function') {
-            onRouteChange(unbxdSearchObj.getStateString());
+            onRouteChange(unbxdSearchObj, unbxdSearchObj.getStateString());
         }
     }