fix(viewtypes): view type and number of products loaded issues

handle view type toggle for pagination types `INFINITE_SCROLL` and `CLICK_N_SCROLL`.set view type on back button or refresh.reset number of products loaded on the change of view type when the pagination type is `INFINITE_SCROLL` or `CLICK_N_SCROLL`.
unbxd · Dec 2, 2020 · 864d0e5 · 864d0e5
1 parent c499b52
commit 864d0e5
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 26 deletions.
diff --git a/demo/src/components/CategoryLinks.js b/demo/src/components/CategoryLinks.js
@@ -8,24 +8,19 @@ const CategoryLinks = (props) => {
             <div className="UNX-categoryLink__Header">
                 {categoryPathLinks.map(({ path, id, label, isSelected }) => {
                     return (
-                        <div
+                        <Link
                             className={`menu-items ${
                                 isSelected && productType === 'CATEGORY'
                                     ? 'active'
                                     : ''
                             }`}
+                            to={`/${id}`}
                             data-unx_path={path}
                             key={id}
                             onClick={handleCategoryLinkClick}
                         >
-                            <Link
-                                className="menu-item-link"
-                                data-unx_path={path}
-                                to={`/${id}`}
-                            >
-                                {label}
-                            </Link>
-                        </div>
+                            {label}
+                        </Link>
                     );
                 })}
             </div>

diff --git a/demo/src/components/MobileMenu.js b/demo/src/components/MobileMenu.js
@@ -25,22 +25,18 @@ const MobileMenu = (props) => {
                         ({ path, id, label, isSelected }) => {
                             return (
                                 <Dropdown.Item
+                                    as={Link}
                                     className={`menu-items ${
                                         isSelected && productType === 'CATEGORY'
                                             ? 'active'
                                             : ''
                                     }`}
+                                    to={`/${id}`}
                                     data-unx_path={path}
                                     key={id}
                                     onClick={handleCategoryLinkClick}
                                 >
-                                    <Link
-                                        className="menu-item-link"
-                                        data-unx_path={path}
-                                        to={`/${id}`}
-                                    >
-                                        {label}
-                                    </Link>
+                                    {label}
                                 </Dropdown.Item>
                             );
                         }

diff --git a/src/modules/products/productsWrapper/ProductsWrapper.js b/src/modules/products/productsWrapper/ProductsWrapper.js
@@ -41,7 +41,6 @@ class ProductsWrapper extends React.PureComponent {
             getNextPage();
         }
     }, DEBOUNCE_TIME);
-    //Does it make sense to add DEBOUNCE_TIME to component props
 
     loadMoreProducts = () => {
         const { getNextPage } = this.props;
@@ -145,9 +144,15 @@ class ProductsWrapper extends React.PureComponent {
                 window.removeEventListener('scroll', this.nextPageCallback);
                 window.addEventListener('scroll', this.nextPageCallback);
             }
-            this.setState({
-                hasMoreResults: true
-            });
+
+            if (
+                paginationType === paginationTypes.INFINITE_SCROLL ||
+                paginationType === paginationTypes.CLICK_N_SCROLL
+            ) {
+                this.setState({
+                    hasMoreResults: true
+                });
+            }
         }
     }
 

diff --git a/src/modules/viewTypes/ViewTypesContainer.js b/src/modules/viewTypes/ViewTypesContainer.js
@@ -46,14 +46,23 @@ class ViewTypesContainer extends React.PureComponent {
         };
     }
 
-    componentDidUpdate() {
+    componentDidUpdate(prevProps) {
         const {
             unbxdCore,
+            unbxdCoreStatus,
             viewType,
             helpers: { setViewTypeConfiguration }
         } = this.props;
+
         const { viewType: currentViewType } = unbxdCore.getQueryParams();
-        if (currentViewType && viewType !== currentViewType) {
+        if (viewType !== prevProps.viewType) {
+            setViewTypeConfiguration({ viewType });
+        } else if (
+            currentViewType &&
+            unbxdCoreStatus === 'LOADING' &&
+            viewType === prevProps.viewType &&
+            viewType !== currentViewType
+        ) {
             setViewTypeConfiguration({ viewType: currentViewType });
         }
     }

diff --git a/src/utils/handleViewTypeClick.js b/src/utils/handleViewTypeClick.js
@@ -1,12 +1,18 @@
-import { viewTypes } from '../config';
+import { viewTypes, paginationTypes } from '../config';
 
 function handleViewTypeClick(viewOption) {
     const viewType = viewOption.target
         ? viewOption.target.value
         : viewOption.viewType;
     this.state.unbxdCore.options.extraParams['viewType'] = viewType;
-    this.state.unbxdCore.setPageStart(0);
-    this.state.unbxdCore.getResults();
+    const { unbxdCore, unbxdState } = this.state;
+    if (
+        unbxdState.paginationType === paginationTypes.INFINITE_SCROLL ||
+        unbxdState.paginationType === paginationTypes.CLICK_N_SCROLL
+    ) {
+        unbxdCore.setPageStart(0);
+    }
+    unbxdCore.getResults();
     this.setState((currentState) => {
         if (viewType === viewTypes.GRID)
             return {

diff --git a/src/utils/unbxdCallBack.js b/src/utils/unbxdCallBack.js
@@ -1,6 +1,6 @@
 import { searchEvents, searchStatus } from '../config';
 import { trackFacetClick } from '../modules/analytics';
-import { getActiveFacets } from '../utils';
+import getActiveFacets from './getActiveFacets';
 
 function unbxdCallBack(unbxdSearchObj, eventName, data) {
     if (eventName === searchEvents.AFTER_API_CALL) {