Improve content and handling on OrderPage

This commit is contained in:
Reckless_Satoshi 2022-01-03 04:11:33 -08:00
parent d037506138
commit afd90f8fbf
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
2 changed files with 80 additions and 39 deletions

View File

@ -1,4 +1,4 @@
from rest_framework import status
from rest_framework import serializers, status
from rest_framework.views import APIView
from rest_framework.response import Response
from django.contrib.auth import authenticate, login, logout
@ -32,8 +32,7 @@ class MakeOrder(APIView):
payment_method = serializer.data.get('payment_method')
premium = serializer.data.get('premium')
satoshis = serializer.data.get('satoshis')
user = User.objects.get(id=request.user.id)
is_explicit = serializer.data.get('is_explicit')
# query if the user is already a maker or taker, return error
queryset = Order.objects.filter(maker=request.user.id)
@ -51,7 +50,8 @@ class MakeOrder(APIView):
payment_method=payment_method,
premium=premium,
satoshis=satoshis,
maker=user)
is_explicit=is_explicit,
maker=request.user)
order.save()
if not serializer.is_valid():
@ -72,19 +72,24 @@ class OrderView(APIView):
# check if exactly one order is found in the db
if len(order) == 1 :
print("It is only one!")
order = order[0]
data = self.serializer_class(order).data
nickname = request.user.username
# Check if requester is participant in the order and add boolean to response
data['is_participant'] = (str(order.maker) == nickname or str(order.taker) == nickname)
#To do fix: data['status_message'] = Order.Status.get(order.status).label
data['status_message'] = Order.Status.WFB.label # Hardcoded WFB, should use order.status value.
data['maker_nick'] = str(order.maker)
data['taker_nick'] = str(order.taker)
if data['is_participant']:
return Response(data, status=status.HTTP_200_OK)
else:
# Non participants should not see the status or who is the taker
data.pop('status','taker')
data.pop('status','status_message','taker','taker_nick')
return Response(data, status=status.HTTP_200_OK)
return Response({'Order Not Found':'Invalid Order Id'},status=status.HTTP_404_NOT_FOUND)

View File

@ -1,23 +1,12 @@
import React, { Component } from "react";
import { Button , Grid, Typography, List, ListItem, ListItemText, ListItemAvatar, Avatar, Divider} from "@material-ui/core"
import { Link } from 'react-router-dom'
export default class OrderPage extends Component {
constructor(props) {
super(props);
this.state = {
status: 0,
type: 0,
currency: 0,
currencyCode: 'USD',
is_participant: false,
amount: 1,
paymentMethod:"",
isExplicit: false,
premium: 0,
satoshis: null,
makerId: "",
// makerNick:"",
// takerId: "",
// takerNick:"",
};
this.orderId = this.props.match.params.orderId;
this.getOrderDetails();
@ -28,37 +17,84 @@ export default class OrderPage extends Component {
.then((response) => response.json())
.then((data) => {
this.setState({
status: data.status,
statusCode: data.status,
statusText: data.status_message,
type: data.type,
currency: data.currency,
currencyCode: (data.currency== 1 ) ? "USD": ((data.currency == 2 ) ? "EUR":"ETH"),
amount: data.amount,
paymentMethod: data.payment_method,
isExplicit: data.is_explicit,
//premium: data.premium,
// satoshis: satoshis,
// makerId: maker,
// isParticipant: is_participant,
// makerNick: maker_nick,
// takerId: taker,
// takerNick: taker_nick,
premium: data.premium,
satoshis: data.satoshis,
makerId: data.maker,
isParticipant: data.is_participant,
makerNick: data.maker_nick,
takerId: data.taker,
takerNick: data.taker_nick,
});
});
}
render (){
return (
<div>
<p>This is the single order detail view page</p>
<p>Order id: {this.orderId}</p>
<p>Order status: {this.state.status}</p>
<p>Order type: {this.state.type}</p>
<p>Currency: {this.state.currencyCode}</p>
<p>Amount: {this.state.amount}</p>
<p>Payment method: {this.state.paymentMethod}</p>
<p>Pricing method is explicit: {this.state.isExplicit.toString()}</p>
{/* <p>Premium: {this.state.premium}</p>
<p>Maker: {this.makerId}</p> */}
</div>
<Grid container spacing={1}>
<Grid item xs={12} align="center">
<Typography component="h5" variant="h5">
Robosat BTC {this.state.type ? " Sell " : " Buy "} Order
</Typography>
<List component="nav" aria-label="mailbox folders">
<ListItem>
<ListItemAvatar sx={{ width: 56, height: 56 }}>
<Avatar
alt={this.state.makerNick}
src={window.location.origin +'/static/assets/avatars/' + this.state.makerNick + '.png'}
sx={{ width: 56, height: 56 }}
/>
</ListItemAvatar>
<ListItemText primary={this.state.makerNick} secondary="Order maker" />
</ListItem>
<Divider />
<ListItem>
<ListItemText primary={this.state.amount+" "+this.state.currencyCode} secondary="Amount and currency requested"/>
</ListItem>
<Divider />
<ListItem>
<ListItemText primary={this.state.paymentMethod} secondary="Accepted payment methods"/>
</ListItem>
<Divider />
<ListItem>
{this.state.isExplicit ?
<ListItemText primary={this.state.satoshis} secondary="Amount of Satoshis"/>
:
<ListItemText primary={this.state.premium} secondary="Premium over market price"/>
}
</ListItem>
<Divider />
{this.state.isParticipant ?
<>
<ListItem>
<ListItemText primary={this.state.statusText} secondary="Order status"/>
</ListItem>
<Divider />
{ this.state.takerNick!='None' ?
<><ListItem>
<ListItemText primary={this.state.takerNick} secondary="Order taker"/>
</ListItem>
<Divider /> </>: ""}
</>
:""
}
<ListItem>
<ListItemText primary={'#'+this.orderId} secondary="Order ID"/>
</ListItem>
</List>
<Grid item xs={12} align="center">
{this.state.isParticipant ? "" : <Button variant='contained' color='primary' to='/home' component={Link}>Take Order</Button>}
</Grid>
</Grid>
</Grid>
);
}
}