From 30300c7e4f265c12608a419d97d5f7cd0f715a29 Mon Sep 17 00:00:00 2001
From: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date: Mon, 16 May 2022 04:37:30 -0700
Subject: [PATCH] Improve connection of UI between Make and Book

---
 frontend/src/components/BookPage.js  | 36 +++++++++++++++-------------
 frontend/src/components/HomePage.js  |  4 ++--
 frontend/src/components/MakerPage.js | 36 +++++++++++++++++++++-------
 3 files changed, 49 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/BookPage.js b/frontend/src/components/BookPage.js
index eac6186f..4331abbe 100644
--- a/frontend/src/components/BookPage.js
+++ b/frontend/src/components/BookPage.js
@@ -49,7 +49,7 @@ class BookPage extends Component {
   handleCurrencyChange=(e)=>{
     var currency = e.target.value;
     this.props.setAppState({
-      bookCurrency: currency,
+      currency: currency,
       bookCurrencyCode: this.getCurrencyCode(currency),
     })
   }
@@ -85,8 +85,8 @@ class BookPage extends Component {
       <div style={{ height: 422, width: '100%' }}>
       <DataGrid
         rows={
-            this.props.bookOrders.filter(order => order.type == this.props.bookType || this.props.bookType == 2)
-            .filter(order => order.currency == this.props.bookCurrency || this.props.bookCurrency == 0)
+            this.props.bookOrders.filter(order => order.type == this.props.type || this.props.type == 2)
+            .filter(order => order.currency == this.props.currency || this.props.currency == 0)
             .map((order) =>
             ({id: order.id,
               avatar: window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png',
@@ -186,8 +186,8 @@ class BookPage extends Component {
       <DataGrid
         loading={this.props.bookLoading}
         rows={
-          this.props.bookOrders.filter(order => order.type == this.props.bookType || this.props.bookType == 2)
-          .filter(order => order.currency == this.props.bookCurrency || this.props.bookCurrency == 0)
+          this.props.bookOrders.filter(order => order.type == this.props.type || this.props.type == 2)
+          .filter(order => order.currency == this.props.currency || this.props.currency == 0)
           .map((order) =>
             ({id: order.id,
               avatar: window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png',
@@ -294,7 +294,7 @@ class BookPage extends Component {
     } else if (sellChecked) {
       var type = 0
     }
-    this.props.setAppState({bookType: type})
+    this.props.setAppState({type: type})
   }
 
   handleClickBuy=(e)=>{
@@ -316,7 +316,7 @@ class BookPage extends Component {
       <Grid item xs={12} align="center">
         <Grid item xs={12} align="center">
           <Typography component="h5" variant="h5">
-            {this.props.bookType == 0 ?
+            {this.props.type == 0 ?
               t("No orders found to sell BTC for {{currencyCode}}",{currencyCode:this.props.bookCurrencyCode})
             :
               t("No orders found to buy BTC for {{currencyCode}}",{currencyCode:this.props.bookCurrencyCode})
@@ -328,7 +328,7 @@ class BookPage extends Component {
           <Button size="large" variant="contained" color='primary' to='/make/' component={Link}>{t("Make Order")}</Button>
         </Grid>
           <Typography color="primary" variant="body1">
-            {t("Be the first one to create an order")}
+            <b>{t("Be the first one to create an order")}</b>
             <br/>
             <br/>
           </Typography>
@@ -389,14 +389,14 @@ class BookPage extends Component {
           <Grid item xs={6} align="left">
             <FormControl align="center">
               <FormHelperText align="center" sx={{textAlign:"center", position:"relative", left:"-5px"}}>
-                  {this.props.bookType == 0 ? t("and receive") : (this.props.bookType == 1 ? t("and pay with") : t("and use") )}
+                  {this.props.type == 0 ? t("and receive") : (this.props.type == 1 ? t("and pay with") : t("and use") )}
               </FormHelperText>
               <Select
                   //autoWidth={true}
                   sx={{width:120}}
                   label={t("Select Payment Currency")}
                   required={true}
-                  value={this.props.bookCurrency}
+                  value={this.props.currency}
                   inputProps={{
                       style: {textAlign:"center"}
                   }}
@@ -412,10 +412,10 @@ class BookPage extends Component {
         { this.props.bookNotFound ? "" :
           <Grid item xs={12} align="center">
             <Typography component="h5" variant="h5">
-               {this.props.bookType == 0 ?
+               {this.props.type == 0 ?
                 t("You are SELLING BTC for {{currencyCode}}",{currencyCode:this.props.bookCurrencyCode})
                :
-                (this.props.bookType == 1 ?
+                (this.props.type == 1 ?
                   t("You are BUYING BTC for {{currencyCode}}",{currencyCode:this.props.bookCurrencyCode})
                 :
                   t("You are looking at all")
@@ -426,7 +426,7 @@ class BookPage extends Component {
           }
 
         { this.props.bookNotFound ?
-          <this.NoOrdersFound/>
+          this.NoOrdersFound()
           :
           <Grid item xs={12} align="center">
             {/* Desktop Book */}
@@ -445,9 +445,13 @@ class BookPage extends Component {
            </Grid>
           }
           <Grid item xs={12} align="center">
-              <Button color="secondary" variant="contained" to="/" component={Link}>
-                  {t("Back")}
-              </Button>
+            { !this.props.bookNotFound ?
+            <Button variant="contained" color='primary' to='/make/' component={Link}>{t("Make Order")}</Button>
+            : null
+            }
+            <Button color="secondary" variant="contained" to="/" component={Link}>
+                {t("Back")}
+            </Button>
           </Grid>
         </Grid>
     );
diff --git a/frontend/src/components/HomePage.js b/frontend/src/components/HomePage.js
index 2f986718..c83301e8 100644
--- a/frontend/src/components/HomePage.js
+++ b/frontend/src/components/HomePage.js
@@ -17,8 +17,8 @@ export default class HomePage extends Component {
         avatarLoaded: false,
         buyChecked: false,
         sellChecked: false,
-        bookType:2,
-        bookCurrency:0,
+        type:2,
+        currency:0,
         bookCurrencyCode:'ANY',
         bookOrders:new Array(),
         bookLoading: true,
diff --git a/frontend/src/components/MakerPage.js b/frontend/src/components/MakerPage.js
index bb9456fb..fafdda4f 100644
--- a/frontend/src/components/MakerPage.js
+++ b/frontend/src/components/MakerPage.js
@@ -66,8 +66,13 @@ class MakerPage extends Component {
     }
 
     componentDidMount() {
-    this.getLimits()
-  }
+        this.getLimits()
+        // if currency or type have changed in HomePage state, change in MakerPage state too.
+        this.setState({
+            currency: !this.props.currency === 0 ? this.props.currency : this.state.currency,
+            type: !this.props.type === 2 ? this.props.type : this.state.type,
+        })
+    }
 
   getLimits() {
     this.setState({loadingLimits:true})
@@ -94,13 +99,26 @@ class MakerPage extends Component {
   handleTypeChange=(e)=>{
       this.setState({
           type: e.target.value,
-      });
+      })
+      // Share state with HomePage and OrderPage
+      this.props.setAppState({
+        type: e.target.value,
+        buyChecked: e.target.value == 0 ? true: false,
+        sellChecked: e.target.value == 1 ? true: false,
+      })
+      ;
   }
   handleCurrencyChange=(e)=>{
+    var currencyCode = this.getCurrencyCode(e.target.value)
     this.setState({
         currency: e.target.value,
-        currencyCode: this.getCurrencyCode(e.target.value),
+        currencyCode: currencyCode,
     });
+    this.props.setAppState({
+        type: e.target.value,
+        currency: e.target.value,
+        bookCurrencyCode: currencyCode,
+      })
     if(this.state.enableAmountRange){
         this.setState({
             minAmount: parseFloat(Number(this.state.limits[e.target.value]['max_amount']*0.25).toPrecision(2)),
@@ -231,7 +249,7 @@ class MakerPage extends Component {
                 has_range: this.state.enableAmountRange,
                 min_amount: this.state.minAmount,
                 max_amount: this.state.maxAmount,
-                payment_method: this.state.payment_method,
+                payment_method: this.state.payment_method === ""? this.defaultPaymentMethod: this.state.payment_method,
                 is_explicit: this.state.is_explicit,
                 premium: this.state.is_explicit ? null: this.state.premium,
                 satoshis: this.state.is_explicit ? this.state.satoshis: null,
@@ -384,7 +402,7 @@ class MakerPage extends Component {
                     <TextField
                             sx={{width:240}}
                             label={t("Satoshis")}
-                            error={this.state.badSatoshis}
+                            error={this.state.badSatoshis ? true : false}
                             helperText={this.state.badSatoshis}
                             type="number"
                             required={true}
@@ -493,7 +511,7 @@ class MakerPage extends Component {
         const { t } = this.props;
         return (
             <div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>
-                <span style={{width: 40}}>{t("From")}</span>
+                <span style={{width: t("From").length*8+2, textAlign:"left"}}>{t("From")}</span>
                 <TextField
                     variant="standard"
                     type="number"
@@ -503,7 +521,7 @@ class MakerPage extends Component {
                     error={this.minAmountError()}
                     sx={{width: this.state.minAmount.toString().length * 9, maxWidth: 40}}
                   />
-                <span style={{width: t("to").length*8, align:"center"}}>{t("to")}</span>
+                <span style={{width: t("to").length*8, textAlign:"center"}}>{t("to")}</span>
                 <TextField
                     variant="standard"
                     size="small"
@@ -513,7 +531,7 @@ class MakerPage extends Component {
                     onChange={this.handleMaxAmountChange}
                     sx={{width: this.state.maxAmount.toString().length * 9, maxWidth: 50}}
                   />
-                <span style={{width: this.state.currencyCode.length*9+4, align:"right"}}>{this.state.currencyCode}</span>
+                <span style={{width: this.state.currencyCode.length*9+3, textAlign:"right"}}>{this.state.currencyCode}</span>
             </div>
             )