fix(products): rename productName to title. optimise the products pro…

…cessing
unbxd · Apr 28, 2021 · 253392b · 253392b
1 parent e2c681d
commit 253392b
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 85 deletions.
diff --git a/demo/src/components/ProductsListing.js b/demo/src/components/ProductsListing.js
@@ -4,15 +4,15 @@ import { Products } from '@unbxd-ui/react-search-sdk';
 import { ProductTypeContext } from '../context';
 
 const attributesMap = {
-    productName: 'PRODUCT_NAME',
+    title: 'title',
     uniqueId: 'uniqueId',
-    imageUrl: 'IMAGE_URL',
-    sellingPrice: 'PRODUCT_PRICE',
-    productUrl: 'PRODUCT_URL'
+    imageUrl: 'productImage',
+    sellingPrice: 'sortPrice',
+    productUrl: 'productUrl'
 };
 
 const variantAttributesMap = {
-    productName: 'v_title',
+    title: 'v_title',
     uniqueId: 'vId',
     imageUrl: 'imageUrl',
     price: 'v_RRP_Price',

diff --git a/src/modules/products/productsWrapper/ProductsWrapper.js b/src/modules/products/productsWrapper/ProductsWrapper.js
@@ -7,7 +7,7 @@ import NoProducts from './NoProducts';
 import { getProductPids } from '../utils';
 import { paginationTypes } from '../../../config';
 import { debounce, cloneElement } from '../../../common/utils';
-import { DEBOUNCE_TIME } from '../utils';
+import { DEBOUNCE_TIME, getProductFields } from '../utils';
 import { searchStatus, viewTypes } from '../../../config';
 
 class ProductsWrapper extends React.PureComponent {
@@ -65,13 +65,32 @@ class ProductsWrapper extends React.PureComponent {
             sort,
             unbxdCoreStatus,
             numberOfProducts,
+            attributesMap,
+            showVariants,
+            variantAttributesMap,
+            showSwatches,
+            swatchAttributesMap,
+            groupBy,
             getAnalytics
         } = this.props;
         const { trackProductImpressions } = getAnalytics();
+        const processedProducts = products.map((product) => {
+            const productValues = getProductFields({
+                product,
+                attributesMap,
+                showVariants,
+                variantAttributesMap,
+                showSwatches,
+                swatchAttributesMap,
+                groupBy
+            });
+            return productValues;
+        });
+
         const loadedAllResults =
             start === 0
                 ? products.length === numberOfProducts
-                : [...prevState.products, ...products].length ===
+                : [...prevState.products, ...processedProducts].length ===
                   numberOfProducts;
 
         if (
@@ -80,7 +99,7 @@ class ProductsWrapper extends React.PureComponent {
         ) {
             if (this.state.products.length === 0 && products.length) {
                 this.setState({
-                    products,
+                    products: processedProducts,
                     start,
                     hasMoreResults: !loadedAllResults
                 });
@@ -136,12 +155,15 @@ class ProductsWrapper extends React.PureComponent {
                 }
                 start === 0
                     ? this.setState({
-                          products: products,
+                          products: processedProducts,
                           start,
                           hasMoreResults: !loadedAllResults
                       })
                     : this.setState({
-                          products: [...prevState.products, ...products],
+                          products: [
+                              ...prevState.products,
+                              ...processedProducts
+                          ],
                           start,
                           hasMoreResults: !loadedAllResults
                       });
@@ -154,7 +176,7 @@ class ProductsWrapper extends React.PureComponent {
                     query,
                     getProductPids(products, productIdAttribute)
                 );
-                this.setState({ products: products, start });
+                this.setState({ products: processedProducts, start });
                 return;
             }
         }

diff --git a/src/modules/products/productsWrapper/productCards/GridProductCard.js b/src/modules/products/productsWrapper/productCards/GridProductCard.js
@@ -3,34 +3,14 @@ import PropTypes from 'prop-types';
 
 import SwatchItem from '../swatches';
 import { List } from '../../../../components';
-import { getProductFields } from '../../utils';
 
 class GridProductCard extends React.Component {
     constructor(props) {
         super(props);
 
-        const {
-            itemData,
-            attributesMap,
-            showVariants,
-            variantAttributesMap,
-            showSwatches,
-            swatchAttributesMap,
-            groupBy
-        } = this.props;
-
-        //Get the datas from the product bases on attributesMap and create the card
-        const productValues = getProductFields({
-            itemData,
-            attributesMap,
-            showVariants,
-            variantAttributesMap,
-            showSwatches,
-            swatchAttributesMap,
-            groupBy
-        });
+        const { itemData } = this.props;
 
-        this.state = { productValues };
+        this.state = { productValues: itemData };
     }
 
     onSwatchClick = (event) => {
@@ -64,7 +44,7 @@ class GridProductCard extends React.Component {
         const product = { ...productValues, ...activeSwatch };
         const {
             uniqueId,
-            productName,
+            title,
             imageUrl,
             productUrl,
             price,
@@ -107,7 +87,7 @@ class GridProductCard extends React.Component {
                         data-uniqueid={uniqueId}
                         data-prank={prank}
                     >
-                        {productName}
+                        {title}
                     </div>
 
                     <div
@@ -135,17 +115,7 @@ class GridProductCard extends React.Component {
 }
 
 GridProductCard.propTypes = {
-    itemData: PropTypes.object.isRequired,
-    attributesMap: PropTypes.object.isRequired,
-    showVariants: PropTypes.bool.isRequired,
-    variantAttributesMap: PropTypes.object.isRequired,
-    showSwatches: PropTypes.bool,
-    swatchAttributesMap: PropTypes.object,
-    groupBy: PropTypes.string,
-    swatchItemComponent: PropTypes.element,
-    idx: PropTypes.number,
-    onClick: PropTypes.func.isRequired,
-    priceUnit: PropTypes.string.isRequired
+    itemData: PropTypes.object.isRequired
 };
 
 export default GridProductCard;
diff --git a/src/modules/products/productsWrapper/productCards/ListProductCard.js b/src/modules/products/productsWrapper/productCards/ListProductCard.js
@@ -3,34 +3,14 @@ import PropTypes from 'prop-types';
 
 import SwatchItem from '../swatches';
 import { List } from '../../../../components';
-import { getProductFields } from '../../utils';
 
 class ListProductCard extends React.Component {
     constructor(props) {
         super(props);
 
-        const {
-            itemData,
-            attributesMap,
-            showVariants,
-            variantAttributesMap,
-            showSwatches,
-            swatchAttributesMap,
-            groupBy
-        } = this.props;
-
-        //Get the datas from the product bases on attributesMap and create the card
-        const productValues = getProductFields({
-            itemData,
-            attributesMap,
-            showVariants,
-            variantAttributesMap,
-            showSwatches,
-            swatchAttributesMap,
-            groupBy
-        });
+        const { itemData } = this.props;
 
-        this.state = { productValues };
+        this.state = { productValues: itemData };
     }
 
     onSwatchClick = (event) => {
@@ -64,7 +44,7 @@ class ListProductCard extends React.Component {
         const product = { ...productValues, ...activeSwatch };
         const {
             uniqueId,
-            productName,
+            title,
             imageUrl,
             productUrl,
             price,
@@ -105,7 +85,7 @@ class ListProductCard extends React.Component {
                         data-uniqueid={uniqueId}
                         data-prank={prank}
                     >
-                        {productName}
+                        {title}
                     </div>
                     <div
                         className="-price"
@@ -132,17 +112,7 @@ class ListProductCard extends React.Component {
 }
 
 ListProductCard.propTypes = {
-    itemData: PropTypes.object.isRequired,
-    attributesMap: PropTypes.object.isRequired,
-    showVariants: PropTypes.bool.isRequired,
-    variantAttributesMap: PropTypes.object.isRequired,
-    showSwatches: PropTypes.bool,
-    swatchAttributesMap: PropTypes.object,
-    groupBy: PropTypes.string,
-    swatchItemComponent: PropTypes.element,
-    idx: PropTypes.number,
-    onClick: PropTypes.func.isRequired,
-    priceUnit: PropTypes.string.isRequired
+    itemData: PropTypes.object.isRequired
 };
 
 export default ListProductCard;
diff --git a/src/modules/products/utils/utils.js b/src/modules/products/utils/utils.js
@@ -1,5 +1,5 @@
 export const getProductFields = ({
-    itemData: product,
+    product,
     attributesMap,
     showVariants,
     variantAttributesMap,
@@ -8,17 +8,18 @@ export const getProductFields = ({
     groupBy
 }) => {
     const attributesMapper = {
-        PRODUCT_NAME: 'productName',
+        TITLE: 'title',
         PRODUCT_URL: 'productUrl',
         IMAGE_URL: 'imageUrl',
         SWATCH_IMAGE_URL: 'swatchImageUrl',
         PRICE: 'price',
-        SELLING_PRICE: 'sellingPrice',
-        UNIQUE_ID: 'uniqueId'
+        SELLING_PRICE: 'sellingPrice'
     };
+    const UNIQUE_ID = 'uniqueId';
 
     const productValues = {};
     let swatches = [];
+    productValues[UNIQUE_ID] = product[UNIQUE_ID];
     for (const key in attributesMapper) {
         const mappedKey = attributesMapper[key];
         if (product['relevantDocument'] === 'variant' && showVariants) {