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
ANY
BUY
SELL
And pay with
🌍 ANY
{
Object.entries(this.state.currencies_dict)
.map( ([key, value]) => {getFlags(value) + " " + value} )
}
{ 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}
Make Order
Be the first one to create an order
)
:
{this.state.loading ? null : this.bookListTable()}
}
Back
);
};
}