update: Wallet page

src/common/pages/Wallet/index.js

@@ -20,11 +20,9 @@ import {
 } from 'material-ui';
 import {Table as TableAntd} from 'antd';
 import {startCase} from 'lodash';
-import {LINKS} from "../../routes";
 import {Link} from 'react-router-dom';
 import SearchIcon from 'material-ui/svg-icons/action/search';
 import UnarchiveIcon from 'material-ui/svg-icons/content/unarchive';
-import ArchiveIcon from 'material-ui/svg-icons/content/archive';
 import DC from 'decimal.js-light';
 import NumberFormat from 'react-number-format';
 import MoreIcon from 'material-ui/svg-icons/navigation/more-vert';
@@ -32,7 +30,7 @@ import LoadingDialog from "../LoadingDialog";
 import Loader from 'react-loader-advanced';
 import './style.scss';
 import {DIALOG} from "../../stores/global_ui";
-import EmptyComponent from '../EmptyComponent';
+import faker from 'faker';
 
 @inject('appstate')
 @observer
@@ -49,11 +47,6 @@ export default class WalletComponent extends React.Component {
     };
     this.defaultState = Object.assign({}, this.state);
     this.http = props.appstate.http;
-    this.authStore = props.appstate.auth;
-    this.globalUI = props.appstate.globalUI;
-    this.transactionStore = props.appstate.transaction;
-    this.bankStore = props.appstate.bank;
-    this.userData = props.appstate.userData;
   }
 
   componentDidMount() {
@@ -67,48 +60,42 @@ export default class WalletComponent extends React.Component {
     // this.authStore.getWallet();
   }
 
-  handleUpdateInput = (searchText) => {
-    this.setState({
-      searchText: searchText,
-    });
-  };
-
-  handleNewRequest = () => {
-    this.setState({
-      searchText: '',
-    });
-  };
-
-  tabsHandleChange = (value) => {
-    this.setState({
-      slideIndex: value,
-    });
-  };
-
-  search = (event)=>{
-    if(event.target.value.length == 0){
-      this.transactionStore.isSearching = false;
-    }
-    else{
-      this.transactionStore.isSearching = true;
-      this.transactionStore.search(event.target.value);
-    }
-  };
-
-  handleChangeSorter = (pagination, filters, sorter) => {
-    // console.log('Various parameters', pagination, filters, sorter);
-    this.setState({
-      filteredInfo: filters,
-      sortedInfo: sorter,
-    });
-  };
-
-  handleChange = (event, index, value) => this.setState({value});
-
   render() {
     const voucher = <NumberFormat value={(500000).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>;
     const points = <NumberFormat value={15000} displayType={'text'} thousandSeparator={true}/>;
 
+    const data = [
+      {
+        id: faker.random.uuid(),
+        created_at: faker.date.past(),
+        type: 'Points',
+        amount: faker.commerce.price()
+      },
+      {
+        id: faker.random.uuid(),
+        created_at: faker.date.past(),
+        type: 'Points',
+        amount: faker.commerce.price()
+      },
+      {
+        id: faker.random.uuid(),
+        created_at: faker.date.past(),
+        type: 'Voucher',
+        amount: faker.commerce.price()
+      },
+      {
+        id: faker.random.uuid(),
+        created_at: faker.date.past(),
+        type: 'Voucher',
+        amount: faker.commerce.price()
+      },
+      {
+        id: faker.random.uuid(),
+        created_at: faker.date.past(),
+        type: 'Points',
+        amount: faker.commerce.price()
+      },
+    ];
 
     const columns = [{
       title: 'Id',
@@ -133,25 +120,26 @@ export default class WalletComponent extends React.Component {
         dataIndex: 'type',
         key: 'type',
         className: 'recentOrder-noOrder',
-        render: (text) => <span>{text.name}</span>
+        render: (text) => <span>{text}</span>
-      },
-
-      {
-        title: 'Status',
-        dataIndex: 'status',
-        key: 'status',
-        className: 'recentOrder-status',
-        render: (text) => <div><span>{text === 'created' ? 'Waiting Approval' : startCase(text)}</span></div>
       },
+      // {
+      //   title: 'Status',
+      //   dataIndex: 'status',
+      //   key: 'status',
+      //   className: 'recentOrder-status',
+      //   render: (text) => <div><span>{text === 'created' ? 'Waiting Approval' : startCase(text)}</span></div>
+      // },
       {
         title: 'Amount',
         dataIndex: 'amount',
         key: 'amount',
         className: 'recentOrder-customer bolder green',
         render: (text) => {
-          return <NumberFormat
+          return <span>
-            value={new DC(text).toNumber()} displayType={'text'}
+            <NumberFormat
-            thousandSeparator={true} prefix={'Rp. '}/>
+              value={new DC(text).toNumber()} displayType={'text'}
+              thousandSeparator={true}/>
+          </span>
 
         }
 
@@ -165,30 +153,18 @@ export default class WalletComponent extends React.Component {
               <h3 className="headerMenu">Wallet</h3>
             </div>
           </div>
-          {
+          <div>
-            (this.transactionStore.saldo.length === 2) ?
+            <div className="col s6 m6">
-              <div>
+              <Card className="cardLite row">
-                <div className="col s6 m6">
+                <CardTitle titleStyle={{color:'#6772e5'}} title={voucher} subtitle="Voucher"/>
-                  <Card className="cardLite row">
+              </Card>
-                    <CardTitle titleStyle={{color:'#6772e5'}} title={voucher} subtitle="Voucher"/>
+            </div>
-                  </Card>
+            <div className="col s6 m6">
-                </div>
+              <Card className="cardLite row">
-                <div className="col s6 m6">
+                <CardTitle titleStyle={{color:'#6772e5'}} title={points} subtitle="Points"/>
-                  <Card className="cardLite row">
+              </Card>
-                    <CardTitle titleStyle={{color:'#6772e5'}} title={points} subtitle="Points"/>
+            </div>
-                  </Card>
+          </div>
-                </div>
-              </div>
-              :
-              <div className="col s12 m12">
-                <Card className="cardLite row">
-                  <CardTitle title={voucher} subtitle="Your Voucher"/>
-                </Card>
-                <Card className="cardLite row">
-                  <CardTitle title={points} subtitle="Your Points"/>
-                </Card>
-              </div>
-          }
 
           <div className="col s12">
             <Card className="cardLite" style={{paddingBottom: 5}}>
@@ -240,14 +216,14 @@ export default class WalletComponent extends React.Component {
               </Toolbar>
               <Divider/>
               <div>
-                <Loader show={this.globalUI.loadingVisibility} message={<LoadingDialog/>}
+                <Loader show={false} message={<LoadingDialog/>}
                         messageStyle={{textAlign: 'center'}}
                         backgroundStyle={{backgroundColor: 'rgba(255,255,255,0.5)'}}>
                   <TableAntd
                     pagination={true}
-                    className='table-padded'
+                    className='table-padded tableWallet'
-                    dataSource={this.transactionStore.isSearching ? this.transactionStore.transactionListFiltered : this.transactionStore.list}
+                    dataSource={data}
-                    onChange={this.handleChangeSorter}
+                    // onChange={this.handleChangeSorter}
                     columns={columns}
                     // onRow={(record) => {`
                     //   return {

src/common/pages/Wallet/style.scss

@@ -1,5 +1,10 @@
 .wallet {
   margin-top: 35px;
+
+  .tableWallet{
+    padding: 15px;
+  }
+
   .container {
     padding: 25px;