organised passing of data and helpers.

unbxd · Jun 1, 2020 · f03d6a1 · f03d6a1
1 parent f38af4f
commit f03d6a1
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 79 deletions.
diff --git a/package.json b/package.json
@@ -71,8 +71,7 @@
     "babel-polyfill": "^6.26.0",
     "babel-runtime": "^6.26.0",
     "react": "16.7.0",
-    "react-dom": "16.7.0",
-    "unbxd-search-core": "../search-JS-core"
+    "react-dom": "16.7.0"
   },
   "keywords": [
     "searchmodule"

diff --git a/src/App.js b/src/App.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import UnbxdSearch from 'unbxd-search-core';
+import UnbxdSearch from '@unbxd-ui/unbxd-search-core';
 
 import { AppContextProvider } from './common/context';
 import searchConfigurations from './config';

diff --git a/src/modules/Products/Products.js b/src/modules/Products/Products.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import AppContext, { AppContextConsumer } from '../../common/context'
+import AppContext from '../../common/context'
 import { ProductContextProvider } from './context'
 
 import PropTypes from 'prop-types';
@@ -25,23 +25,13 @@ class Products extends React.PureComponent {
     constructor(props) {
         super(props);
 
-        const { ZeroResultsComponent, perRow, pageSize,
-            paginationType, productMap, productVariantMap, productViewTypes,
-            heightDiffToTriggerNextPage } = this.props
+        const { productViewTypes } = this.props
 
         //Lets fallback to grid view
         const productViewType = getProductViewType(productViewTypes)[0];
 
         this.state = {
-            productViewTypes,
             productViewType,
-            ZeroResultsComponent,
-            perRow,
-            pageSize,
-            paginationType,
-            heightDiffToTriggerNextPage,
-            productMap,
-            productVariantMap
         }
     }
 
@@ -63,70 +53,75 @@ class Products extends React.PureComponent {
         });
     }
 
-    getProps = () => {
-        return { ...this.state, helpers: this.helpers }
+    getProductProps() {
+
+        const { unbxdCore } = this.context;
+        const { ZeroResultsComponent,
+            perRow,
+            pageSize,
+            paginationType,
+            productMap,
+            productVariantMap,
+            productViewTypes,
+            heightDiffToTriggerNextPage } = this.props
+
+        const getSearchResults = unbxdCore.getSearchResults.bind(unbxdCore);
+        const setPageStart = unbxdCore.setPageStart.bind(unbxdCore);
+        const getPaginationInfo = unbxdCore.getPaginationInfo.bind(unbxdCore);
+        const getResults = unbxdCore.getResults.bind(unbxdCore);
+
+        //Get next page method
+        const getNextPage = () => {
+
+            const { currentPage } = getPaginationInfo();
+            const newStart = currentPage === 0 ? pageSize : (currentPage * pageSize);
+            setPageStart(newStart);
+            getResults();
+            console.log("called getNextPage")
+        }
+
+        const onProductClick = (event) => {
+            console.log("Click event on product ", event.target.dataset.uniqueid)
+        }
+
+        //onClick for products
+        const getProductsProp = ({ onClick, ...props }) => ({
+            onClick: () => {
+                onProductClick();
+                onClick();
+            },
+            getSearchResults,
+            getNextPage,
+            ...props
+        })
+
+        const data = {
+            perRow,
+            paginationType, productMap, productVariantMap, productViewTypes,
+            heightDiffToTriggerNextPage, ...this.state
+        };
+        const helpers = {
+            ZeroResultsComponent,
+            onViewToggle: this.onViewToggle,
+            getProductsProp,
+            getNextPage,
+            onProductClick,
+            getSearchResults,
+            getNextPage
+        }
+        return { data, helpers }
+
     }
 
     render() {
-
-        const { pageSize } = this.state;
-
-        return (<AppContextConsumer>
-            {({ unbxdCore }) => {
-
-                const getSearchResults = unbxdCore.getSearchResults.bind(unbxdCore);
-                const setPageStart = unbxdCore.setPageStart.bind(unbxdCore);
-                const getPaginationInfo = unbxdCore.getPaginationInfo.bind(unbxdCore);
-                const getResults = unbxdCore.getResults.bind(unbxdCore);
-
-                //Get next page method
-                const getNextPage = () => {
-
-                    const { currentPage } = getPaginationInfo();
-                    const newStart = currentPage === 0 ? pageSize : (currentPage * pageSize);
-                    setPageStart(newStart);
-                    getResults();
-                    console.log("called getNextPage")
-                }
-
-                const onProductClick = (event) => {
-                    console.log("Click event on product ", event.target.dataset.uniqueid)
-                }
-
-                //onClick for products
-                const getProductsProp = ({ onClick, ...props }) => ({
-                    onClick: () => {
-                        onProductClick();
-                        onClick();
-                    },
-                    getSearchResults,
-                    getNextPage,
-                    ...props
-                })
-
-                const helpers = {
-                    onViewToggle: this.onViewToggle,
-                    getSearchResults,
-                    getNextPage,
-                    onProductClick
-                }
-
-                const getProps = () => ({ ...this.state, ...helpers })
-
-                const DefaultRender = <React.Fragment>
-                    <ViewTypes />
-                    <ProductsView />
-                </React.Fragment>
-
-                return (<ProductContextProvider value={getProps()}>
-                    {conditionalRenderer(this.props.children, {
-                        state: this.state,
-                        getProductsProp,
-                    }, DefaultRender)}
-                </ProductContextProvider>)
-            }
-            }
-        </AppContextConsumer >)
+        const DefaultRender = <React.Fragment>
+            <ViewTypes />
+            <ProductsView />
+        </React.Fragment>
+
+        return (<ProductContextProvider value={this.getProductProps()}>
+            {conditionalRenderer(this.props.children, this.getProductProps(), DefaultRender)}
+        </ProductContextProvider>)
     }
 }
 

