import React, { Component } from "react"; 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'; import getFlags from './getFlags' export default class BookPage extends Component { constructor(props) { super(props); this.state = { orders: new Array({id:0,}), currency: 0, type: 2, currencies_dict: {"0":"ANY"}, loading: true, }; this.getCurrencyDict() this.getOrderDetails(this.state.type, this.state.currency) this.state.currencyCode = this.getCurrencyCode(this.state.currency) } getOrderDetails(type, currency) { fetch('/api/book' + '?currency=' + currency + "&type=" + type) .then((response) => response.json()) .then((data) => console.log(data) & this.setState({ orders: data, not_found: data.not_found, loading: false, })); } handleRowClick=(e)=>{ console.log(e) this.props.history.push('/order/' + e); } handleTypeChange=(e)=>{ this.setState({ type: e.target.value, loading: true, }); this.getOrderDetails(e.target.value,this.state.currency); } handleCurrencyChange=(e)=>{ this.setState({ currency: e.target.value, currencyCode: this.getCurrencyCode(e.target.value), loading: true, }) this.getOrderDetails(this.state.type, e.target.value); } getCurrencyDict() { fetch('/static/assets/currencies.json') .then((response) => response.json()) .then((data) => this.setState({ currencies_dict: data })); } getCurrencyCode(val){ return this.state.currencies_dict[val.toString()] } // pretty numbers pn(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } 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, }) )} 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, renderCell: (params) => {return (
{params.row.currency + " " + getFlags(params.row.currency)}
)} }, { 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))+"%" }
)} }, ]} 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() { return ( Order Book I want to And pay with { this.state.not_found ? "" : You are {this.state.type == 0 ? selling : (this.state.type == 1 ? buying :" looking at all ")} BTC for {this.state.currencyCode} } {/* If loading, show circular progressbar */} {this.state.loading ? : ""} { this.state.not_found ? ( No orders found to {this.state.type == 0 ? ' sell ' :' buy ' } BTC for {this.state.currencyCode} Be the first one to create an order ) : {this.state.loading ? null : this.bookListTable()} } ); }; }