HCard extends component now. added state

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) {

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<CardProps> = ({ title, content }) =>
+type CardState = {
+    lastUpdate: Date
+}
+
+class HCard extends Component<CardProps, CardState> {
+    constructor(props: CardProps) {
+        super(props)
+    }
+
+    tick() {
+        this.setState({
+            lastUpdate: new Date()
+        })
+    }
+
+    componentWillMount() {
+        this.tick()
+    }
+
+    componentDidMount() {
+        setInterval(() => this.tick(), 1000)
+    }
+
+    render() {
+        return (
             <Card bg="light" style={{ minWidth: "15rem" }}>
                 <Row className="no-gutters">
                     <Col md={7} className="border-right my-auto">
-                <h3 className="text-center">{title}</h3>
+                        <h3 className="text-center">{this.props.title}</h3>
                     </Col>
 
                     <Col md={5}>
                         <Card.Body>
                             <Card.Text className="text-center">
-                        {content}
+                                {this.props.content}
                             </Card.Text>
                         </Card.Body>
                     </Col>
                 </Row>
                 <Card.Text className="border-top text-center">
-            <small className="text-muted my-auto mx-2">Last updated 3 mins ago</small>
+                    <small className="text-muted my-auto mx-2">Last updated {this.state.lastUpdate.toLocaleTimeString('en-GB')}</small>
                 </Card.Text>
-    </Card>
+            </Card>);
+    }
+}
+
+export default HCard;