diff --git a/websrc/components/App.tsx b/websrc/components/App.tsx
index 4e6dd50..7f58db8 100644
--- a/websrc/components/App.tsx
+++ b/websrc/components/App.tsx
@@ -1,42 +1,46 @@
import React, { Component } from "react";
-import { Container, Navbar, Row } from "react-bootstrap";
+import { Col, Container, Navbar, Row } from "react-bootstrap";
import Plot from "react-plotly.js";
import HCard from "./HCard";
+import RPlot from "./RPlot";
+import { RToast } from "./RToast";
+import { NewTickData, socket } from "../";
+
+type AppState = {
+ current_price: number,
+ current_tick: number,
+ last_update: Date
+}
class App extends Component {
constructor(props) {
super(props)
}
+ state = {
+ current_price: 0,
+ current_tick: 0,
+ last_update: new Date()
+ }
+
+ componentDidMount() {
+ socket.on("new_tick", (data: NewTickData) => {
+ this.setState({ current_price: data.price, current_tick: data.tick, last_update: new Date() })
+ })
+ }
+
render() {
return (
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
+
+
+
+
)
}
}
diff --git a/websrc/components/HCard.tsx b/websrc/components/HCard.tsx
index 1c3bd49..2534353 100644
--- a/websrc/components/HCard.tsx
+++ b/websrc/components/HCard.tsx
@@ -4,32 +4,16 @@ import { Card, Col, Row } from 'react-bootstrap';
type CardProps = {
title: string,
- content: string
+ content: string,
+ update: Date
}
-type CardState = {
- lastUpdate: Date
-}
-class HCard extends Component {
+class HCard extends Component {
constructor(props: CardProps) {
super(props)
}
- tick() {
- this.setState({
- lastUpdate: new Date()
- })
- }
-
- componentWillMount() {
- this.tick()
- }
-
- componentDidMount() {
- setInterval(() => this.tick(), 1000)
- }
-
render() {
return (
@@ -47,7 +31,7 @@ class HCard extends Component {
- Last updated {this.state.lastUpdate.toLocaleTimeString('en-GB')}
+ Last updated {this.props.update.toLocaleTimeString('en-GB')}
);
}
diff --git a/websrc/components/RPlot.tsx b/websrc/components/RPlot.tsx
new file mode 100644
index 0000000..ef0f0b9
--- /dev/null
+++ b/websrc/components/RPlot.tsx
@@ -0,0 +1,57 @@
+import React from "react"
+import { Component } from "react"
+import Plot from "react-plotly.js"
+
+import { NewTickData, socket } from '../';
+
+
+
+type PlotState = {
+ x: Array,
+ y: Array
+}
+
+class RPlot extends Component<{}, PlotState> {
+ constructor(props) {
+ super(props)
+ }
+
+ state = {
+ x: [],
+ y: []
+ }
+
+ componentDidMount() {
+ socket.on("new_tick", (data: NewTickData) => {
+ this.setState({
+ x: [...this.state.x, data.tick],
+ y: [...this.state.y, data.price],
+ })
+ })
+ }
+
+ render() {
+ return (
+
+ )
+ }
+}
+
+export default RPlot;
diff --git a/websrc/components/RToast.tsx b/websrc/components/RToast.tsx
new file mode 100644
index 0000000..342efe7
--- /dev/null
+++ b/websrc/components/RToast.tsx
@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import { FunctionComponent } from 'react';
+import { Card, Col, Row, Toast } from 'react-bootstrap';
+import { socket } from "../";
+
+type ToastProps = {
+ title: string,
+ content?: string,
+ bg?: string
+}
+
+type ToastState = {
+ lastUpdated: Date,
+ show: boolean
+}
+
+
+export class RToast extends Component {
+ constructor(props: ToastProps) {
+ super(props)
+ }
+
+ state = {
+ lastUpdated: new Date(),
+ show: false
+ }
+
+ componentDidMount() {
+ socket.on("connect", () => {
+ this.setState({ show: true })
+ })
+ }
+
+ tick() {
+ this.setState({ lastUpdated: new Date() })
+ }
+
+ render() {
+ return (
+
+
+ {this.props.title}
+ {this.state.lastUpdated.toLocaleTimeString('en-GB')}
+
+ { this.props.content ? {this.props.content} : null}
+
+ )
+ }
+}
\ No newline at end of file
diff --git a/websrc/components/Toasts.tsx b/websrc/components/Toasts.tsx
deleted file mode 100644
index 82e8d6d..0000000
--- a/websrc/components/Toasts.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import { FunctionComponent } from 'react';
-import { Card, Col, Row, Toast } from 'react-bootstrap';
-
-type ToastProps = {
- title: string,
- content?: string
-}
-
-export const FullToast: FunctionComponent = ({ title, content }) =>
-
-
- {title}
- 10 mins ago
-
- {content}
-
-
-export const HeaderToast: FunctionComponent = ({ title }) =>
-
-
- {title}
- 10 mins ago
-
-
-
-export default FullToast;
\ No newline at end of file
diff --git a/websrc/index.tsx b/websrc/index.tsx
index 530c79d..646b886 100644
--- a/websrc/index.tsx
+++ b/websrc/index.tsx
@@ -4,7 +4,12 @@ import "bootstrap/dist/css/bootstrap.css";
import App from "./components/App";
import io from "socket.io-client";
-const socket = io();
+export const socket = io();
+
+export type NewTickData = {
+ tick: number,
+ price: number
+}
socket.on("connect", function () {
console.log("Connected!")