Rework book as datagrid

api/logics.py

@@ -92,7 +92,7 @@ class Logics():
             premium = int(premium*100)  # 2 decimals left
             price = order_rate
 
-        significant_digits = 6
+        significant_digits = 5
         price = round(price, significant_digits - int(math.floor(math.log10(abs(price)))) - 1)
         
         return price, premium

frontend/package-lock.json

@@ -1674,6 +1674,17 @@
         "react-is": "^17.0.2"
       }
     },
+    "@mui/x-data-grid": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-5.2.2.tgz",
+      "integrity": "sha512-FI/fwsMMATUdEHwiGGkBdiw/p3G6+iUlkoklBzzsB6MY0Mb+Voj+s/waoFM3uyNJ+h4jof8NTS/Gs8IfDiyciA==",
+      "requires": {
+        "@mui/utils": "^5.2.3",
+        "clsx": "^1.1.1",
+        "prop-types": "^15.8.0",
+        "reselect": "^4.1.5"
+      }
+    },
     "@popperjs/core": {
       "version": "2.11.2",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
@@ -7049,6 +7060,11 @@
       "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
       "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
     },
+    "reselect": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.5.tgz",
+      "integrity": "sha512-uVdlz8J7OO+ASpBYoz1Zypgx0KasCY20H+N8JD13oUMtPvSHQuscrHop4KbXrbsBcdB9Ds7lVK7eRkBIfO43vQ=="
+    },
     "resolve": {
       "version": "1.20.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",

frontend/package.json

@@ -29,6 +29,7 @@
     "@mui/icons-material": "^5.2.5",
     "@mui/material": "^5.2.7",
     "@mui/system": "^5.2.6",
+    "@mui/x-data-grid": "^5.2.2",
     "material-ui-image": "^3.3.2",
     "react-countdown": "^2.3.2",
     "react-markdown": "^7.1.2",

frontend/src/components/BookPage.js

@@ -1,26 +1,27 @@
 import React, { Component } from "react";
-import { Paper, Button , Divider, CircularProgress, ListItemButton, Typography, Grid, Select, MenuItem, FormControl, FormHelperText, List, ListItem, ListItemText, Avatar, RouterLink, ListItemAvatar} from "@mui/material";
+import { Paper, Button , CircularProgress, ListItemButton, Typography, Grid, Select, MenuItem, FormControl, FormHelperText, List, ListItem, ListItemText, Avatar, RouterLink, ListItemAvatar} from "@mui/material";
 import { Link } from 'react-router-dom'
+import { DataGrid } from '@mui/x-data-grid';
 
 export default class BookPage extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      orders: new Array(),
+      orders: new Array({id:0,}),
       currency: 0,
       type: 1,
       currencies_dict: {"0":"ANY"},
       loading: true,
     };
     this.getCurrencyDict()
-    this.getOrderDetails(this.state.type,this.state.currency)
+    this.getOrderDetails(this.state.type, this.state.currency)
     this.state.currencyCode = this.getCurrencyCode(this.state.currency)
   }
 
