94 lines
3.9 KiB
JavaScript
94 lines
3.9 KiB
JavaScript
import React, {Component} from 'react';
|
|
import {connect} from 'react-redux';
|
|
import {
|
|
Navbar,
|
|
Row,
|
|
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() {
|
|
if (this.props.selectedShop) {
|
|
this.props.dispatch(fetchShopPackages(this.props.selectedShop));
|
|
}
|
|
}
|
|
|
|
onLoadMore() {
|
|
if (this.props.selectedShop) {
|
|
this.props.dispatch(fetchShopPackages(this.props.selectedShop, this.props.shopPage + 1));
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const {shopPackages, selectedShop, isLoading, shopHasMorePackages, shopSearch} = this.props;
|
|
|
|
return (
|
|
<div id="co-market-shop">
|
|
<Col>
|
|
<Navbar></Navbar>
|
|
</Col>
|
|
<Row>
|
|
<Col xl="8" lg="8" md="8" sm="12" xs="12">
|
|
<WiaasBox id="co-market-big-commercial">
|
|
<img className="description-photo" src="/static/img/WIAAS_Market_banner.jpg" alt="big-commercial"/>
|
|
</WiaasBox>
|
|
</Col>
|
|
<Col xl="4" lg="4" md="4" sm="12" xs="12">
|
|
<WiaasBox id="co-market-commercials">
|
|
<img alt="wiaas commercial" src="/static/img/WIAAS_Market_SMO_infobox.jpg" className="commercial-photo"/>
|
|
</WiaasBox>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<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>
|
|
}
|
|
</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>
|
|
);
|
|
}
|
|
}
|
|
|
|
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
|
|
});
|
|
|
|
export default connect(mapStateToProps)(CoMarketPackagesContainer); |