import * as React from "react"; import { Button, Segment } from "semantic-ui-react"; import { injectState, MqttApiState } from "@app/state"; import { getRandomId } from "@common/utils"; class MessageTest extends React.Component<{ state: MqttApiState }> { render() { return ( <Segment> <h2>Message Test</h2> <Button onClick={this.test1}>Add test message</Button> <Button onClick={this.test2}>Add test message w/ timeout</Button> <Button onClick={this.test3}>Add test message w/ content</Button> </Segment> ); } private test1 = () => { this.props.state.uiStore.addMessage({ info: true, content: "Test Message! " + getRandomId(), header: "Header to test message", }); } private test2 = () => { this.props.state.uiStore.addMessage({ warning: true, content: "Im gonna dissapear in 5 seconds " + getRandomId(), header: "Header to test message", timeout: 5000, }); } private test3 = () => { this.props.state.uiStore.addMessage({ color: "brown", content: <div className="ui segment">I Have crazy content!</div>, header: "Header to test message", timeout: 5000, }); } } export default injectState(MessageTest);