From 3f09e9fea882749d6ae5ba7880cc9d1ac570b03a Mon Sep 17 00:00:00 2001 From: Giulio De Pasquale Date: Sun, 13 Dec 2020 19:32:33 +0000 Subject: [PATCH] graph working. old functional components are now standard components --- websrc/components/App.tsx | 58 +++++++++++++++++++----------------- websrc/components/HCard.tsx | 24 +++------------ websrc/components/RPlot.tsx | 57 +++++++++++++++++++++++++++++++++++ websrc/components/RToast.tsx | 49 ++++++++++++++++++++++++++++++ websrc/components/Toasts.tsx | 27 ----------------- websrc/index.tsx | 7 ++++- 6 files changed, 147 insertions(+), 75 deletions(-) create mode 100644 websrc/components/RPlot.tsx create mode 100644 websrc/components/RToast.tsx delete mode 100644 websrc/components/Toasts.tsx 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!")