import React from "react" ; import { connect } from "react-redux" ; import { Action } from "redux" ; import { ThunkDispatch } from "redux-thunk" ; import { ChannelNode , ChannelTree } from "../../components/channel" ; import { getAllChannels } from "../../store/channels/channels" ; import { ActionType , ApplicationState , ChannelsState } from "../../store/types" ; import "./Channels.scss" ; export type ChannelsProps = { getAllChannels : ( ) => void ; channelsState : ChannelsState ; } ; export class Channels extends React . Component < ChannelsProps > { componentDidMount ( ) { } render ( ) { const { channels } = this . props . channelsState ; return ( < section className = "section fill" > < h3 > State Channels < /h3> < div className = "channel-trees" > < ChannelTree > { Object . values ( channels ) . map ( ( channel , index ) => ( < ChannelNode key = { `hub${ index }` } type = { channel . type } name = { channel . name } ethAddress = { channel . ethAddress } / > ) ) } < /ChannelTree> { } < /div> < button className = "btn btn-secondary button-discover-apps" > Discover State Channel apps < /button> < /section>); } } export default connect ( ( state ) => ( { channelsState : state . ChannelsState } ) , ( dispatch ) => ( { getAllChannels : ( ) => dispatch ( getAllChannels ( ) ) } ) ) ( Channels ) ;