HCard extends component now. added state
This commit is contained in:
parent
c11cbe9d3f
commit
035d7831ae
@ -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) {
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user