-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
organised passing of data and helpers.
- Loading branch information
1 parent
f38af4f
commit 32c0ec0
Showing
22 changed files
with
680 additions
and
79 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import React from 'react'; | ||
|
||
const NoProducts = () => { | ||
return (<div className='UNX-no-products-container'>Sorry! No products found!</div>) | ||
} | ||
|
||
export default NoProducts; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,150 @@ | ||
import React from 'react'; | ||
import AppContext from '../../common/context' | ||
import { ProductContextProvider } from './context' | ||
|
||
import PropTypes from 'prop-types'; | ||
|
||
import ViewTypes from './ViewTypes'; | ||
import ProductsView from './ProductsView'; | ||
import { conditionalRenderer } from '../../common/utils'; | ||
import { getProductViewType } from './utils' | ||
|
||
class Products extends React.PureComponent { | ||
|
||
ProductContext = React.createContext(); | ||
|
||
static contextType = AppContext; | ||
|
||
static ViewTypes = ViewTypes; | ||
static ProductsView = ProductsView; | ||
|
||
onViewToggle = (event) => { | ||
this.setState({ productViewType: event.target.dataset.viewtype }) | ||
} | ||
|
||
constructor(props) { | ||
super(props); | ||
|
||
const { productViewTypes } = this.props | ||
|
||
//Lets fallback to grid view | ||
const productViewType = getProductViewType(productViewTypes)[0]; | ||
|
||
this.state = { | ||
productViewType, | ||
} | ||
} | ||
|
||
componentDidMount() { | ||
|
||
const { helpers: { setProductConfiguration } } = this.context; | ||
|
||
const { pageSize, productMap, showVariants, | ||
variantsCount, productVariantMap, paginationType } = this.props | ||
|
||
//generate required fields here based on productMap and productVariantMap | ||
const requiredFields = Object.values(productMap); | ||
const variantRequiredFields = Object.values(productVariantMap); | ||
|
||
//Set the main config | ||
//Do not set pageSize if pagination type is FIXED_SCROLLING | ||
setProductConfiguration({ | ||
pageSize, requiredFields, showVariants, variantsCount, variantRequiredFields, paginationType | ||
}); | ||
} | ||
|
||
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 DefaultRender = <React.Fragment> | ||
<ViewTypes /> | ||
<ProductsView /> | ||
</React.Fragment> | ||
|
||
return (<ProductContextProvider value={this.getProductProps()}> | ||
{conditionalRenderer(this.props.children, this.getProductProps(), DefaultRender)} | ||
</ProductContextProvider>) | ||
} | ||
} | ||
|
||
Products.defaultProps = { | ||
perRow: 5, | ||
pageSize: 10, | ||
productMap: { productName: "title", uniqueId: "uniqueId", imageUrl: "imageUrl" }, | ||
ZeroResultsComponent: false, | ||
paginationType: 'FIXED_PAGINATION', | ||
heightDiffToTriggerNextPage: 50, | ||
showVariants: false, | ||
} | ||
|
||
Products.propTypes = { | ||
perRow: PropTypes.number, | ||
pageSize: PropTypes.number, | ||
productMap: PropTypes.object.isRequired, | ||
ZeroResultsComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func]), | ||
paginationType: PropTypes.string, | ||
heightDiffToTriggerNextPage: PropTypes.number, | ||
showVariants: PropTypes.bool, | ||
variantsCount: PropTypes.number, | ||
productVariantMap: PropTypes.object, | ||
} | ||
|
||
export default Products; |
Oops, something went wrong.