From 71107a7432f6b38ecbbb9d4789647bee64b5acff Mon Sep 17 00:00:00 2001
From: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date: Sat, 8 Jan 2022 17:23:13 -0800
Subject: [PATCH] Refresh orders

---
 api/views.py                         |  2 +-
 frontend/src/components/OrderPage.js | 30 +++++++++++++++--
 frontend/src/components/TradeBox.js  | 49 +++++++++++++++++++++++++++-
 3 files changed, 77 insertions(+), 4 deletions(-)

diff --git a/api/views.py b/api/views.py
index addb763e..511891c9 100644
--- a/api/views.py
+++ b/api/views.py
@@ -372,7 +372,7 @@ class BookView(ListAPIView):
 
 class InfoView(ListAPIView):
 
-    def get(self):
+    def get(self, request):
         context = {}
 
         context['num_public_buy_orders'] = len(Order.objects.filter(type=Order.Types.BUY, status=Order.Status.PUB))
diff --git a/frontend/src/components/OrderPage.js b/frontend/src/components/OrderPage.js
index e7196d1a..8521918f 100644
--- a/frontend/src/components/OrderPage.js
+++ b/frontend/src/components/OrderPage.js
@@ -67,15 +67,18 @@ export default class OrderPage extends Component {
     super(props);
     this.state = {
         isExplicit: false,
+        delay: 5000, // Refresh every 5 seconds
     };
     this.orderId = this.props.match.params.orderId;
     this.getOrderDetails();
   }
 
   getOrderDetails() {
+    this.setState(null)
     fetch('/api/order' + '?order_id=' + this.orderId)
       .then((response) => response.json())
       .then((data) => {
+        console.log(data) &
         this.setState({
             statusCode: data.status,
             statusText: data.status_message,
@@ -107,6 +110,29 @@ export default class OrderPage extends Component {
       });
   }
 
+
+  // These are used to refresh the data
+  componentDidMount() {
+    this.interval = setInterval(this.tick, this.state.delay);
+  }
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.delay !== this.state.delay) {
+      clearInterval(this.interval);
+      this.interval = setInterval(this.tick, this.state.delay);
+    }
+  }
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  }
+  tick = () => {
+    this.getOrderDetails();
+  }
+  handleDelayChange = (e) => {
+    this.setState({ delay: Number(e.target.value) });
+  }
+
+
+
   // Gets currency code (3 letters) from numeric (e.g., 1 -> USD)
   // Improve this function so currencies are read from json
   getCurrencyCode(val){
@@ -162,7 +188,7 @@ export default class OrderPage extends Component {
                   src={window.location.origin +'/static/assets/avatars/' + this.state.makerNick + '.png'} 
                   />
               </ListItemAvatar>
-              <ListItemText primary={this.state.makerNick} secondary="Order maker" align="right"/>
+              <ListItemText primary={this.state.makerNick + (this.state.type ? " (Buyer)" : " (Seller)")} secondary="Order maker" align="right"/>
             </ListItem>
             <Divider />
 
@@ -171,7 +197,7 @@ export default class OrderPage extends Component {
                 {this.state.takerNick!='None' ?
                   <>
                     <ListItem align="left">
-                      <ListItemText primary={this.state.takerNick} secondary="Order taker"/>
+                      <ListItemText primary={this.state.takerNick + (this.state.type ? " (Seller)" : " (Buyer)")} secondary="Order taker"/>
                       <ListItemAvatar > 
                         <Avatar
                           alt={this.state.makerNick} 
diff --git a/frontend/src/components/TradeBox.js b/frontend/src/components/TradeBox.js
index 90e0e407..0626a151 100644
--- a/frontend/src/components/TradeBox.js
+++ b/frontend/src/components/TradeBox.js
@@ -1,13 +1,38 @@
 import React, { Component } from "react";
 import { Paper, FormControl , Grid, Typography, FormHelperText, TextField, List, ListItem, ListItemText, Divider} from "@material-ui/core"
-import QRCode from "react-qr-code"
+import QRCode from "react-qr-code";
 
 export default class TradeBox extends Component {
   constructor(props) {
     super(props);
+    this.state = {
+      delay: 5000, // Refresh every 5 seconds
+    };
     this.data = this.props.data
   }
 
+  // These are used to refresh the data
+  componentDidMount() {
+    this.interval = setInterval(this.tick, this.state.delay);
+  }
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.delay !== this.state.delay) {
+      clearInterval(this.interval);
+      this.interval = setInterval(this.tick, this.state.delay);
+    }
+  }
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  }
+
+
+  handleDelayChange = (e) => {
+    this.setState({ delay: Number(e.target.value) });
+  }
+  tick = () => {
+    this.data = this.props.data;
+  }
+  
   showInvoice=()=>{
     return (
       <Grid container spacing={1}>
@@ -71,6 +96,27 @@ export default class TradeBox extends Component {
     );
   }
 
+  showTakerFound=()=>{
+
+    // Make some sound here! The maker might have been waiting for long
+ 
+    return (
+      <Grid container spacing={1}>
+        <Grid item xs={12} align="center">
+          <Typography component="subtitle1" variant="subtitle1">
+            <b>A taker has been found! </b>
+          </Typography>
+        </Grid>
+        <Divider/>
+        <Grid item xs={12} align="center">
+          <Typography component="body2" variant="body">
+            Please wait for the taker to confirm his commitment by locking a bond.
+          </Typography>
+        </Grid>
+      </Grid>
+    );
+  }
+
   showMakerWait=()=>{
     return (
       <Grid container spacing={1}>
@@ -124,6 +170,7 @@ export default class TradeBox extends Component {
           <Paper elevation={12} style={{ padding: 8,}}>
               {this.data.bondInvoice ? this.showInvoice() : ""}
               {this.data.isMaker & this.data.statusCode == 1 ? this.showMakerWait() : ""}
+              {this.data.isMaker & this.data.statusCode == 3 ? this.showTakerFound() : ""}
               {this.data.isSeller & this.data.escrowInvoice != null ? this.showEscrowInvoice() : ""}
           </Paper>
         </Grid>