From 7a6cf943eefdac48b7acc4b4f72b822785230eba Mon Sep 17 00:00:00 2001 From: Reckless_Satoshi Date: Fri, 14 Jan 2022 13:40:54 -0800 Subject: [PATCH] Rework book as datagrid --- api/logics.py | 2 +- frontend/package-lock.json | 16 ++++ frontend/package.json | 1 + frontend/src/components/BookPage.js | 115 ++++++++++++++-------------- setup.md | 1 + 5 files changed, 78 insertions(+), 57 deletions(-) diff --git a/api/logics.py b/api/logics.py index df5592b6..56953e24 100644 --- a/api/logics.py +++ b/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 diff --git a/frontend/package-lock.json b/frontend/package-lock.json index cf8cd9f7..d16fcc61 100644 --- a/frontend/package-lock.json +++ b/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", diff --git a/frontend/package.json b/frontend/package.json index 55a83e36..6d055c42 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/components/BookPage.js b/frontend/src/components/BookPage.js index 6c305a0c..a6a6ceb5 100644 --- a/frontend/src/components/BookPage.js +++ b/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=()=>{ - return (this.state.orders.map((order) => - <> - this.handleCardClick(order.id)}> + bookListTable=()=>{ + return ( +
+ + ({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, + }) + )} - - - - - - - {order.maker_nick+" "} - - - - - - {order.type ? " Sells ": " Buys "} BTC for {parseFloat( - parseFloat(order.amount).toFixed(4))+" "+ this.getCurrencyCode(order.currency)+" "} - - + columns={[ + // { field: 'id', headerName: 'ID', width: 40 }, + { field: 'robosat', headerName: 'RoboSat', width: 240, + renderCell: (params) => {return ( + + + + + + + ); + } }, + { field: 'type', headerName: 'Type', width: 60 }, + { field: 'amount', headerName: 'Amount', type: 'number', width: 80 }, + { field: 'currency', headerName: 'Currency', width: 100 }, + { field: 'payment_method', headerName: 'Payment Method', width: 180 }, + { field: 'price', headerName: 'Price', type: 'number', width: 140, + renderCell: (params) => {return ( +
{this.pn(params.row.price) + " " +params.row.currency+ "/BTC" }
+ )} }, + { field: 'premium', headerName: 'Premium', type: 'number', width: 100, + renderCell: (params) => {return ( +
{parseFloat(parseFloat(params.row.premium).toFixed(4))+"%" }
+ )} }, + ]} - - - via {order.payment_method} - - - - - - at {this.pn(order.price) + " " + this.getCurrencyCode(order.currency)}/BTC - - - - - - {order.premium > 1 ? "🔴" : "🔵" } {parseFloat(parseFloat(order.premium).toFixed(4))}% - - - - - - - - )); + pageSize={7} + onRowClick={(params) => this.handleRowClick(params.row.id)} // Whole row is clickable, but the mouse only looks clickly in some places. + rowsPerPageOptions={[7]} + /> +
+ ); } render() { @@ -196,10 +199,10 @@ export default class BookPage extends Component { ) : - - - {this.bookListItems()} - + + + {this.state.loading ? null : this.bookListTable()} + } diff --git a/setup.md b/setup.md index 366747dc..032a374f 100644 --- a/setup.md +++ b/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)