positiontable renders from props and not from an internal state

This commit is contained in:
Giulio De Pasquale 2020-12-16 11:27:35 +00:00
parent 74152a9fb9
commit 0f82cd9d8c

View File

@ -1,13 +1,9 @@
import React, {Component} from "react"
import {Badge, Button, Container, Table} from "react-bootstrap"
import {NewTickData, PositionCloseMessage, PositionState, socket} from '../';
import {PositionCloseMessage, PositionState, socket} from '../';
export class PositionTable extends Component<{}, { positions: Array<PositionState> }> {
state = {
positions: []
}
export class PositionTable extends Component<{ positions: Array<PositionState> }> {
constructor(props) {
super(props)
}
@ -35,16 +31,8 @@ export class PositionTable extends Component<{}, { positions: Array<PositionStat
}
}
componentDidMount() {
socket.on('new_tick', (data: NewTickData) => {
this.setState({
positions: data.positions
})
})
}
tableData() {
return this.state.positions.map((position: PositionState) => {
return this.props.positions.map((position: PositionState) => {
return (<tr key={position.id}>
<td className={"align-middle"}><Badge
variant={this.stateVariantFromStr(position.state)}>{position.state}</Badge></td>
@ -54,10 +42,9 @@ export class PositionTable extends Component<{}, { positions: Array<PositionStat
<td className={"align-middle"}>{position.profit_loss.toFixed(2)}</td>
<td className={"align-middle"}>{position.profit_loss_percentage.toFixed(2)} %</td>
<td className={"align-middle"}><Button size={"sm"} variant={"danger"} onClick={() => {
const message : PositionCloseMessage = {
const message: PositionCloseMessage = {
message_name: "close_position",
position_id: position.id,
symbol: position.symbol
}
socket.emit(message.message_name, (message))
}}>Close</Button></td>