Merge pull request #12 from Reckless-Satoshi/order-details-page

Order details page. Fixes #9

api/models.py

@@ -53,7 +53,8 @@ class Order(models.Model):
     payment_method = models.CharField(max_length=30, null=False, default="Not specified")
     premium = models.DecimalField(max_digits=5, decimal_places=2, default=0, null=True, validators=[MinValueValidator(-100), MaxValueValidator(999)])
     satoshis = models.PositiveBigIntegerField(null=True, validators=[MinValueValidator(min_satoshis_trade), MaxValueValidator(max_satoshis_trade)])
-    
+    is_explicit = models.BooleanField(default=False, null=False) # pricing method. A explicit amount of sats, or a relative premium above/below market.
+
     # order participants
     maker = models.ForeignKey(User, related_name='maker', on_delete=models.SET_NULL, null=True, default=None)  # unique = True, a maker can only make one order
     taker = models.ForeignKey(User, related_name='taker', on_delete=models.SET_NULL, null=True, default=None)  # unique = True, a taker can only take one order

api/serializers.py

@@ -4,9 +4,9 @@ from .models import Order
 class OrderSerializer(serializers.ModelSerializer):
     class Meta:
         model = Order
-        fields = ('id','status','created_at','type','currency','amount','payment_method','premium','satoshis','maker')
+        fields = ('id','status','created_at','type','currency','amount','payment_method','is_explicit','premium','satoshis','maker','taker')
 
 class MakeOrderSerializer(serializers.ModelSerializer):
     class Meta:
         model = Order
-        fields = ('type','currency','amount','payment_method','premium','satoshis')
+        fields = ('type','currency','amount','payment_method','is_explicit','premium','satoshis')

api/urls.py

@@ -1,6 +1,7 @@
 from django.urls import path
-from .views import MakeOrder
+from .views import MakeOrder, OrderView
 
 urlpatterns = [
-    path('make/', MakeOrder.as_view())
+    path('make/', MakeOrder.as_view()),
+    path('order/', OrderView.as_view()),
     ]

api/views.py

@@ -2,6 +2,8 @@ from rest_framework import status
 from rest_framework.views import APIView
 from rest_framework.response import Response
 
+from django.contrib.auth.models import User
+
 from .serializers import OrderSerializer, MakeOrderSerializer
 from .models import Order
 
@@ -11,9 +13,8 @@ class MakeOrder(APIView):
     serializer_class  = MakeOrderSerializer
 
     def post(self,request):
-
         serializer = self.serializer_class(data=request.data)
-        print(serializer)
+
         if serializer.is_valid():
             otype = serializer.data.get('type')
             currency = serializer.data.get('currency')
@@ -39,4 +40,42 @@ class MakeOrder(APIView):
         if not serializer.is_valid():
             return Response(status=status.HTTP_400_BAD_REQUEST)
             
-        return Response(OrderSerializer(order).data, status=status.HTTP_201_CREATED)
+        return Response(OrderSerializer(order).data, status=status.HTTP_201_CREATED)
+
+
+class OrderView(APIView):
+    serializer_class = OrderSerializer
+    lookup_url_kwarg = 'order_id'
+
+    def get(self, request, format=None):
+        order_id = request.GET.get(self.lookup_url_kwarg)
+
+        if order_id != None:
+            order = Order.objects.filter(id=order_id)
+
+            # 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
+                
+                # TODO
+                # # Check if requester is participant in the order and add boolean to response
+                
+                # user = authenticate(username=username, password=password)
+                # data['is_participant'] = any(user.id == order.maker, user.id == order.taker)
+
+                # if data['is_participant']:
+                #     return Response(data, status=status.HTTP_200_OK)
+                # else:
+                #     # Non participants can't get access to the status or who is the taker
+                #     data.pop(['status'],['taker'])
+                #     return Response(data, status=status.HTTP_200_OK)
+
+                return Response(data, status=status.HTTP_200_OK)
+
+            return Response({'Order Not Found':'Invalid Order Id'},status=status.HTTP_404_NOT_FOUND)
+
+        return Response({'Bad Request':'Order ID parameter not found in request'}, status=status.HTTP_400_BAD_REQUEST)
+
+

frontend/src/components/HomePage.js

@@ -22,7 +22,7 @@ export default class HomePage extends Component {
                       <Route path='/login'component={LoginPage}/>
                       <Route path='/make' component={MakerPage}/>
                       <Route path='/book' component={BookPage}/>
-                      <Route path='/order' component={OrderPage}/>
+                      <Route path="/order/:orderId" component={OrderPage}/>
                       <Route path='/wait' component={WaitingRoomPage}/>
                   </Switch>
               </Router>

frontend/src/components/MakerPage.js

@@ -79,7 +79,7 @@ export default class MakerPage extends Component {
             premium: 0,     
         });
     }
-    handleClickExplicit=(e)=>{
+    handleClickisExplicit=(e)=>{
         this.setState({
             isExplicit: true,
             satoshis: 10000, 
@@ -97,13 +97,14 @@ export default class MakerPage extends Component {
                 currency: this.state.currency,
                 amount: this.state.amount,
                 payment_method: this.state.payment_method,
+                is_explicit: this.state.isExplicit,
                 premium: this.state.premium,
                 satoshis: this.state.satoshis,
             }),
         };
         fetch("/api/make/",requestOptions)
         .then((response) => response.json())
-        .then((data) => console.log(data));
+        .then((data) => this.props.history.push('/order/' + data.id));
     }
 
   render() {
@@ -209,7 +210,7 @@ export default class MakerPage extends Component {
                         control={<Radio color="secondary"/>}
                         label="Explicit"
                         labelPlacement="Top"
-                        onClick={this.handleClickExplicit}
+                        onClick={this.handleClickisExplicit}
                         onShow="false"
                         />
                     </RadioGroup>

frontend/src/components/OrderPage.js

@@ -1,11 +1,64 @@
 import React, { Component } from "react";
 
 export default class OrderPage extends Component {
-    constructor(props) {
-      super(props);
-    }
+  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();
+  }
 
-    render() {
-        return <p>This is the single order detail view page</p>;
-    }
+  getOrderDetails() {
+    fetch('/api/order' + '?order_id=' + this.orderId)
+      .then((response) => response.json())
+      .then((data) => {
+        this.setState({
+            status: data.status,
+            type: data.type,
+            currency: data.currency,
+            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,
+        });
+      });
+  }
+
+  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>
+    );
+  }
 }

frontend/urls.py

@@ -7,6 +7,6 @@ urlpatterns = [
     path('login/', index),
     path('make/', index),
     path('book/', index),
-    path('order/', index),
+    path('order/<int:orderId>', index),
     path('wait/', index),    
 ]