websrc/components/Tables.tsx

@@ -1,6 +1,6 @@
 import React, {Component} from "react"
 import {Badge, Button, Container, Table} from "react-bootstrap"
-import {PositionState} from '../';
+import {NewTickData, PositionState, socket} from '../';
 
 
 export class PositionTable extends Component<{}, { positions: Array<PositionState> }> {
@@ -14,7 +14,7 @@ export class PositionTable extends Component<{}, { positions: Array<PositionStat
     }
 
     state = {
-        positions: [this.testPosition]
+        positions: []
     }
 
     constructor(props) {
@@ -45,15 +45,11 @@ export class PositionTable extends Component<{}, { positions: Array<PositionStat
     }
 
     componentDidMount() {
-        this.setState({
-            positions: [this.testPosition]
+        socket.on('new_tick', (data: NewTickData) => {
+            this.setState({
+                positions: data.positions
+            })
         })
-
-        // socket.on('new_tick', (data: NewTickData) => {
-        //     this.setState({
-        //         positions: [...this.state.positions, data.positions]
-        //     })
-        // })
     }
 
     tableData() {
@@ -65,7 +61,9 @@ export class PositionTable extends Component<{}, { positions: Array<PositionStat
                 <td className={"align-middle"}>{position.base_price.toFixed(2)}</td>
                 <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"}>Close</Button></td>
+                <td className={"align-middle"}><Button size={"sm"} variant={"danger"} onClick={() => {
+                    socket.emit("close", ({"id": position.id}))
+                }}>Close</Button></td>
             </tr>)
         })
     }