feat: add wallet

src/common/pages/App/WalletComponent.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import {observer, inject} from 'mobx-react';
+import {Route as RouteDOM} from "react-router-dom";
+import {LINKS} from "../../routes";
+import NumberFormat from "react-number-format";
+
+@inject('appstate')
+@observer
+export default class WalletComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+  }
+
+  render() {
+    return (<div className={'containerWalletBar'}>
+      <span style={{display: 'none'}}>{this.props.appstate.wallet.data.wallet}</span>
+      <div className={'containerVoucher'}>
+        <p className={'titleVoucher'}>Voucher</p>
+        <RouteDOM render={({ history}) => (
+          <p onClick={() => history.push(LINKS.WALLET)} className={'textVoucher'}>
+            <NumberFormat value={(this.props.appstate.wallet.data.wallet).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>
+          </p>
+        )} />
+      </div>
+      <div className={'containerPoints'}>
+        <p className={'titlePoints'}>Points</p>
+        <RouteDOM render={({ history}) => (
+          <p onClick={() => history.push(LINKS.WALLET)} className={'textPoints'}>
+            <NumberFormat value={(this.props.appstate.wallet.data.point)} displayType={'text'} thousandSeparator={true}/>
+          </p>
+        )} />
+      </div>
+    </div>);
+  }
+}

src/common/pages/App/index.js

@@ -44,6 +44,7 @@ import EmptyComponent from '../EmptyComponent';
 import NumberFormat from 'react-number-format';
 import faker from 'faker';
 import { Route as RouteDOM } from 'react-router-dom'
+import WalletComponent from "./WalletComponent";
 
 faker.locale = 'id_ID';
 @inject("appstate")
@@ -442,24 +443,7 @@ export default class App extends React.Component {
 
               </ToolbarGroup>
               <ToolbarGroup>
-                <div className={'containerWalletBar'}>
+                <WalletComponent/>
-                  <div className={'containerVoucher'}>
-                    <p className={'titleVoucher'}>Voucher</p>
-                    <RouteDOM render={({ history}) => (
-                      <p onClick={() => history.push(LINKS.WALLET)} className={'textVoucher'}>
-                        <NumberFormat value={(500000).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>
-                      </p>
-                    )} />
-                  </div>
-                  <div className={'containerPoints'}>
-                    <p className={'titlePoints'}>Points</p>
-                    <RouteDOM render={({ history}) => (
-                      <p onClick={() => history.push(LINKS.WALLET)} className={'textPoints'}>
-                        <NumberFormat value={(15000)} displayType={'text'} thousandSeparator={true}/>
-                      </p>
-                    )} />
-                  </div>
-                </div>
 
                 {window.location.pathname.split("/")[2] == "shop" ? (
                   <IconMenu
@@ -512,7 +496,7 @@ export default class App extends React.Component {
                   </List>
                 </IconMenu>
                 ) : (<div/>)}
-                
+
 
                 <IconMenu
                   anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}

src/common/pages/Wallet/index.js

@@ -71,8 +71,8 @@ export default class WalletComponent extends React.Component {
   };
 
   render() {
-    const voucher = <NumberFormat value={(500000).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>;
+    const voucher = <NumberFormat value={(this.props.appstate.wallet.data.wallet).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>;
-    const points = <NumberFormat value={15000} displayType={'text'} thousandSeparator={true}/>;
+    const points = <NumberFormat value={this.props.appstate.wallet.data.point} displayType={'text'} thousandSeparator={true}/>;
 
     const data = [
       {

src/common/stores/appstate.js

@@ -58,6 +58,7 @@ import Odoo from './odoo';
 
 import Vouchers from './vouchers';
 import {PurchasedItemStore} from "./purchased_item";
+import WalletStore from "./wallet";
 
 export default class AppState {
   http = new Http(this.token);
@@ -117,6 +118,8 @@ export default class AppState {
   tags = new Tags(this);
   surf_turf = new Surf(this);
   purchased_items = new PurchasedItemStore(this);
+  wallet = new WalletStore(this);
+
 
   constructor(initialState) {
     this.token = initialState.token;
@@ -129,6 +132,9 @@ export default class AppState {
         this.user.getUserGeolocation();
       }
     }
+    if(this.token) {
+      this.loadDataAfterLogin();
+    }
   }
 
   @action
@@ -153,8 +159,13 @@ export default class AppState {
     this.items.push(item);
   }
 
+  @action
+  loadDataAfterLogin() {
+    this.wallet.getData();
+  }
+
   @computed get userData() {
-    const token = localStorage.getItem('id_token');
+    const token = this.token;
     if (!token) {
       return {
         user_id: '',

src/common/stores/authenticaton.js

@@ -51,6 +51,7 @@ export class Authentication {
       .then(res => {
         this.isLoggingIn = false;
         this.context.setToken(res.token);
+        this.context.loadDataAfterLogin();
       })
       .catch(err => {
         this.isLoggingIn = false;
@@ -96,7 +97,7 @@ export class Authentication {
     // .catch(err => {
     //   throw err;
     // })
-    
+
   }
 
   @action

src/common/stores/wallet.js

@@ -0,0 +1,28 @@
+import { observable, action, computed } from 'mobx';
+export default class WalletStore {
+  @observable isLoading = false;
+  @observable data = {
+    wallet: 1,
+    point: 1
+  };
+
+  constructor(context) {
+    this.context = context;
+    this.http = context.http;
+  }
+
+  @action
+  getData() {
+    this.isLoading = true;
+    return this.http.get("wallet")
+      .then(res => {
+        this.isLoading = false;
+        this.data = res;
+        return res;
+      })
+      .catch(err => {
+        this.isLoading = false;
+        throw err;
+      })
+  }
+}