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 }) =>
-    <Card bg="light" style={{ minWidth: "15rem" }}>
-        <Row className="no-gutters">
-            <Col md={7} className="border-right my-auto">
-                <h3 className="text-center">{title}</h3>
-            </Col>
+type CardState = {
+    lastUpdate: Date
+}
 
-            <Col md={5}>
-                <Card.Body>
-                    <Card.Text className="text-center">
-                        {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>
-        </Card.Text>
-    </Card>
+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">{this.props.title}</h3>
+                    </Col>
+
+                    <Col md={5}>
+                        <Card.Body>
+                            <Card.Text className="text-center">
+                                {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 {this.state.lastUpdate.toLocaleTimeString('en-GB')}</small>
+                </Card.Text>
+            </Card>);
+    }
+}
+
+export default HCard;