49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
|
import React, { Component } from 'react';
|
||
|
|
import { FunctionComponent } from 'react';
|
||
|
|
import { Card, Col, Row, Toast } from 'react-bootstrap';
|
||
|
|
import { socket } from "../";
|
||
|
|
|
||
|
|
type ToastProps = {
|
||
|
|
title: string,
|
||
|
|
content?: string,
|
||
|
|
bg?: string
|
||
|
|
}
|
||
|
|
|
||
|
|
type ToastState = {
|
||
|
|
lastUpdated: Date,
|
||
|
|
show: boolean
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
export class RToast extends Component<ToastProps, ToastState> {
|
||
|
|
constructor(props: ToastProps) {
|
||
|
|
super(props)
|
||
|
|
}
|
||
|
|
|
||
|
|
state = {
|
||
|
|
lastUpdated: new Date(),
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
|
||
|
|
componentDidMount() {
|
||
|
|
socket.on("connect", () => {
|
||
|
|
this.setState({ show: true })
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
tick() {
|
||
|
|
this.setState({ lastUpdated: new Date() })
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<Toast show={this.state.show} delay={5000} autohide>
|
||
|
|
<Toast.Header>
|
||
|
|
<strong className="mr-auto">{this.props.title}</strong>
|
||
|
|
<small>{this.state.lastUpdated.toLocaleTimeString('en-GB')}</small>
|
||
|
|
</Toast.Header>
|
||
|
|
{ this.props.content ? <Toast.Body> {this.props.content}</Toast.Body> : null}
|
||
|
|
</Toast>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|