From cf11583d6d208fdd44adc315f6b629ce9d5f1be2 Mon Sep 17 00:00:00 2001
From: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date: Mon, 10 Jan 2022 02:49:21 -0800
Subject: [PATCH] Add scrolling book

---
 api/utils.py                        |  2 +-
 frontend/src/components/BookPage.js | 65 ++++-------------------------
 2 files changed, 9 insertions(+), 58 deletions(-)

diff --git a/api/utils.py b/api/utils.py
index 85333355..e185c3f9 100644
--- a/api/utils.py
+++ b/api/utils.py
@@ -5,7 +5,7 @@ import ring
 
 storage = {}
 
-@ring.dict(storage, expire=60) #keeps in cache for 60 secs
+@ring.dict(storage, expire=10) #keeps in cache for 10 seconds
 def get_exchange_rate(currency):
     # TODO Add fallback Public APIs and error handling
     # Think about polling price data in a different way (e.g. store locally every t seconds)
diff --git a/frontend/src/components/BookPage.js b/frontend/src/components/BookPage.js
index 0941045f..9facc01e 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, CircularProgress, ListItemButton, Typography, Grid, Select, MenuItem, FormControl, FormHelperText, List, ListItem, ListItemText, Avatar, RouterLink, ListItemAvatar} from "@mui/material";
+import { Paper, 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 {
@@ -117,59 +117,6 @@ export default class BookPage extends Component {
     ));
   }
 
-//     <Grid container item sm={4}>
-//       <Card elevation={6} sx={{ width: 945 }}>
-
-//         <CardActionArea value={order.id} onClick={() => this.handleCardClick(order.id)}>
-//           <CardContent>
-
-//             <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 */}
-//               <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" : (
-//                   " at " + 
-//                   parseFloat(parseFloat(order.premium).toFixed(4)) + "% over the market"                     
-//                   )}
-//                 </Typography> */}
-
-//                 <Typography variant="subtitle1" color="text.secondary">
-//                 ◑ <b>{" 42,354 "}{this.getCurrencyCode(order.currency)}/BTC</b>  (Binance API)
-//                 </Typography>
-//               </ListItemText>
-
-//             </List>
-
-//           </CardContent>
-//         </CardActionArea>
-//       </Card>
-//       </Grid>
-
   render() {
       return (
         <Grid className='orderBook' container spacing={1}>
@@ -248,9 +195,13 @@ export default class BookPage extends Component {
               </Typography>
           </Grid>)
           : 
-            <List sx={{ width: '120%', overflow: 'auto',}} >
-              {this.bookListItems()}
-            </List>
+          <Grid item xs={12} align="center">
+            <Paper elevation={0} style={{width: 1100, maxHeight: 600, overflow: 'auto'}}>
+              <List >
+                {this.bookListItems()}
+              </List>
+            </Paper>
+           </Grid>
           }
           <Grid item xs={12} align="center">
               <Button color="secondary" variant="contained" to="/" component={Link}>