updates

src/common/pages/Dashboard/index.js

@@ -1,6 +1,8 @@
 import React from "react";
 import {inject, observer} from "mobx-react";
+import compose from 'recompose/compose';
 import withStyles from "@material-ui/core/styles/withStyles";
+import withWidth, {isWidthUp} from '@material-ui/core/withWidth';
 import QueueAnim from 'rc-queue-anim';
 import "./style.scss";
 import NumberFormat from 'react-number-format';
@@ -126,6 +128,21 @@ class DashboardComponent extends React.Component {
 
   render() {
     const {classes} = this.props;
+    const getGridListCols = () => {
+      if (isWidthUp('lg', this.props.width)) {
+        return 4;
+      }
+
+      if (isWidthUp('md', this.props.width)) {
+        return 3;
+      }
+
+      if (isWidthUp('sm', this.props.width)) {
+        return 2;
+      }
+
+      return 1;
+    }
     const settings = {
       arrows: true,
       infinite: true,
@@ -237,11 +254,11 @@ class DashboardComponent extends React.Component {
             spacing={24}
             style={{marginTop: 30}}>
 
-            <Grid item xs={9} sm={9} md={9} lg={9}>
+            <Grid item xs={10} sm={10} md={9} lg={9}>
               <Typography variant="h6" gutterBottom>
                 Voucher & Gift Card
               </Typography>
-              <MuiGridList spacing={10} cellHeight={180} cols={4} className={classes.gridList} style={{
+              <MuiGridList cellHeight={180} cols={getGridListCols()} className={classes.gridList} style={{
                 width: '100%',
                 height: undefined,
               }}>
@@ -296,40 +313,6 @@ class DashboardComponent extends React.Component {
                 }
               </MuiGridList>
             </Grid>
-
-            {/*<Grid item xs={12}>*/}
-            {/*<div className={"voucher"} style={{marginTop: 0}}>*/}
-            {/*<div className="row">*/}
-            {/*<div className="col l12 m12 s12 padding">*/}
-            {/*<h3>*/}
-            {/*Voucher & Gift Card*/}
-            {/*</h3>*/}
-
-            {/*<Row gutter={10}>*/}
-            {/*{*/}
-            {/*(this.vouchersStore.list.length > 0) ?*/}
-            {/*this.vouchersStore.list.map((item, index) => {*/}
-            {/*return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>*/}
-            {/*<ItemCard data={item}/>*/}
-            {/*</Col>)*/}
-            {/*})*/}
-            {/*: (*/}
-            {/*<EmptyComponent type="default4" header="" content="There is no voucher in sight"/>*/}
-            {/*)*/}
-            {/*}*/}
-            {/*</Row>*/}
-
-            {/*<ModalVouchersComponent*/}
-            {/*title={this.state.data.name + ' Vouchers'}*/}
-            {/*data={this.state.data}*/}
-            {/*isVisible={this.state.isOpened}*/}
-            {/*onOk={() => this.setState({isOpened: false})}*/}
-            {/*onCancel={() => this.setState({isOpened: false})}*/}
-            {/*/>*/}
-            {/*</div>*/}
-            {/*</div>*/}
-            {/*</div>*/}
-            {/*</Grid>*/}
           </Grid>
         </Grid>
         <ModalVouchersComponent
@@ -345,4 +328,4 @@ class DashboardComponent extends React.Component {
   }
 }
 
-export default withStyles(styles)(DashboardComponent);
+export default compose(withStyles(styles), withWidth(),)(DashboardComponent);