diff --git a/src/modules/Products/ProductsView.js b/src/modules/Products/ProductsView.js
@@ -8,7 +8,10 @@ import ProductsWrapper from './ProductsWrapper';
 
 
 const ProductsView = () => {
-    return (<ProductContextConsumer>{({ productViewType, getSearchResults, ZeroResultsComponent, ...props }) => {
+    return (<ProductContextConsumer>{({ data, helpers }) => {
+
+        const { productViewType, productMap, perRow, productVariantMap, paginationType, heightDiffToTriggerNextPage } = data;
+        const { getSearchResults, ZeroResultsComponent, onProductClick, getNextPage } = helpers;
 
         const { numberOfProducts = 0, products = [] } = getSearchResults() || {};
 
@@ -23,7 +26,17 @@ const ProductsView = () => {
             return <NoProducts />;
         }
 
-        return (<ProductsWrapper productViewType={productViewType} products={products} {...props} />)
+        return (<ProductsWrapper
+            productViewType={productViewType}
+            perRow={perRow}
+            products={products}
+            productMap={productMap}
+            productVariantMap={productVariantMap}
+            paginationType={paginationType}
+            getNextPage={getNextPage}
+            heightDiffToTriggerNextPage={heightDiffToTriggerNextPage}
+            onProductClick={onProductClick}
+        />)
 
     }}
     </ProductContextConsumer>);

diff --git a/src/modules/Products/ViewTypes.js b/src/modules/Products/ViewTypes.js
@@ -5,7 +5,10 @@ import { productViewTypes as productViewTypesOptions } from './utils'
 import { getProductViewType } from './utils'
 
 const ViewTypes = () => {
-    return (<ProductContextConsumer>{({ productViewTypes, productViewType, onViewToggle }) => {
+    return (<ProductContextConsumer>{({ data, helpers }) => {
+
+        const { productViewTypes, productViewType } = data;
+        const { onViewToggle } = helpers;
 
         const validViewTypes = getProductViewType(productViewTypes);