Fixes

frontend/src/containers/coMarket/CoMarketPackagesContainer.jsx

@@ -3,12 +3,14 @@ import {connect} from 'react-redux';
 import {
     Navbar,
     Row,
-    Col
+    Col,
+    Button
 } from 'reactstrap';
 import ShopItem from './components/ShopItem.jsx';
 import WiaasBox from '../../mainComponents/box/WiaasBox.jsx';
 import CoMarketNavContainer from './CoMarketNavContainer.jsx';
 import {fetchShopPackages} from '../../actions/coMarket/coMarketPackagesActions';
+import {coMarketTexts} from "../../constants/coMarketConstants";
 
 class CoMarketPackagesContainer extends Component {
     componentDidMount() {
@@ -17,8 +19,14 @@ class CoMarketPackagesContainer extends Component {
         }
     }
 
+    onLoadMore() {
+        if (this.props.selectedShop) {
+            this.props.dispatch(fetchShopPackages(this.props.selectedShop, this.props.shopPage + 1));
+        }
+    }
+
     render() {
-        const {shopPackages, selectedShop, isLoading} = this.props;
+        const {shopPackages, selectedShop, isLoading, shopHasMorePackages, shopSearch} = this.props;
 
         return (
             <div id="co-market-shop">
@@ -41,22 +49,34 @@ class CoMarketPackagesContainer extends Component {
                     <Col xl="8" lg="12" md="12">
                         <WiaasBox id="co-market-packages" customHeader={CoMarketNavContainer}>
                             <Row>
+                                {
+                                    (shopPackages) &&
+                                    shopPackages.map((shopPackage, mapKey) => <ShopItem key={shopPackage.id}
+                                                                                        shopId={selectedShop.id}
+                                                                                        shopPackage={shopPackage}/>)
+                                }
                                 {
                                     isLoading &&
                                     <Col xl="12" className="loader">
                                         <i className="fa fa-spinner fa-spin fa-3x" aria-hidden="true"></i>
                                     </Col>
                                 }
-                                {
-                                    (shopPackages && !isLoading) &&
-                                    shopPackages.map((shopPackage, mapKey) => <ShopItem key={shopPackage.id}
-                                                                                        shopId={selectedShop.id}
-                                                                                        shopPackage={shopPackage}/>)
-                                }
                             </Row>
                         </WiaasBox>
                     </Col>
                 </Row>
+                {
+                    shopHasMorePackages && !isLoading && !shopSearch && (
+                        <Row>
+                            <Col xl="8" lg="12" md="12">
+                                <Button
+                                    size="lg" block outline
+                                    className="shop-package-load-more-btn"
+                                    onClick={() => {this.onLoadMore()}}
+                                >{coMarketTexts.buttons.LOAD_MORE}</Button>
+                            </Col>
+                        </Row>)
+                }
             </div>
         );
     }
@@ -64,6 +84,9 @@ class CoMarketPackagesContainer extends Component {
 
 const mapStateToProps = (state) => ({
     shopPackages: state.coMarketPackagesReducer.shopPackages,
+    shopHasMorePackages: state.coMarketPackagesReducer.shopHasMorePackages,
+    shopPage: state.coMarketPackagesReducer.shopPage,
+    shopSearch: state.coMarketPackagesReducer.shopSearch,
     selectedShop: state.coMarketPackagesReducer.selectedShop,
     isLoading: state.coMarketPackagesReducer.isLoading
 });