@shopgate/engage/favorites/components/List/List.js

Shopgate's ENGAGE library.

import _regeneratorRuntime from"@babel/runtime/regenerator";function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}import React,{useState,useEffect,useCallback,useMemo}from'react';import PropTypes from'prop-types';import{connect}from'react-redux';import{showModal}from'@shopgate/engage/core/actions';import{Accordion,Card,ConditionalWrapper}from'@shopgate/engage/components';import{makeGetFavorites,getUseGetFavoriteIdsPipeline}from'@shopgate/pwa-common-commerce/favorites/selectors';import{FAVORITES_SHOW_LIMIT}from'@shopgate/engage/favorites/constants';import ListAccordionLabel from"./ListAccordionLabel";import ListContent from"./ListContent";import styles from"./styles";import ListAccordionHeader from"./ListAccordionHeader";/**
 * @param {Object} _ State
 * @param {Object} props Props
 * @returns {Object}
 */var makeMapStateToProps=function makeMapStateToProps(_,_ref){var id=_ref.id;var getFavorites=makeGetFavorites(function(){return id;});return function(state){return{items:getFavorites(state),useGetFavoriteIdsPipeline:getUseGetFavoriteIdsPipeline(state)};};};/**
 * @param {Object} dispatch Dispatch
 * @param {Object} props The component props
 * @returns {Object}
 */var mapDispatchToProps=function mapDispatchToProps(dispatch,props){return{remove:function(){var _remove=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(id){var confirmed;return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:_context.next=2;return dispatch(showModal({message:'favorites.delete_list_modal.message',title:'favorites.delete_list_modal.title',params:{name:props.name}}));case 2:confirmed=_context.sent;if(confirmed){props.remove(id);}case 4:case"end":return _context.stop();}},_callee);}));function remove(_x){return _remove.apply(this,arguments);}return remove;}()};};/**
 * Favorite List component
 * @return {JSX.Element}
 */var FavoriteList=function FavoriteList(_ref2){var id=_ref2.id,name=_ref2.name,items=_ref2.items,_rename=_ref2.rename,remove=_ref2.remove,removeItem=_ref2.removeItem,addToCart=_ref2.addToCart,hasMultipleFavoritesListsSupport=_ref2.hasMultipleFavoritesListsSupport,useGetFavoriteIdsPipeline=_ref2.useGetFavoriteIdsPipeline;var _useState=useState(FAVORITES_SHOW_LIMIT),_useState2=_slicedToArray(_useState,2),offset=_useState2[0],setOffset=_useState2[1];var filteredItems=useMemo(function(){/**
     * The getFavoriteIds pipeline doesn't return full products, but only product ids. Product data
     * is selected inside the ListContent component via the ProductProvider. To avoid requests with
     * huge response data, the favlist items are splitted into chunks, so that the ProductProvider
     * only has to request fresh data for each chunk.
     *
     * As long as not all products from the list are shown, a "Load More" button is presented to the
     * user, which will add an additional chunk of product ids to the ListContent component.
     */if(useGetFavoriteIdsPipeline){return items.slice(0,offset);}// When the getFavorites pipeline is used, no special handling is necessary. "items" can passed
// the the ListContent component as they are.
return items;},[items,offset,useGetFavoriteIdsPipeline]);var allFavoritesLoaded=useMemo(function(){if(useGetFavoriteIdsPipeline){return items.length-filteredItems.length>0;}/**
     * In case of getFavorites pipeline is used, and all favorites are always loaded, "false" as
     * return value might seem a bit weird, but the value is actually used to determine if the
     * load more button is supposed to be shown (not needed if all favorites are already present).
     */return false;},[filteredItems.length,items.length,useGetFavoriteIdsPipeline]);var _useState3=useState(allFavoritesLoaded),_useState4=_slicedToArray(_useState3,2),showLoadMoreButton=_useState4[0],setShowLoadMoreButton=_useState4[1];var handleLoadMore=useCallback(function(){setOffset(offset+FAVORITES_SHOW_LIMIT);},[offset]);useEffect(function(){setShowLoadMoreButton(allFavoritesLoaded);},[offset,allFavoritesLoaded]);return React.createElement(ConditionalWrapper,{condition:hasMultipleFavoritesListsSupport,wrapperFalsy:function wrapperFalsy(children){return React.createElement("div",{className:styles.rootNoFavoritesLists},children);},wrapper:function wrapper(children){return React.createElement(Card,{className:styles.root},React.createElement(Accordion,{className:"",renderAdditionalHeaderContent:function renderAdditionalHeaderContent(){return React.createElement(ListAccordionHeader,{rename:function rename(newName){return _rename(id,newName);},remove:remove,id:id});},renderLabel:function renderLabel(){return React.createElement(ListAccordionLabel,{title:name});},chevronPosition:"left",startOpened:true},children));}},React.createElement(ListContent,{listId:id,items:filteredItems,removeItem:removeItem,addToCart:addToCart,onLoadMore:handleLoadMore,showLoadMoreButton:showLoadMoreButton}));};FavoriteList.defaultProps={hasMultipleFavoritesListsSupport:false,useGetFavoriteIdsPipeline:false};export default connect(makeMapStateToProps,mapDispatchToProps)(FavoriteList);