-
Notifications
You must be signed in to change notification settings - Fork 22
/
Shelf.js
121 lines (111 loc) · 2.97 KB
/
Shelf.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import PropTypes from 'prop-types'
import { path } from 'ramda'
import React, { Component } from 'react'
import { graphql } from 'react-apollo'
import { compose, branch, renderComponent } from 'recompose'
import { withRuntimeContext, Loading } from 'vtex.render-runtime'
import OrdenationTypes, {
getOrdenationNames,
getOrdenationValues,
} from './OrdenationTypes'
import ProductList from './ProductList'
import { productListSchemaPropTypes } from './propTypes'
import productsQuery from './queries/productsQuery.gql'
import ShelfContent from './ShelfContent'
import shelf from './shelf.css'
/**
* Shelf Component. Queries a list of products and shows them.
*/
class Shelf extends Component {
shouldComponentUpdate(nextProps) {
return !Boolean(this.props.data.error && nextProps.data.error)
}
render() {
const { data, productList, runtime } = this.props
const products = path(['products'], data)
const productListProps = {
products,
loading: data.loading,
isMobile: runtime.hints.mobile,
...productList,
}
if (data.error || data.loading) {
return null
}
return (
<div className={`${shelf.container} pv4 pb9`}>
<ProductList {...productListProps} />
</div>
)
}
}
Shelf.defaultProps = {
productList: ProductList.defaultProps,
}
Shelf.getSchema = props => {
return {
title: 'admin/editor.shelf.title',
description: 'admin/editor.shelf.description',
type: 'object',
properties: {
category: {
title: 'admin/editor.shelf.category.title',
type: 'number',
isLayout: false,
},
collection: {
title: 'admin/editor.shelf.collection.title',
type: 'number',
isLayout: false,
},
orderBy: {
title: 'admin/editor.shelf.orderBy.title',
type: 'string',
enum: getOrdenationValues(),
enumNames: getOrdenationNames(),
default: OrdenationTypes.ORDER_BY_TOP_SALE_DESC.value,
isLayout: false,
},
productList: ProductList.getSchema(props),
},
}
}
Shelf.propTypes = {
/** Graphql data response. */
data: PropTypes.shape({
products: ShelfContent.propTypes.products,
}),
/** Category Id. */
category: PropTypes.number,
/** Collection Id. */
collection: PropTypes.number,
/** Ordenation Type. */
orderBy: PropTypes.oneOf(getOrdenationValues()),
/** ProductList schema configuration */
productList: PropTypes.shape(productListSchemaPropTypes),
}
const options = {
options: ({
category,
collection,
orderBy = OrdenationTypes.ORDER_BY_TOP_SALE_DESC.value,
maxItems = ProductList.defaultProps.maxItems,
}) => ({
ssr: false,
variables: {
category,
collection,
specificationFilters: [],
orderBy,
from: 0,
to: maxItems - 1,
},
}),
}
export default compose(
graphql(productsQuery, options),
branch(
props => props.data && props.data.loading,
renderComponent(Loading)
)
)(withRuntimeContext(Shelf))