Improve take order and cancel order responsiveness

This commit is contained in:
Reckless_Satoshi
2022-02-01 08:27:02 -08:00
parent fd0b0faac6
commit 159180089e

View File

@ -76,7 +76,6 @@ export default class OrderPage extends Component {
} }
completeSetState=(newStateVars)=>{ completeSetState=(newStateVars)=>{
// In case the reply only has "bad_request" // In case the reply only has "bad_request"
// Do not substitute these two for "undefined" as // Do not substitute these two for "undefined" as
// otherStateVars will fail to assign values // otherStateVars will fail to assign values
@ -149,11 +148,23 @@ export default class OrderPage extends Component {
} else { } else {
return ( return (
<span> Wait {zeroPad(minutes)}m {zeroPad(seconds)}s </span> <span> You cannot take an order yet! Wait {zeroPad(minutes)}m {zeroPad(seconds)}s </span>
); );
} }
}; };
countdownTakeOrderRenderer = ({ seconds, completed }) => {
if(isNaN(seconds)){
return (<Button variant='contained' color='primary' onClick={this.handleClickTakeOrderButton}>Take Order</Button>)
}
if (completed) {
// Render a completed state
return (<Button variant='contained' color='primary' onClick={this.handleClickTakeOrderButton}>Take Order</Button>);
} else{
return(<Button disabled={true} variant='contained' color='primary' onClick={this.handleClickTakeOrderButton}>Take Order</Button>)
}
};
LinearDeterminate =()=> { LinearDeterminate =()=> {
const [progress, setProgress] = React.useState(0); const [progress, setProgress] = React.useState(0);
@ -178,17 +189,20 @@ export default class OrderPage extends Component {
} }
handleClickTakeOrderButton=()=>{ handleClickTakeOrderButton=()=>{
const requestOptions = { this.setState({loading:true})
method: 'POST',
headers: {'Content-Type':'application/json', 'X-CSRFToken': getCookie('csrftoken'),}, const requestOptions = {
body: JSON.stringify({ method: 'POST',
'action':'take', headers: {'Content-Type':'application/json', 'X-CSRFToken': getCookie('csrftoken'),},
}), body: JSON.stringify({
'action':'take',
}),
}; };
fetch('/api/order/' + '?order_id=' + this.orderId, requestOptions) fetch('/api/order/' + '?order_id=' + this.orderId, requestOptions)
.then((response) => response.json()) .then((response) => response.json())
.then((data) => this.completeSetState(data)); .then((data) => this.completeSetState(data));
} }
getCurrencyDict() { getCurrencyDict() {
fetch('/static/assets/currencies.json') fetch('/static/assets/currencies.json')
.then((response) => response.json()) .then((response) => response.json())
@ -209,16 +223,17 @@ export default class OrderPage extends Component {
} }
handleClickConfirmCancelButton=()=>{ handleClickConfirmCancelButton=()=>{
const requestOptions = { this.setState({loading:true})
method: 'POST', const requestOptions = {
headers: {'Content-Type':'application/json', 'X-CSRFToken': getCookie('csrftoken'),}, method: 'POST',
body: JSON.stringify({ headers: {'Content-Type':'application/json', 'X-CSRFToken': getCookie('csrftoken'),},
'action':'cancel', body: JSON.stringify({
}), 'action':'cancel',
}; }),
fetch('/api/order/' + '?order_id=' + this.orderId, requestOptions) };
.then((response) => response.json()) fetch('/api/order/' + '?order_id=' + this.orderId, requestOptions)
.then((data) => this.getOrderDetails(data.id)); .then((response) => response.json())
.then((data) => this.getOrderDetails(data.id));
this.handleClickCloseConfirmCancelDialog(); this.handleClickCloseConfirmCancelDialog();
} }
@ -347,6 +362,7 @@ export default class OrderPage extends Component {
return('error') return('error')
} }
} }
orderBox=()=>{ orderBox=()=>{
return( return(
<Grid container spacing={1} > <Grid container spacing={1} >
@ -458,7 +474,7 @@ export default class OrderPage extends Component {
<Divider /> <Divider />
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Alert severity="warning" sx={{maxWidth:360}}> <Alert severity="warning" sx={{maxWidth:360}}>
You cannot take an order yet! <Countdown date={new Date(this.state.penalty)} renderer={this.countdownPenaltyRenderer} /> <Countdown date={new Date(this.state.penalty)} renderer={this.countdownPenaltyRenderer} />
</Alert> </Alert>
</Grid> </Grid>
</> </>
@ -498,7 +514,7 @@ export default class OrderPage extends Component {
: :
<Grid container spacing={1}> <Grid container spacing={1}>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Button variant='contained' color='primary' onClick={this.handleClickTakeOrderButton}>Take Order</Button> <Countdown date={new Date(this.state.penalty)} renderer={this.countdownTakeOrderRenderer} />
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Button variant='contained' color='secondary' onClick={this.props.history.goBack}>Back</Button> <Button variant='contained' color='secondary' onClick={this.props.history.goBack}>Back</Button>