import React, { Component } from "react";
import { Paper, Button , Grid, Typography, List, ListItem, ListItemText, ListItemAvatar, Avatar, Divider, Box, LinearProgress} from "@material-ui/core"
import TradeBox from "./TradeBox";
function msToTime(duration) {
var seconds = Math.floor((duration / 1000) % 60),
minutes = Math.floor((duration / (1000 * 60)) % 60),
hours = Math.floor((duration / (1000 * 60 * 60)) % 24);
minutes = (minutes < 10) ? "0" + minutes : minutes;
seconds = (seconds < 10) ? "0" + seconds : seconds;
return hours + "h " + minutes + "m " + seconds + "s";
}
// TO DO fix Progress bar to go from 100 to 0, from total_expiration time, showing time_left
function LinearDeterminate() {
const [progress, setProgress] = React.useState(0);
React.useEffect(() => {
const timer = setInterval(() => {
setProgress((oldProgress) => {
if (oldProgress === 0) {
return 100;
}
const diff = 1;
return Math.max(oldProgress - diff, 0);
});
}, 500);
return () => {
clearInterval(timer);
};
}, []);
return (
);
}
function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== '') {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
const csrftoken = getCookie('csrftoken');
// pretty numbers
function pn(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
export default class OrderPage extends Component {
constructor(props) {
super(props);
this.state = {
isExplicit: false,
};
this.orderId = this.props.match.params.orderId;
this.getOrderDetails();
}
getOrderDetails() {
fetch('/api/order' + '?order_id=' + this.orderId)
.then((response) => response.json())
.then((data) => {
this.setState({
statusCode: data.status,
statusText: data.status_message,
type: data.type,
currency: data.currency,
currencyCode: this.getCurrencyCode(data.currency),
amount: data.amount,
paymentMethod: data.payment_method,
isExplicit: data.is_explicit,
premium: data.premium,
satoshis: data.satoshis,
makerId: data.maker,
isParticipant: data.is_participant,
makerNick: data.maker_nick,
takerId: data.taker,
takerNick: data.taker_nick,
isMaker: data.is_maker,
isTaker: data.is_taker,
isBuyer: data.is_buyer,
isSeller: data.is_seller,
expiresAt: data.expires_at,
badRequest: data.bad_request,
bondInvoice: data.bond_invoice,
bondSatoshis: data.bond_satoshis,
escrowInvoice: data.escrow_invoice,
escrowSatoshis: data.escrow_satoshis,
badRequest: data.bad_request,
});
});
}
// Gets currency code (3 letters) from numeric (e.g., 1 -> USD)
// Improve this function so currencies are read from json
getCurrencyCode(val){
return (val == 1 ) ? "USD": ((val == 2 ) ? "EUR":"ETH")
}
// Fix to use proper react props
handleClickBackButton=()=>{
window.history.back();
}
handleClickTakeOrderButton=()=>{
console.log(this.state)
const requestOptions = {
method: 'POST',
headers: {'Content-Type':'application/json', 'X-CSRFToken': getCookie('csrftoken'),},
body: JSON.stringify({
'action':'take',
}),
};
fetch('/api/order/' + '?order_id=' + this.orderId, requestOptions)
.then((response) => response.json())
.then((data) => (console.log(data) & this.getOrderDetails(data.id)));
}
handleClickCancelOrderButton=()=>{
console.log(this.state)
const requestOptions = {
method: 'POST',
headers: {'Content-Type':'application/json', 'X-CSRFToken': getCookie('csrftoken'),},
body: JSON.stringify({
'action':'cancel',
}),
};
fetch('/api/order/' + '?order_id=' + this.orderId, requestOptions)
.then((response) => response.json())
.then((data) => (console.log(data) & this.getOrderDetails(data.id)));
}
orderBox=()=>{
return(
BTC {this.state.type ? " Sell " : " Buy "} Order
{this.state.isParticipant ?
<>
{this.state.takerNick!='None' ?
<>
>:
""
}
>
:""
}
{this.state.isExplicit ?
:
}
{/* Participants cannot see the Back or Take Order buttons */}
{this.state.isParticipant ? "" :
<>
>
}
{/* Makers can cancel before commiting the bond (status 0)*/}
{this.state.isMaker & this.state.statusCode == 0 ?
:""}
{/* Takers can cancel before commiting the bond (status 3)*/}
{this.state.isTaker & this.state.statusCode == 3 ?
:""}
)
}
render (){
return (
this.state.badRequest ?
{this.state.badRequest}
:
(this.state.isParticipant ?
{this.orderBox()}
:
{this.orderBox()}
)
);
}
}