import * as React from 'react' ; import Button from '../Button' ; import exampleMessages from './exampleMessages' ; import { ConnectedStatusIndicator , ConnectButton , Container , DisconnectButton , DisconnectedStatusIndicator , ExampleMessageDropDown , Input , InputGroup , Label , TextArea , SimulateDisconnectButton , StatusContents , } from './styles' ; const { NODE_ENV } = process . env ; interface Props { connected : boolean ; connect : ( url : string ) => void ; disconnect : ( ) => void ; onSendMessage : ( message : any ) => void ; } interface State { message : string ; webSocketUrl : string ; } class class Controls extends React . Component < Props , State > { state = { message : '' , webSocketUrl : 'wss://websocket-echo-server.herokuapp.com' , } ; /**
     * Component did mount.
     */ componentDidMount ( ) { const { connect } = this . props ; const { webSocketUrl } = this . state ; connect ( webSocketUrl ) ; } /**
     * Handle the example message changing.
     */ handleExampleMessageChange = ( event ) => { const { value : message } = event . target ; this . setState ( { message } ) ; } ; /**
     * Handle the message field chaning.
     */ handleMessageChange = ( event ) => { const { value : message } = event . target ; this . setState ( { message } ) ; } ; /**
     * Handle sending a message.
     */ handleSendMessage = ( ) => { const { onSendMessage } = this . props ; const { message } = this . state ; try { onSendMessage ( JSON . parse ( message ) ) ; } catch { alert ( 'Please enter valid JSON!' ) ; } if ( NODE_ENV === 'production' && window . _StatHat ) { window . _StatHat . push ( [ '_trackCount' , 'OFVGkOrEGgqsRvILIx99ZiA2VTFD' , 1.0 , ] ) ; } else { console . warn ( 'Not sending count to StatHat. NODE_ENV =' , NODE_ENV ) ; } } ; /**
     * Handle the URL field changing.
     */ handleUrlChange = ( event ) => { const { value : webSocketUrl } = event . target ; this . setState ( { webSocketUrl } ) ; } ; /**
     * Simulate a disconnection.
     */ simulateDisconnect = ( ) => { ( window as any ) . __socket . dispatchEvent ( new Event ( 'error' ) ) ; } ; returns { React . ReactNode } render ( ) { const { connect , connected , disconnect } = this . props ; const { message , webSocketUrl } = this . state ; return ( < Container > < InputGroup > < Label > Server < Input type = "text" placeholder = "Input server URL here…" onChange = { this . handleUrlChange } value = { webSocketUrl } / > < /Label> < /InputGroup> < InputGroup > < Label > Status < /Label> < StatusContents > < ConnectedStatusIndicator active = { connected } text = "Connected" / > < DisconnectedStatusIndicator active = { ! connected } text = "Disconnected" type = "WARN" / > < ConnectButton disabled = { connected } onClick = { ( ) => connect ( webSocketUrl ) } > Connect < /ConnectButton> < DisconnectButton disabled = { ! connected } onClick = { disconnect } > Disconnect < /DisconnectButton> < SimulateDisconnectButton onClick = { this . simulateDisconnect } > Simulate Disconnect < /SimulateDisconnectButton> < /StatusContents> < /InputGroup> < InputGroup > < Label > Example Messages < ExampleMessageDropDown options = { exampleMessages } onChange = { this . handleExampleMessageChange } / > < /Label> < /InputGroup> < InputGroup > < TextArea onChange = { this . handleMessageChange } placeholder = "Input JSON formated message here…" value = { message } rows = { 10 } / > < Button onClick = { this . handleSendMessage } > Send message < /Button> < /InputGroup> < /Container>); } } export default Controls ;