Ahmad.zuhdi.y/bukopin-redemption-client-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dashboard

Browse Source
This commit is contained in:
enggar_ganteng 2019-01-29 04:49:20 +07:00
parent 15e11218ca
commit abbc2790f3
1 changed files with 259 additions and 264 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
src/common/pages/App/index.js
View File

@ -1,15 +1,15 @@
import React from "react"; import React from "react";
import {inject, observer} from "mobx-react"; import { inject, observer } from "mobx-react";
import {Link} from "react-router-dom"; import { Link } from "react-router-dom";
import {Helmet} from "react-helmet"; import { Helmet } from "react-helmet";
import "../../styles/constants.scss"; import "../../styles/constants.scss";
import "../../styles/style.scss"; import "../../styles/style.scss";
import "./style.scss"; import "./style.scss";
import {LINKS} from "../../routes"; import { LINKS } from "../../routes";
import startcase from "lodash.startcase"; import startcase from "lodash.startcase";
import Route from "./routes"; import Route from "./routes";
import moment from 'moment'; import moment from 'moment';
import {Icon, Button, Modal, notification} from 'antd'; import { Icon, Button, Modal, notification } from 'antd';
import { import {
Divider, Divider,
Drawer, Drawer,
@ -32,20 +32,19 @@ import WithdrawDialog from './../WithdrawDialog';
import IconMenus from 'material-ui/svg-icons/navigation/menu'; import IconMenus from 'material-ui/svg-icons/navigation/menu';
import LoadingDialog from '../LoadingDialog/index'; import LoadingDialog from '../LoadingDialog/index';
import * as _ from 'lodash'; // TODO: remove this, import only needed module from lodash import * as _ from 'lodash'; // TODO: remove this, import only needed module from lodash
import PrintProvider, {Print, NoPrint} from 'react-easy-print'; import { black } from "material-ui/styles/colors";
import {black} from "material-ui/styles/colors";
import cinnamonSugar from 'cinnamon-sugar'; import cinnamonSugar from 'cinnamon-sugar';
import ButterToast from 'butter-toast'; import ButterToast from 'butter-toast';
import 'material-design-icons/iconfont/material-icons.css'; import 'material-design-icons/iconfont/material-icons.css';
import {grey400, darkBlack, lightBlack} from 'material-ui/styles/colors'; import { grey400, darkBlack, lightBlack } from 'material-ui/styles/colors';
import {getMobileOperatingSystem} from '../../stores/firebase'; import { getMobileOperatingSystem } from '../../stores/firebase';
import Alert from "../../components/Alert"; import Alert from "../../components/Alert";
import EmptyComponent from '../EmptyComponent'; import EmptyComponent from '../EmptyComponent';
import NumberFormat from 'react-number-format'; import NumberFormat from 'react-number-format';
import faker from 'faker'; import faker from 'faker';
import { Route as RouteDOM } from 'react-router-dom' import { Route as RouteDOM } from 'react-router-dom'
import WalletComponent from "./WalletComponent"; import WalletComponent from "./WalletComponent";
import {APP_TYPE} from "../../config/app"; import { APP_TYPE } from "../../config/app";
faker.locale = 'id_ID'; faker.locale = 'id_ID';
@ -99,19 +98,19 @@ export default class App extends React.Component {
notification[type]({ notification[type]({
message: (title) ? title : 'Title', message: (title) ? title : 'Title',
description: (content) ? content : description: (content) ? content :
<p style={{color: "black"}}>This is the content of the notification. This is the content of the notification. <p style={{ color: "black" }}>This is the content of the notification. This is the content of the notification.
This is the content of the notification.</p>, This is the content of the notification.</p>,
icon: <Icon type={(icon) ? icon : "smile-circle"} style={{color: 'black'}}/> icon: <Icon type={(icon) ? icon : "smile-circle"} style={{ color: 'black' }} />
}); });
notification.open(); notification.open();
} else { } else {
notification.open({ notification.open({
message: (title) ? title : 'Title', message: (title) ? title : 'Title',
description: (content) ? <p style={{color: "black"}}>{content}</p> : description: (content) ? <p style={{ color: "black" }}>{content}</p> :
<p style={{color: "black"}}>This is the content of the notification. This is the content of the notification. <p style={{ color: "black" }}>This is the content of the notification. This is the content of the notification.
This is the content of the notification.</p>, This is the content of the notification.</p>,
icon: <Icon type={(icon) ? icon : "smile-circle"} style={{color: '#108ee9'}}/> icon: <Icon type={(icon) ? icon : "smile-circle"} style={{ color: '#108ee9' }} />
}); });
} }
}; };
@ -222,9 +221,9 @@ export default class App extends React.Component {
} }
handleToggleIcon = () => this.setState({open: !this.state.open}); handleToggleIcon = () => this.setState({ open: !this.state.open });
handleToggleIconSecondary = () => this.setState({openSecondary: !this.state.openSecondary}); handleToggleIconSecondary = () => this.setState({ openSecondary: !this.state.openSecondary });
handleClose = () => this.setState({open: false}); handleClose = () => this.setState({ open: false });
handleChangeSingle = (event, value) => { handleChangeSingle = (event, value) => {
@ -251,10 +250,10 @@ export default class App extends React.Component {
}); });
} }
handleChange = (event, index, value) => this.setState({value}); handleChange = (event, index, value) => this.setState({ value });
changeRoute = (path) => { changeRoute = (path) => {
this.setState({selectedMenu: path}); this.setState({ selectedMenu: path });
if (window.innerWidth < 600) { if (window.innerWidth < 600) {
this.handleClose() this.handleClose()
} }
@ -274,7 +273,7 @@ export default class App extends React.Component {
render() { render() {
const {redirect} = this.state; const { redirect } = this.state;
if (redirect) { if (redirect) {
this.props.history.replace(LINKS.LOGIN); this.props.history.replace(LINKS.LOGIN);
// return <Redirect to={{ // return <Redirect to={{
@ -320,12 +319,12 @@ export default class App extends React.Component {
// })() : ''; // })() : '';
// } // }
const {userData} = this.appstate; const { userData } = this.appstate;
// const applicationIcon = (this.settingStore.isIconEmpty) ? "/assets/images/bankbtn.png" : this.http.appendImagePath(this.settingStore.setting.icon); // const applicationIcon = (this.settingStore.isIconEmpty) ? "/assets/images/bankbtn.png" : this.http.appendImagePath(this.settingStore.setting.icon);
// let applicationIcon = "http://giift.asacreative.com/giift_logo_wide.4d15de72.png"; // let applicationIcon = "http://giift.asacreative.com/giift_logo_wide.4d15de72.png";
let applicationIcon = require('../../../../assets/images/logo_new.png'); let applicationIcon = require('../../../../assets/images/logo_new.png');
let applicationName = 'Giift'; let applicationName = 'Giift';
if(APP_TYPE === 'btn') { if (APP_TYPE === 'btn') {
applicationIcon = "http://btn-redemption-2.bangun-kreatif.com/dr6u0fppdi4xy.cloudfront.net/FilesDirectory/Albilad/ImgIconImage/logo-btn.png"; applicationIcon = "http://btn-redemption-2.bangun-kreatif.com/dr6u0fppdi4xy.cloudfront.net/FilesDirectory/Albilad/ImgIconImage/logo-btn.png";
applicationName = "BTN"; applicationName = "BTN";
} }
@ -340,37 +339,35 @@ export default class App extends React.Component {
return `${LINKS.ORDER}`; return `${LINKS.ORDER}`;
} }
return ( return (
<PrintProvider>
<NoPrint>
<div className="app-container"> <div className="app-container">
<Helmet> <Helmet>
<meta charSet="utf-8"/> <meta charSet="utf-8" />
<title>{applicationName}</title> <title>{applicationName}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" href={applicationIcon} sizes="96x96"/> <link rel="icon" type="image/png" href={applicationIcon} sizes="96x96" />
</Helmet> </Helmet>
<ButterToast trayPosition="bottom-right"/> <ButterToast trayPosition="bottom-right" />
<Snackbar <Snackbar
open={this.globalUI.snackbarVisibility} open={this.globalUI.snackbarVisibility}
message={this.globalUI.snackbarMessage} message={this.globalUI.snackbarMessage}
autoHideDuration={3000}/> autoHideDuration={3000} />
<Dialog <Dialog
style={{margin: 'auto'}} style={{ margin: 'auto' }}
open={this.globalUI.loadingVisibility}> open={this.globalUI.loadingVisibility}>
<div style={{textAlign: 'center'}}> <div style={{ textAlign: 'center' }}>
<LoadingDialog/> <LoadingDialog />
</div> </div>
</Dialog> </Dialog>
<DepositDialog/> <DepositDialog />
<WithdrawDialog/> <WithdrawDialog />
<Toolbar className="toolbarAkunTiket"> <Toolbar className="toolbarAkunTiket">
<ToolbarGroup> <ToolbarGroup>
<IconButton className="hide-on-med-and-up" onClick={() => this.toggleDrawer()}><IconMenus/></IconButton> <IconButton className="hide-on-med-and-up" onClick={() => this.toggleDrawer()}><IconMenus /></IconButton>
{/* <ToolbarTitle className="show-on-small marketplace-toolbarTitle" style={{color: '#424770'}} {/* <ToolbarTitle className="show-on-small marketplace-toolbarTitle" style={{color: '#424770'}}
text={"Store Admin"}/> */} text={"Store Admin"}/> */}
@ -383,7 +380,7 @@ export default class App extends React.Component {
width: 100, width: 100,
height: 30 height: 30
}} }}
src={applicationIcon}/> src={applicationIcon} />
</Link> </Link>
{/*<ToolbarSeparator className="hide-on-small-only" style={{marginLeft: 30, marginRight: 30}}/>*/} {/*<ToolbarSeparator className="hide-on-small-only" style={{marginLeft: 30, marginRight: 30}}/>*/}
@ -456,18 +453,18 @@ export default class App extends React.Component {
</ToolbarGroup> </ToolbarGroup>
<ToolbarGroup> <ToolbarGroup>
<WalletComponent/> <WalletComponent />
{window.location.pathname.split("/")[2] == "shop" ? ( {window.location.pathname.split("/")[2] == "shop" ? (
<IconMenu <IconMenu
anchorOrigin={{vertical: 'bottom', horizontal: 'right'}} anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
targetOrigin={{vertical: 'top', horizontal: 'right'}} targetOrigin={{ vertical: 'top', horizontal: 'right' }}
onClick={() => this.notificationStore.readAll()} onClick={() => this.notificationStore.readAll()}
iconButtonElement={ iconButtonElement={
<div> <div>
<IconButton className="menuAkunItem" tooltip="Cart center" <IconButton className="menuAkunItem" tooltip="Cart center"
tooltipPosition="bottom-center"> tooltipPosition="bottom-center">
<ShoppingCart/> <ShoppingCart />
</IconButton> </IconButton>
</div> </div>
} }
@ -485,9 +482,9 @@ export default class App extends React.Component {
<div> <div>
<p> <p>
<span <span
style={{color: darkBlack}}>{item.notification.description.substr(0, 40)}{(item.notification.description.length > 40) ? '...' : ""}</span> style={{ color: darkBlack }}>{item.notification.description.substr(0, 40)}{(item.notification.description.length > 40) ? '...' : ""}</span>
</p> </p>
<p style={{fontSize: 10, color: black}}>{moment(item.created_at).fromNow()}</p> <p style={{ fontSize: 10, color: black }}>{moment(item.created_at).fromNow()}</p>
</div> </div>
} }
secondaryTextLines={2} secondaryTextLines={2}
@ -495,12 +492,12 @@ export default class App extends React.Component {
</Link> </Link>
); );
}) : <EmptyComponent width="" image="default4" type="empty" header="" }) : <EmptyComponent width="" image="default4" type="empty" header=""
content="No notification yet! "/> content="No notification yet! " />
} }
<Link to={`${LINKS.CART_DETAIL}`}> <Link to={`${LINKS.CART_DETAIL}`}>
<ListItem <ListItem
primaryText={ primaryText={
<div style={{textAlign: 'center'}}> <div style={{ textAlign: 'center' }}>
<p>View All</p> <p>View All</p>
</div> </div>
} }
@ -508,12 +505,12 @@ export default class App extends React.Component {
</Link> </Link>
</List> </List>
</IconMenu> </IconMenu>
) : (<div/>)} ) : (<div />)}
<IconMenu <IconMenu
anchorOrigin={{vertical: 'bottom', horizontal: 'right'}} anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
targetOrigin={{vertical: 'top', horizontal: 'right'}} targetOrigin={{ vertical: 'top', horizontal: 'right' }}
onClick={() => this.notificationStore.readAll()} onClick={() => this.notificationStore.readAll()}
iconButtonElement={ iconButtonElement={
<div> <div>
@ -522,16 +519,16 @@ export default class App extends React.Component {
{this.notificationStore.unread_notif === 0 ? {this.notificationStore.unread_notif === 0 ?
<IconButton className="menuAkunItem" tooltip="Notification center" <IconButton className="menuAkunItem" tooltip="Notification center"
tooltipPosition="bottom-center"> tooltipPosition="bottom-center">
<img className="img-responsive" src="/assets/images/icon/toa.png" alt=""/> <img className="img-responsive" src="/assets/images/icon/toa.png" alt="" />
</IconButton> : </IconButton> :
<Badge <Badge
badgeContent={this.notificationStore.unread_notif} badgeContent={this.notificationStore.unread_notif}
primary={true} primary={true}
badgeStyle={{top: 15, right: 12}} badgeStyle={{ top: 15, right: 12 }}
> >
<IconButton className="menuAkunItem" tooltip="Notification center" <IconButton className="menuAkunItem" tooltip="Notification center"
tooltipPosition="bottom-center"> tooltipPosition="bottom-center">
<img className="img-responsive" src="/assets/images/icon/toa.png" alt=""/> <img className="img-responsive" src="/assets/images/icon/toa.png" alt="" />
</IconButton> </IconButton>
</Badge> </Badge>
} }
@ -541,16 +538,16 @@ export default class App extends React.Component {
{this.notificationStore.unread_notif === 0 ? {this.notificationStore.unread_notif === 0 ?
<IconButton className="menuAkunItem" tooltip="Notification center" <IconButton className="menuAkunItem" tooltip="Notification center"
tooltipPosition="bottom-center"> tooltipPosition="bottom-center">
<img className="img-responsive" src="/assets/images/icon/toa.png" alt=""/> <img className="img-responsive" src="/assets/images/icon/toa.png" alt="" />
</IconButton> : </IconButton> :
<Badge <Badge
badgeContent={this.notificationStore.unread_notif} badgeContent={this.notificationStore.unread_notif}
primary={true} primary={true}
badgeStyle={{top: 15, right: 12}} badgeStyle={{ top: 15, right: 12 }}
> >
<IconButton className="menuAkunItem" tooltip="Notification center" <IconButton className="menuAkunItem" tooltip="Notification center"
tooltipPosition="bottom-center"> tooltipPosition="bottom-center">
<img className="img-responsive" src="/assets/images/icon/toa.png" alt=""/> <img className="img-responsive" src="/assets/images/icon/toa.png" alt="" />
</IconButton> </IconButton>
</Badge> </Badge>
} }
@ -573,9 +570,9 @@ export default class App extends React.Component {
<div> <div>
<p> <p>
<span <span
style={{color: darkBlack}}>{item.notification.description.substr(0, 40)}{(item.notification.description.length > 40) ? '...' : ""}</span> style={{ color: darkBlack }}>{item.notification.description.substr(0, 40)}{(item.notification.description.length > 40) ? '...' : ""}</span>
</p> </p>
<p style={{fontSize: 10, color: black}}>{moment(item.created_at).fromNow()}</p> <p style={{ fontSize: 10, color: black }}>{moment(item.created_at).fromNow()}</p>
</div> </div>
} }
secondaryTextLines={2} secondaryTextLines={2}
@ -583,12 +580,12 @@ export default class App extends React.Component {
</Link> </Link>
); );
}) : <EmptyComponent width="" image="default4" type="empty" header="" }) : <EmptyComponent width="" image="default4" type="empty" header=""
content="No item yet! "/> content="No item yet! " />
} }
<Link to={`${LINKS.CART_DETAIL}`}> <Link to={`${LINKS.CART_DETAIL}`}>
<ListItem <ListItem
primaryText={ primaryText={
<div style={{textAlign: 'center'}}> <div style={{ textAlign: 'center' }}>
<p>View All</p> <p>View All</p>
</div> </div>
} }
@ -598,40 +595,40 @@ export default class App extends React.Component {
</IconMenu> </IconMenu>
<IconMenu <IconMenu
anchorOrigin={{vertical: 'bottom', horizontal: 'right'}} anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
targetOrigin={{vertical: 'top', horizontal: 'right'}} targetOrigin={{ vertical: 'top', horizontal: 'right' }}
iconButtonElement={ iconButtonElement={
<IconButton style={{width: 'auto', height: 'auto'}} <IconButton style={{ width: 'auto', height: 'auto' }}
iconStyle={{width: 35, height: 'auto', borderRadius: '45%'}}> iconStyle={{ width: 35, height: 'auto', borderRadius: '45%' }}>
{!!this.profileStore.userProfile.photo ? {!!this.profileStore.userProfile.photo ?
<img src={this.http.appendImagePath(this.profileStore.userProfile.photo)}/> : <IconUserCircle/> <img src={this.http.appendImagePath(this.profileStore.userProfile.photo)} /> : <IconUserCircle />
} }
</IconButton> </IconButton>
} }
><List> ><List>
<ListItem <ListItem
style={{padding: '0px 16px 0px', fontSize: 14}} style={{ padding: '0px 16px 0px', fontSize: 14 }}
disabled={true} disabled={true}
primaryText={<span primaryText={<span
style={{fontWeight: 500}}>{this.authStore.userProfile.username || 'Username'}</span>} style={{ fontWeight: 500 }}>{this.authStore.userProfile.username || 'Username'}</span>}
secondaryText={<p secondaryText={<p
style={{fontWeight: 400}}>{_.capitalize(this.authStore.userProfile.role) || 'role'}</p>} style={{ fontWeight: 400 }}>{_.capitalize(this.authStore.userProfile.role) || 'role'}</p>}
/> />
</List> </List>
<Divider/> <Divider />
<Link onClick={this <Link onClick={this
.changeRoute .changeRoute
.bind(this, '/app/transaction')} to={LINKS.TRANSACTION}> <MenuItem style={{fontSize: 14}} .bind(this, '/app/transaction')} to={LINKS.TRANSACTION}> <MenuItem style={{ fontSize: 14 }}
primaryText="Transaction"/></Link> primaryText="Transaction" /></Link>
<Link onClick={this <Link onClick={this
.changeRoute .changeRoute
.bind(this, '/app/profile')} to={LINKS.PROFILE}> <MenuItem style={{fontSize: 14}} .bind(this, '/app/profile')} to={LINKS.PROFILE}> <MenuItem style={{ fontSize: 14 }}
primaryText="Profile"/></Link> primaryText="Profile" /></Link>
<Link onClick={this <Link onClick={this
.changeRoute .changeRoute
.bind(this, '/login')} to={LINKS.LOGIN}> .bind(this, '/login')} to={LINKS.LOGIN}>
<MenuItem onClick={() => {}} style={{fontSize: 14}} primaryText="Sign out"/> <MenuItem onClick={() => { }} style={{ fontSize: 14 }} primaryText="Sign out" />
</Link> </Link>
</IconMenu> </IconMenu>
</ToolbarGroup> </ToolbarGroup>
@ -642,13 +639,11 @@ export default class App extends React.Component {
// marginLeft: (window.innerWidth < 600) ? 'auto' : '50px', // marginLeft: (window.innerWidth < 600) ? 'auto' : '50px',
// marginRight: (window.innerWidth < 600) ? '0' : '50px', // marginRight: (window.innerWidth < 600) ? '0' : '50px',
}}> }}>
<div className="try"/> <div className="try" />
<Route/> <Route />
</div> </div>
</div> </div>
</NoPrint>
</PrintProvider>
); );
} }
} }