Add order expiry time and rework book page

api/models.py

@@ -45,6 +45,7 @@ class Order(models.Model):
     # order info, id = models.CharField(max_length=64, unique=True, null=False)
     status = models.PositiveSmallIntegerField(choices=Status.choices, default=Status.WFB)
     created_at = models.DateTimeField(auto_now_add=True)
+    expires_at = models.DateTimeField()
 
     # order details
     type = models.PositiveSmallIntegerField(choices=Types.choices, null=False)

api/serializers.py

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

api/views.py

@@ -17,6 +17,9 @@ from pathlib import Path
 from datetime import timedelta
 from django.utils import timezone
 
+# .env
+expiration_time = 8
+
 avatar_path = Path('frontend/static/assets/avatars')
 avatar_path.mkdir(parents=True, exist_ok=True)
 
@@ -54,6 +57,7 @@ class MakeOrder(APIView):
                 premium=premium,
                 satoshis=satoshis,
                 is_explicit=is_explicit,
+                expires_at= timezone.now()+timedelta(hours=expiration_time),
                 maker=request.user)
             order.save()
 

frontend/src/components/BookPage.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Paper, Button , Card, CardActionArea, CardContent, Typography, Grid, Select, MenuItem, FormControl, FormHelperText, List, ListItem, ListItemText, Avatar, Link, RouterLink} from "@material-ui/core"
+import { Paper, Button , Divider, Card, CardActionArea, CardContent, Typography, Grid, Select, MenuItem, FormControl, FormHelperText, List, ListItem, ListItemText, Avatar, Link, RouterLink, ListItemAvatar} from "@material-ui/core"
 
 export default class BookPage extends Component {
   constructor(props) {
@@ -22,8 +22,8 @@ export default class BookPage extends Component {
       this.setState({orders: data}));
   }
 
-  handleCardClick=(orderId)=>{
-    this.props.history.push('/order/' + orderId)
+  handleCardClick (orderId){
+    this.props.history.push('/order/' + orderId);
   }
 
   // Make these two functions sequential. getOrderDetails needs setState to be finish beforehand.
@@ -41,11 +41,10 @@ export default class BookPage extends Component {
     this.getOrderDetails();
   }
 
-  // Gets currency 3 letters code from numeric (e.g., 1 -> USD)
+  // Gets currency code (3 letters) from numeric (e.g., 1 -> USD)
   // Improve this function so currencies are read from json
   getCurrencyCode(val){
-    var code = (this.state.currency== 1 ) ? "USD": ((this.state.currency == 2 ) ? "EUR":"ETH")
-    return (code)
+    return (val == 1 ) ? "USD": ((val == 2 ) ? "EUR":"ETH")
   }
 
   // pretty numbers
@@ -103,36 +102,55 @@ export default class BookPage extends Component {
             </FormControl>
           </Grid>
           {this.state.orders.map((order) =>
-          <Grid container item sm={6}>
-            <Card >
+          <Grid container item sm={4}>
+            <Card elevation={6} sx={{ width: 245 }}>
               {/* Linking to order details not working yet as expected */}
-              {/* <CardActionArea onClick={this.handleCardClick(order.id)} component={RouterLink} to="/order"> */}
-              <CardActionArea >
+              {/* <CardActionArea onClick={this.handleCardClick(15)} component={RouterLink} to="/order"> */}
+              <CardActionArea>
                 <CardContent>
-                  <Avatar
-                      alt={order.maker_nick}
-                      src={window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png'} 
-                      />
-                  <Typography gutterBottom variant="h5" component="div">
-                    {order.maker_nick}
-                  </Typography>
 
-                  <Typography variant="body2" color="text.secondary">
+                  <List dense="true">
+                    <ListItem >
+                    <ListItemAvatar>
+                        <Avatar
+                            alt={order.maker_nick}
+                            src={window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png'} 
+                            />
+                      </ListItemAvatar>
+                      <ListItemText>
+                        <Typography gutterBottom variant="h6">
+                          {order.maker_nick}
+                        </Typography>
+                      </ListItemText>
+                    </ListItem>
+
                     {/* CARD PARAGRAPH CONTENT */}
-                    {order.type == 0 ? "Buys bitcoin for " : "Sells bitcoin for "} 
-                    {parseFloat(parseFloat(order.amount).toFixed(4))} 
-                    {" " +this.getCurrencyCode(order.currency)}.
+                    <ListItemText>
+                      <Typography variant="subtitle1" color="text.secondary">
+                      ◑{order.type == 0 ? <b> Buys </b>: <b> Sells </b>} 
+                        <b>{parseFloat(parseFloat(order.amount).toFixed(4))}
+                        {" " +this.getCurrencyCode(order.currency)}</b> <a> worth of bitcoin</a> 
+                      </Typography>
+
+                      <Typography variant="subtitle1" color="text.secondary">
+                      ◑ Payment via <b>{order.payment_method}</b>
+                      </Typography>
+
+                      <Typography variant="subtitle1" color="text.secondary">
+                      ◑ Priced {order.is_explicit ? 
+                        " explicitly at " + this.pn(order.satoshis) + " Sats" : (
+                        " to market with " + 
+                        parseFloat(parseFloat(order.premium).toFixed(4)) + "% premium"                     
+                        )}
+                      </Typography>
+
+                      <Typography variant="subtitle1" color="text.secondary">
+                      ◑ <b>{" 42,354 "}{this.getCurrencyCode(order.currency)}/BTC</b>  (Binance API)
+                      </Typography>
+                    </ListItemText>
+
+                  </List>
 
-                    Prefers payment via {order.payment_method}.
-                    
-                    This offer is priced 
-                    {order.is_explicit ? 
-                    " explicitly at " + this.pn(order.satoshis) + " Sats" : (
-                    " relative to the market at a premium of " + 
-                    parseFloat(parseFloat(order.premium).toFixed(4)) + "%"                     
-                    )}.
-                    Currently that is {"42,354"} {this.getCurrencyCode(order.currency)}/BTC.
-                  </Typography>
                 </CardContent>
               </CardActionArea>
             </Card>

frontend/src/components/MakerPage.js

@@ -79,7 +79,7 @@ export default class MakerPage extends Component {
             premium: 0,     
         });
     }
-    handleClickisExplicit=(e)=>{
+    handleClickIsExplicit=(e)=>{
         this.setState({
             isExplicit: true,
             satoshis: 10000, 
@@ -104,7 +104,7 @@ export default class MakerPage extends Component {
         };
         fetch("/api/make/",requestOptions)
         .then((response) => response.json())
-        .then((data) => this.props.history.push('/order/' + data.id));
+        .then((data) => (console.log(data) & this.props.history.push('/order/' + data.id)));
     }
 
   render() {