From 33df480301aab6c6bc0d7754aa331ab101c61776 Mon Sep 17 00:00:00 2001
From: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date: Mon, 10 Jan 2022 02:13:54 -0800
Subject: [PATCH] Add circular loading on Orders and book

---
 frontend/src/components/BookPage.js  | 15 ++++++++++++---
 frontend/src/components/MakerPage.js | 11 ++++++++---
 frontend/src/components/OrderPage.js |  4 ++--
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/BookPage.js b/frontend/src/components/BookPage.js
index f232c0ae..17949a76 100644
--- a/frontend/src/components/BookPage.js
+++ b/frontend/src/components/BookPage.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Box, Button , Divider, ListItemButton, Typography, Grid, Select, MenuItem, FormControl, FormHelperText, List, ListItem, ListItemText, Avatar, RouterLink, ListItemAvatar} from "@mui/material";
+import { Box, Button , Divider, CircularProgress, ListItemButton, Typography, Grid, Select, MenuItem, FormControl, FormHelperText, List, ListItem, ListItemText, Avatar, RouterLink, ListItemAvatar} from "@mui/material";
 import { Link } from 'react-router-dom'
 
 export default class BookPage extends Component {
@@ -9,7 +9,8 @@ export default class BookPage extends Component {
       orders: new Array(),
       currency: 0,
       type: 1,
-      currencies_dict: {"0":"ANY"}
+      currencies_dict: {"0":"ANY"},
+      loading: true,
     };
     this.getCurrencyDict()
     this.getOrderDetails(this.state.type,this.state.currency)
@@ -23,6 +24,7 @@ export default class BookPage extends Component {
       this.setState({
         orders: data,
         not_found: data.not_found,
+        loading: false,
       }));
   }
 
@@ -33,7 +35,8 @@ export default class BookPage extends Component {
 
   handleTypeChange=(e)=>{
     this.setState({
-        type: e.target.value,     
+        type: e.target.value,
+        loading: true,     
     });
     this.getOrderDetails(e.target.value,this.state.currency);
   }
@@ -41,6 +44,7 @@ export default class BookPage extends Component {
     this.setState({
         currency: e.target.value,
         currencyCode: this.getCurrencyCode(e.target.value),
+        loading: true,
     })
     this.getOrderDetails(this.state.type, e.target.value);
   }
@@ -223,6 +227,11 @@ export default class BookPage extends Component {
             </Typography>
           </Grid>
           }
+          {/* If loading, show circular progressbar */}
+          {this.state.loading ?
+          <Grid item xs={12} align="center">
+            <CircularProgress />
+          </Grid> : ""}
 
         { this.state.not_found ?
           (<Grid item xs={12} align="center">
diff --git a/frontend/src/components/MakerPage.js b/frontend/src/components/MakerPage.js
index f76df118..ed6ababb 100644
--- a/frontend/src/components/MakerPage.js
+++ b/frontend/src/components/MakerPage.js
@@ -19,6 +19,11 @@ function getCookie(name) {
 }
 const csrftoken = getCookie('csrftoken');
 
+// pretty numbers
+function pn(x) {
+    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  }
+
 export default class MakerPage extends Component {
   defaultCurrency = 1;
   defaultCurrencyCode = 'USD';
@@ -72,9 +77,9 @@ export default class MakerPage extends Component {
     }
     handleSatoshisChange=(e)=>{
         var bad_sats = e.target.value > this.maxTradeSats ? 
-            ("Must be less than "+this.maxTradeSats): 
+            ("Must be less than "+pn(this.maxTradeSats)): 
             (e.target.value < this.minTradeSats ? 
-            ("Must be more than "+this.minTradeSats): null)
+            ("Must be more than "+pn(this.minTradeSats)): null)
 
         this.setState({
             satoshis: e.target.value,
@@ -92,7 +97,6 @@ export default class MakerPage extends Component {
     handleClickExplicit=(e)=>{
         this.setState({
             isExplicit: true,
-            satoshis: 10000, 
             premium: null,     
         });
     }
@@ -238,6 +242,7 @@ export default class MakerPage extends Component {
                             <TextField 
                                     label="Satoshis"
                                     error={this.state.badSatoshis}
+                                    helperText={this.state.badSatoshis}
                                     type="number" 
                                     required="true" 
                                     inputProps={{
diff --git a/frontend/src/components/OrderPage.js b/frontend/src/components/OrderPage.js
index 1a30d15a..e0703490 100644
--- a/frontend/src/components/OrderPage.js
+++ b/frontend/src/components/OrderPage.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Paper, Button , Grid, Typography, List, ListItem, ListItemText, ListItemAvatar, Avatar, Divider, Box, LinearProgress} from "@mui/material"
+import { Paper, CircularProgress, Button , Grid, Typography, List, ListItem, ListItemText, ListItemAvatar, Avatar, Divider, Box, LinearProgress} from "@mui/material"
 import TradeBox from "./TradeBox";
 
 function msToTime(duration) {
@@ -312,7 +312,7 @@ export default class OrderPage extends Component {
   render (){
     return ( 
       // Only so nothing shows while requesting the first batch of data
-      (this.state.statusCode == null & this.state.badRequest == null) ? "" : this.orderDetailsPage()
+      (this.state.statusCode == null & this.state.badRequest == null) ? <CircularProgress /> : this.orderDetailsPage()
     );
   }
 }