From 035d7831aeb47378b9a81595c67a6e4b54dfc4c3 Mon Sep 17 00:00:00 2001 From: Giulio De Pasquale Date: Sun, 13 Dec 2020 11:27:50 +0000 Subject: [PATCH] HCard extends component now. added state --- websrc/components/App.tsx | 2 +- websrc/components/HCard.tsx | 66 ++++++++++++++++++++++++++----------- 2 files changed, 48 insertions(+), 20 deletions(-) diff --git a/websrc/components/App.tsx b/websrc/components/App.tsx index da6e640..4e6dd50 100644 --- a/websrc/components/App.tsx +++ b/websrc/components/App.tsx @@ -1,7 +1,7 @@ import React, { Component } from "react"; import { Container, Navbar, Row } from "react-bootstrap"; import Plot from "react-plotly.js"; -import { HCard } from "./HCard"; +import HCard from "./HCard"; class App extends Component { constructor(props) { diff --git a/websrc/components/HCard.tsx b/websrc/components/HCard.tsx index 3df40e9..1c3bd49 100644 --- a/websrc/components/HCard.tsx +++ b/websrc/components/HCard.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { Component } from 'react'; import { FunctionComponent } from 'react'; import { Card, Col, Row } from 'react-bootstrap'; @@ -7,22 +7,50 @@ type CardProps = { content: string } -export const HCard: FunctionComponent = ({ title, content }) => - - - -

{title}

- +type CardState = { + lastUpdate: Date +} - - - - {content} - - - -
- - Last updated 3 mins ago - -
+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 ( + + + +

{this.props.title}

+ + + + + + {this.props.content} + + + +
+ + Last updated {this.state.lastUpdate.toLocaleTimeString('en-GB')} + +
); + } +} + +export default HCard;