core/websrc/components/RToast.tsx

import React, {Component} from 'react';
import {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> {
    state = {
        lastUpdated: new Date(),
        show: false
    }

    constructor(props: ToastProps) {
        super(props)
    }

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