From e9bcd23347507b16ce1e11b3aa555f0232acd1d0 Mon Sep 17 00:00:00 2001
From: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date: Mon, 3 Jan 2022 06:27:25 -0800
Subject: [PATCH] Add BookView endpoint and refactor pages

---
 api/urls.py                            |   3 +-
 api/views.py                           |  28 ++++++-
 frontend/src/components/MakerPage.js   | 104 +++++++++----------------
 frontend/src/components/OrderPage.js   |  12 ++-
 frontend/src/components/UserGenPage.js |  64 ++++++++-------
 5 files changed, 109 insertions(+), 102 deletions(-)

diff --git a/api/urls.py b/api/urls.py
index 27f39862..1af71120 100644
--- a/api/urls.py
+++ b/api/urls.py
@@ -1,8 +1,9 @@
 from django.urls import path
-from .views import MakeOrder, OrderView, UserGenerator
+from .views import MakeOrder, OrderView, UserGenerator, BookView
 
 urlpatterns = [
     path('make/', MakeOrder.as_view()),
     path('order/', OrderView.as_view()),
     path('usergen/', UserGenerator.as_view()),
+    path('book/', BookView.as_view()),
     ]
\ No newline at end of file
diff --git a/api/views.py b/api/views.py
index 784cd096..ec2a7455 100644
--- a/api/views.py
+++ b/api/views.py
@@ -81,7 +81,7 @@ class OrderView(APIView):
                 
                 #To do fix: data['status_message'] = Order.Status.get(order.status).label
                 data['status_message'] = Order.Status.WFB.label # Hardcoded WFB, should use order.status value.
-                
+
                 data['maker_nick'] = str(order.maker)
                 data['taker_nick'] = str(order.taker)
 
@@ -106,7 +106,7 @@ class UserGenerator(APIView):
         use_noun=True, 
         max_num=999)
 
