diff --git a/package.json b/package.json index 55faae9a..56223727 100644 --- 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 index 3ed3087f..4a3e7bc3 100644 --- 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 index 7e59051a..3017b559 100644 --- 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 ( - {({ 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 = - - - - - return ( - {conditionalRenderer(this.props.children, { - state: this.state, - getProductsProp, - }, DefaultRender)} - ) - } - } - ) + const DefaultRender = + + + + + return ( + {conditionalRenderer(this.props.children, this.getProductProps(), DefaultRender)} + ) } } diff --git a/src/modules/Products/ProductsView.js b/src/modules/Products/ProductsView.js index 4839f4b3..53e08b9b 100644 --- a/src/modules/Products/ProductsView.js +++ b/src/modules/Products/ProductsView.js @@ -8,7 +8,10 @@ import ProductsWrapper from './ProductsWrapper'; const ProductsView = () => { - return ({({ productViewType, getSearchResults, ZeroResultsComponent, ...props }) => { + return ({({ 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 ; } - return () + return () }} ); diff --git a/src/modules/Products/ViewTypes.js b/src/modules/Products/ViewTypes.js index fde62867..9deed8a8 100644 --- 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 ({({ productViewTypes, productViewType, onViewToggle }) => { + return ({({ data, helpers }) => { + + const { productViewTypes, productViewType } = data; + const { onViewToggle } = helpers; const validViewTypes = getProductViewType(productViewTypes);