-  getOrderDetails(type,currency) {
+  getOrderDetails(type, currency) {
     fetch('/api/book' + '?currency=' + currency + "&type=" + type)
       .then((response) => response.json())
-      .then((data) =>
+      .then((data) => console.log(data) &
       this.setState({
         orders: data,
         not_found: data.not_found,
@@ -28,7 +29,7 @@ export default class BookPage extends Component {
       }));
   }
 
-  handleCardClick=(e)=>{
+  handleRowClick=(e)=>{
     console.log(e)
     this.props.history.push('/order/' + e);
   }
@@ -67,54 +68,56 @@ export default class BookPage extends Component {
     return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
   }
 
-  bookListItems=()=>{
+  bookListTable=()=>{
-    return (this.state.orders.map((order) =>
+    return (
-      <>
+      <div style={{ height: 475, width: '100%' }}>
-        <ListItemButton value={order.id} onClick={() => this.handleCardClick(order.id)}>
+      <DataGrid
+        rows={
+            this.state.orders.map((order) =>
+            ({id: order.id,
+              avatar: window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png',
+              robosat: order.maker_nick, 
+              type: order.type ? "Sell": "Buy",
+              amount: parseFloat(parseFloat(order.amount).toFixed(4)),
+              currency: this.getCurrencyCode(order.currency),
+              payment_method: order.payment_method,
+              price: order.price,
+              premium: order.premium,
+            })
+          )}
 
-          <ListItemAvatar >
+        columns={[
-            <Avatar
+          // { field: 'id', headerName: 'ID', width: 40 },
-                alt={order.maker_nick}
+          { field: 'robosat', headerName: 'RoboSat', width: 240, 
-                src={window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png'} 
+            renderCell: (params) => {return (
-                />
+              <ListItemButton style={{ cursor: "pointer" }}>
-          </ListItemAvatar>
+                <ListItemAvatar>
-          
+                  <Avatar alt={params.row.robosat} src={params.row.avatar} />
-          <ListItemText>
+                </ListItemAvatar>
-            <Typography  variant="h6">
+                <ListItemText primary={params.row.robosat}/>
-              {order.maker_nick+" "}    
+              </ListItemButton>
-            </Typography>
+            );
-          </ListItemText>
+          } },
-          
+          { field: 'type', headerName: 'Type', width: 60 },
-          <ListItemText align='left'>
+          { field: 'amount', headerName: 'Amount', type: 'number', width: 80 },
-            <Typography  variant="subtitle1">
+          { field: 'currency', headerName: 'Currency', width: 100 },
-              <b>{order.type ? " Sells ": " Buys "} BTC </b> for {parseFloat(
+          { field: 'payment_method', headerName: 'Payment Method', width: 180 },
-                parseFloat(order.amount).toFixed(4))+" "+ this.getCurrencyCode(order.currency)+" "}
+          { field: 'price', headerName: 'Price', type: 'number', width: 140,
-            </Typography>
+          renderCell: (params) => {return (
-          </ListItemText>
+            <div style={{ cursor: "pointer" }}>{this.pn(params.row.price) + " " +params.row.currency+ "/BTC" }</div>
+          )} },
+          { field: 'premium', headerName: 'Premium', type: 'number', width: 100,
+            renderCell: (params) => {return (
+              <div style={{ cursor: "pointer" }}>{parseFloat(parseFloat(params.row.premium).toFixed(4))+"%" }</div>
+            )} },
+          ]}
 
-          <ListItemText align='left'>
+        pageSize={7}
-            <Typography  variant="subtitle1">
+        onRowClick={(params) => this.handleRowClick(params.row.id)} // Whole row is clickable, but the mouse only looks clickly in some places.
-              via <b>{order.payment_method}</b>
+        rowsPerPageOptions={[7]}
-            </Typography>
+      />
-          </ListItemText>
+    </div>
-
+    );
-          <ListItemText align='right'>
-            <Typography  variant="subtitle1">
-              at <b>{this.pn(order.price) + " " + this.getCurrencyCode(order.currency)}/BTC</b>
-            </Typography>
-          </ListItemText>
-
-          <ListItemText align='right'>
-            <Typography  variant="subtitle1">
-              {order.premium > 1 ? "🔴" : "🔵" } <b>{parseFloat(parseFloat(order.premium).toFixed(4))}%</b>
-            </Typography>
-          </ListItemText>
-
-        </ListItemButton>
-      
-        <Divider/>
-      </>
-    ));
   }
 
   render() {
@@ -196,10 +199,10 @@ export default class BookPage extends Component {
           </Grid>)
           : 
           <Grid item xs={12} align="center">
-            <Paper elevation={0} style={{width: 900, maxHeight: 500, overflow: 'auto'}}>
+            <Paper elevation={0} style={{width: 910, maxHeight: 500, overflow: 'auto'}}>
-              <List >
+
-                {this.bookListItems()}
+                {this.state.loading ? null : this.bookListTable()}
-              </List>
+
             </Paper>
            </Grid>
           }

setup.md

@@ -116,6 +116,7 @@ npm install react-markdown
 npm install websocket
 npm install react-countdown
 npm install @mui/icons-material
+npm install @mui/x-data-grid
 ```
 Note we are using mostly MaterialUI V5 (@mui/material) but Image loading from V4 (@material-ui/core) extentions (so both V4 and V5 are needed)