-    def get(self,request):
+    def get(self,request, format=None):
         '''
         Get a new user derived from a high entropy token
         
@@ -159,7 +159,7 @@ class UserGenerator(APIView):
             if user is not None:
                 login(request, user)
                 # Sends the welcome back message, only if created +30 mins ago
-                if request.user.date_joined < (timezone.now()-timedelta(minutes=1)):
+                if request.user.date_joined < (timezone.now()-timedelta(minutes=30)):
                     context['found'] = 'We found your Robosat. Welcome back!'
                 return Response(context, status=status.HTTP_202_ACCEPTED)
             else:
@@ -184,3 +184,25 @@ class UserGenerator(APIView):
 
         return Response(status=status.HTTP_403_FORBIDDEN)
 
+class BookView(APIView):
+    serializer_class = OrderSerializer
+
+    def get(self,request, format=None):
+        currency = request.GET.get('currency_code')
+        type = request.GET.get('order_type')
+        queryset = Order.objects.filter(currency=currency, type=type)
+        book_data = {}
+        for i, order in enumerate(queryset):
+            data = OrderSerializer(order).data
+            user = User.objects.filter(id=data['maker'])
+            print(user)
+            if len(user) == 1:
+                data['maker_nick'] = user[0].username
+            # TODO avoid sending status and takers for book views
+            #data.pop('status','taker')
+            book_data[i] = data
+        return Response(book_data,status.HTTP_200_OK)
+        
+
+        
+
diff --git a/frontend/src/components/MakerPage.js b/frontend/src/components/MakerPage.js
index 2999ec83..746d6be4 100644
--- a/frontend/src/components/MakerPage.js
+++ b/frontend/src/components/MakerPage.js
@@ -133,15 +133,27 @@ export default class MakerPage extends Component {
                     </RadioGroup>
                     <FormHelperText>
                         <div align='center'>
-                            Choose Buy or Sell Bitcoin
+                        Choose Buy or Sell Bitcoin
                         </div>
                     </FormHelperText>
                 </FormControl>
             </Grid>
             <Grid item xs={12} align="center">
                 <FormControl >
+                    <TextField 
+                        label="Amount of Fiat to Trade"
+                        type="number" 
+                        required="true"
+                        defaultValue={this.defaultAmount} 
+                        inputProps={{
+                            min:0 , 
+                            style: {textAlign:"center"}
+                        }}
+                        onChange={this.handleAmountChange}
+                    />
                     <Select
-                        require={true} 
+                        label="Select Payment Currency"
+                        required="true" 
                         defaultValue={this.defaultCurrency} 
                         inputProps={{
                             style: {textAlign:"center"}
@@ -152,35 +164,13 @@ export default class MakerPage extends Component {
                         <MenuItem value={2}>EUR</MenuItem>
                         <MenuItem value={3}>ETH</MenuItem>
                     </Select>
-                    <FormHelperText>
-                        <div align='center'>
-                            Select Payment Currency
-                        </div>
-                    </FormHelperText>
                 </FormControl>
             </Grid>
+
             <Grid item xs={12} align="center">
                 <FormControl >
                     <TextField 
-                        type="number" 
-                        require={true} 
-                        defaultValue={this.defaultAmount} 
-                        inputProps={{
-                            min:0 , 
-                            style: {textAlign:"center"}
-                        }}
-                        onChange={this.handleAmountChange}
-                    />
-                </FormControl>
-                <FormHelperText>
-                        <div align='center'>
-                            Amount of Fiat to Trade
-                        </div>
-                </FormHelperText>
-            </Grid>
-            <Grid item xs={12} align="center">
-                <FormControl >
-                    <TextField 
+                        label="Payment Method(s)"
                         type="text" 
                         require={true}  
                         inputProps={{
@@ -188,11 +178,6 @@ export default class MakerPage extends Component {
                         }}
                         onChange={this.handlePaymentMethodChange}
                     />
-                    <FormHelperText>
-                        <div align='center'>
-                            Enter the Payment Method(s)
-                        </div>
-                    </FormHelperText>
                 </FormControl>
             </Grid>
             <Grid item xs={12} align="center">
@@ -224,43 +209,30 @@ export default class MakerPage extends Component {
 {/* conditional shows either Premium % field or Satoshis field based on pricing method */}
             { this.state.isExplicit 
                     ? <Grid item xs={12} align="center">
-                            <FormControl >
-                                <TextField 
-                                    type="number" 
-                                    require={true} 
-                                    inputProps={{
-                                        // TODO read these from .env file
-                                        min:10000 , 
-                                        max:500000 , 
-                                        style: {textAlign:"center"}
-                                    }}
-                                    onChange={this.handleSatoshisChange}
-                                    defaultValue={this.defaultSatoshis} 
-                                />
-                                <FormHelperText>
-                                    <div align='center'>
-                                        Explicit Amount in Satoshis
-                                    </div>
-                                </FormHelperText>
-                            </FormControl>
+                        <TextField 
+                                label="Explicit Amount in Satoshis"
+                                type="number" 
+                                required="true" 
+                                inputProps={{
+                                    // TODO read these from .env file
+                                    min:10000 , 
+                                    max:500000 , 
+                                    style: {textAlign:"center"}
+                                }}
+                                onChange={this.handleSatoshisChange}
+                                // defaultValue={this.defaultSatoshis} 
+                            />
                         </Grid>
                     :   <Grid item xs={12} align="center">
-                            <FormControl >
-                                <TextField 
-                                    type="number" 
-                                    require={true} 
-                                    defaultValue={this.defaultPremium} 
-                                    inputProps={{
-                                        style: {textAlign:"center"}
-                                    }}
-                                    onChange={this.handlePremiumChange}
-                                />
-                                <FormHelperText>
-                                    <div align='center'>
-                                        Premium Relative to Market Price (%)
-                                    </div>
-                                </FormHelperText>
-                            </FormControl>
+                            <TextField 
+                                label="Premium over Market (%)"
+                                type="number" 
+                                // defaultValue={this.defaultPremium} 
+                                inputProps={{
+                                    style: {textAlign:"center"}
+                                }}
+                                onChange={this.handlePremiumChange}
+                            />
                         </Grid>
                 }
             <Grid item xs={12} align="center">
diff --git a/frontend/src/components/OrderPage.js b/frontend/src/components/OrderPage.js
index 351d273e..da05d994 100644
--- a/frontend/src/components/OrderPage.js
+++ b/frontend/src/components/OrderPage.js
@@ -2,6 +2,11 @@ import React, { Component } from "react";
 import { Button , Grid, Typography, List, ListItem, ListItemText, ListItemAvatar, Avatar, Divider} from "@material-ui/core"
 import { Link } from 'react-router-dom'
 
+// pretty numbers
+function pn(x) {
+  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+}
+
 export default class OrderPage extends Component {
   constructor(props) {
     super(props);
@@ -49,14 +54,13 @@ export default class OrderPage extends Component {
                 <Avatar 
                   alt={this.state.makerNick} 
                   src={window.location.origin +'/static/assets/avatars/' + this.state.makerNick + '.png'} 
-                  sx={{ width: 56, height: 56 }}
                   />
               </ListItemAvatar>
               <ListItemText primary={this.state.makerNick} secondary="Order maker" />
             </ListItem>
             <Divider />
             <ListItem>
-              <ListItemText primary={this.state.amount+" "+this.state.currencyCode} secondary="Amount and currency requested"/>
+              <ListItemText primary={parseFloat(parseFloat(this.state.amount).toFixed(4))+" "+this.state.currencyCode} secondary="Amount and currency requested"/>
             </ListItem>
             <Divider />
             <ListItem>
@@ -65,9 +69,9 @@ export default class OrderPage extends Component {
             <Divider />
             <ListItem>
             {this.state.isExplicit ? 
-              <ListItemText primary={this.state.satoshis} secondary="Amount of Satoshis"/>
+              <ListItemText primary={pn(this.state.satoshis)} secondary="Amount of Satoshis"/>
               :
-              <ListItemText primary={this.state.premium} secondary="Premium over market price"/>
+              <ListItemText primary={parseFloat(parseFloat(this.state.premium).toFixed(2))+"%"} secondary="Premium over market price"/>
             }
             </ListItem>
             <Divider />
diff --git a/frontend/src/components/UserGenPage.js b/frontend/src/components/UserGenPage.js
index 02e03074..2d5c9dd0 100644
--- a/frontend/src/components/UserGenPage.js
+++ b/frontend/src/components/UserGenPage.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Button , Grid, Typography, TextField, Select, FormHelperText, MenuItem, FormControl, Radio, FormControlLabel, RadioGroup, Menu} from "@material-ui/core"
+import { Button , Grid, Typography, TextField, ButtonGroup} from "@material-ui/core"
 import { Link } from 'react-router-dom'
 import Image from 'material-ui-image'
 
@@ -88,6 +88,31 @@ export default class UserGenPage extends Component {
   render() {
     return (
       <Grid container spacing={1}>
+          <Grid item xs={12} align="center">
+            <Typography component="h5" variant="h5">
+            <b>{this.state.nickname ? "⚡"+this.state.nickname+"⚡" : ""}</b>
+            </Typography>
+          </Grid>
+          <Grid item xs={12} align="center">
+            <div style={{ maxWidth: 200, maxHeight: 200 }}>
+              <Image className='newAvatar'
+                disableError='true'
+                cover='true'
+                color='null'
+                src={this.state.avatar_url}
+              />
+            </div><br/>
+          </Grid>
+          {
+            this.state.found ?
+              <Grid item xs={12} align="center">
+                <Typography component="subtitle2" variant="subtitle2" color='primary'>
+                  {this.state.found}<br/>
+                </Typography>
+              </Grid>
+             :
+             ""
+          }
           <Grid item xs={12} align="center">
             <TextField
               error={this.state.bad_request}
@@ -102,36 +127,19 @@ export default class UserGenPage extends Component {
             />
           </Grid>
           <Grid item xs={12} align="center">
-            <div style={{ maxWidth: 200, maxHeight: 200 }}>
-              <Image className='newAvatar'
-                disableError='true'
-                cover='true'
-                color='null'
-                src={this.state.avatar_url}
-              />
-            </div>
+              <Button onClick={this.handleAnotherButtonPressed}>Generate Another Robosat</Button>
+          </Grid>
+          <Grid item xs={12} align="center">
+            <ButtonGroup variant="contained" aria-label="outlined primary button group">
+              <Button color='primary' to='/home' component={Link}>Buy BTC</Button>
+              <Button to='/home' component={Link}>INFO</Button>
+              <Button color='secondary' to='/home' component={Link}>Sell BTC</Button>
+            </ButtonGroup>
           </Grid>
           <Grid item xs={12} align="center">
             <Typography component="h5" variant="h5">
-            <b>{this.state.nickname ? "⚡"+this.state.nickname+"⚡" : ""}</b>
-            </Typography>
-          </Grid>
-          {
-            this.state.found ?
-              <Grid item xs={12} align="center">
-                <Typography component="subtitle2" variant="subtitle2" color='primary'>
-                  {this.state.found}<br/>
-                </Typography>
-                <Button variant='contained' color='primary' to='/home' component={Link}>Cool!</Button>
-              </Grid>
-             :
-             <Grid item xs={12} align="center">
-              <Button variant='contained' color='primary' to='/home' component={Link}>Take This Robosat!</Button>
-            </Grid>
-          }
-          
-          <Grid item xs={12} align="center">
-            <Button variant='contained' to='/' component={Link} onClick={this.handleAnotherButtonPressed}>Give Me Another</Button>
+            Easy and Private Lightning peer-to-peer Exchange
+          </Typography>
           </Grid>
       </Grid>
     );