import * as React from 'react' ; import { bindActionCreators } from 'redux' ; import { connect } from 'react-redux' ; import { RootState } from '../../reducers' ; import * as ResultActions from '../../actions/results' ; import Header from '../../components/Header' ; import ResultList from '../../components/ResultList' ; import * as style from './style.css' ; import * as io from 'socket.io-client' ; import { VariableMap } from '../../reducers/variables' ; import VariableList from '../../components/Variables' ; import * as Actions from '../../constants/resultActions' ; interface AppProps { settings : NotebookResultSettings ; resultActions : typeof ResultActions ; results : NotebookResultsState ; variables : VariableMap ; toggleVariables : ( ) => void ; } ; interface AppState { } class App extends React . Component < AppProps , AppState > { private socket : SocketIOClient . Socket ; constructor ( props ? , context ? ) { super ( props , context ) ; this . socket = ( window as any ) . io ( ) ; this . socket . on ( 'connect' , ( ) => { } ) ; this . socket . on ( 'settings.appendResults' , ( value ) => { this . props . resultActions . setAppendResults ( value ) ; } ) ; this . socket . on ( 'clientExists' , ( data ) => { this . socket . emit ( 'clientExists' , { id : data . id } ) ; } ) ; this . socket . on ( 'results' , ( value ) => { if ( ! this . props . settings . appendResults ) { this . props . resultActions . clearResults ( ) ; } this . socket . emit ( 'results.ack' ) ; this . props . resultActions . addResults ( value ) ; window . scrollTo ( 0 , document . body . scrollHeight ) ; } ) ; this . socket . on ( 'variable' , ( value ) => { this . socket . emit ( 'results.ack' ) ; this . props . resultActions . addVariable ( value ) ; } ) ; } toggleAppendResults = ( ) => { this . socket . emit ( 'settings.appendResults' , ! this . props . settings . appendResults ) ; } ; toggleVariable = ( name ) => { this . socket . emit ( 'settings.showVariable' , { [ name ] : ! ! ! this . props . settings . toggledVariables [ name ] } ) ; } ; private clearResults ( ) { this . socket . emit ( 'clearResults' ) ; this . props . resultActions . clearResults ( ) ; } render ( ) { const { children , variables , resultActions , settings } = this . props ; return ( < div > < VariableList variables = { variables } visible = { this . props . settings . showVariables } toggleVariables = { this . props . toggleVariables } toggleVariable = { this . toggleVariable } / > < Header appendResults = { settings . appendResults } clearResults = { ( ) => this . clearResults ( ) } toggleAppendResults = { ( ) => this . toggleAppendResults ( ) } > < /Header> < ResultList results = { this . props . results } > < /ResultList> { children } < /div>); } } function mapStateToProps ( state ) { return { settings : state . settings , variables : state . variables , results : state . results } ; } function mapDispatchToProps ( dispatch , ownProps ) { return { resultActions : bindActionCreators ( ResultActions as any , dispatch ) , toggleVariables : ( toggle ) => { dispatch ( { type : Actions . TOGGLE_VARIABLES , payload : toggle } ) ; } , toggleVariable : ( name , toggle ) => { dispatch ( { type : Actions . TOGGLE_VARIABLE , payload : { [ name ] : toggle } } ) ; } } ; } export default connect ( mapStateToProps , mapDispatchToProps ) ( App ) ;