HCard extends component now. added state

This commit is contained in:
Giulio De Pasquale 2020-12-13 11:27:50 +00:00
parent c11cbe9d3f
commit 035d7831ae
2 changed files with 48 additions and 20 deletions

View File

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

View File

@ -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;