Merge pull request #16 from Reckless-Satoshi/improve-order-detail-page

Improve content and handling on OrderPage

api/views.py

@@ -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')
-
+            is_explicit = serializer.data.get('is_explicit')
-            user = User.objects.get(id=request.user.id)
 
             # 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)

frontend/src/components/OrderPage.js

@@ -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,
+            premium: data.premium,
-            // satoshis: satoshis,
+            satoshis: data.satoshis,
-            // makerId: maker, 
+            makerId: data.maker, 
-            // isParticipant: is_participant,
+            isParticipant: data.is_participant,
-            // makerNick: maker_nick,
+            makerNick: data.maker_nick,
-            // takerId: taker,
+            takerId: data.taker,
-            // takerNick: taker_nick,
+            takerNick: data.taker_nick,
         });
       });
   }
 
   render (){
     return (
-      <div>
+      <Grid container spacing={1}>
-        <p>This is the single order detail view page</p>
+        <Grid item xs={12} align="center">
-        <p>Order id: {this.orderId}</p>
+          <Typography component="h5" variant="h5">
-        <p>Order status: {this.state.status}</p>
+          Robosat BTC {this.state.type ? " Sell " : " Buy "} Order
-        <p>Order type: {this.state.type}</p>
+          </Typography>
-        <p>Currency: {this.state.currencyCode}</p>
+          <List component="nav" aria-label="mailbox folders">
-        <p>Amount: {this.state.amount}</p>
+            <ListItem>
-        <p>Payment method: {this.state.paymentMethod}</p>
+              <ListItemAvatar sx={{ width: 56, height: 56 }}>
-        <p>Pricing method is explicit: {this.state.isExplicit.toString()}</p>
+                <Avatar 
-        {/* <p>Premium: {this.state.premium}</p>
+                  alt={this.state.makerNick} 
-        <p>Maker: {this.makerId}</p> */}
+                  src={window.location.origin +'/static/assets/avatars/' + this.state.makerNick + '.png'} 
-      </div>
+                  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>
     );
   }
 }