1  import PropTypes from "prop-types";
  2  import React, {Component} from 'react';
  3  import {
  4    Button,
  5    Card,
  6    CardBody,
  7    CardHeader,
  8    Col,
  9    FormGroup,
 10    Input,
 11    Row,
 12    Label,
 13    ListGroup,
 14    ListGroupItem
 15  } from 'reactstrap';
 16  
 17  class Communication extends Component {
 18    constructor(props) {
 19      super(props);
 20  
 21      this.state = {
 22        listenTo: '',
 23        channel: '',
 24        message: '',
 25        messageList: []
 26      };
 27    }
 28  
 29    handleChange(e, name) {
 30      this.setState({
 31        [name]: e.target.value
 32      });
 33    }
 34  
 35    sendMessage(e) {
 36      e.preventDefault();
 37      this.props.sendMessage(this.state.channel, this.state.message);
 38    }
 39  
 40    listenToChannel(e) {
 41      e.preventDefault();
 42      this.props.listenToMessages(this.state.listenTo);
 43    }
 44  
 45    render() {
 46      return (
 47        <Row className="justify-content-md-center">
 48          <Col xs="12" sm="9" lg="9">
 49            <Card>
 50              <CardHeader>
 51                <strong>Listen to channel</strong>
 52              </CardHeader>
 53              <CardBody>
 54                <FormGroup>
 55                  <Label htmlFor="listenTo">Whisper channel</Label>
 56                  <Input id="listenTo" placeholder="Channel" value={this.state.listenTo} onChange={e => this.handleChange(e, 'listenTo')} />
 57                </FormGroup>
 58                <Button color="primary" onClick={(e) => this.listenToChannel(e)}>Start Listening</Button>
 59  
 60                {this.props.subscriptions && this.props.subscriptions.length > 0 &&
 61                <React.Fragment>
 62                  <h4>Subscribed channels:</h4>
 63                  <ListGroup>
 64                    {this.props.subscriptions.map((item, i) => <ListGroupItem key={i}>{item}</ListGroupItem>)}
 65                  </ListGroup>
 66                </React.Fragment>
 67                }
 68  
 69                {this.props.channels && Boolean(Object.keys(this.props.channels).length) &&
 70                <React.Fragment>
 71                  <h4>Messages received:</h4>
 72  
 73                  <Row>
 74                    {Object.keys(this.props.channels).map((channelName, i) => {
 75                      return (<Col md={4} key={`message-${i}`}>
 76                        <Card>
 77                          <CardHeader>
 78                            <strong>{channelName}</strong>
 79                          </CardHeader>
 80                          <CardBody>
 81                            {this.props.channels[channelName].map((data, f) => {
 82                              return <p key={`message-${i}-${f}`}>{data.message}</p>;
 83                            })}
 84                          </CardBody>
 85                        </Card>
 86                      </Col>);
 87                    })}
 88                  </Row>
 89                </React.Fragment>
 90                }
 91              </CardBody>
 92            </Card>
 93            <Card>
 94              <CardHeader>
 95                <strong>Send message</strong>
 96              </CardHeader>
 97              <CardBody>
 98                <FormGroup label="Whisper channel">
 99                  <Label htmlFor="sendChannel">Whisper channel</Label>
100                  <Input value={this.state.channel}
101                        id="sendChannel"
102                        placeholder="Channel"
103                        onChange={e => this.handleChange(e, 'channel')}/>
104                </FormGroup>
105                <FormGroup label="Message">
106                  <Label htmlFor="message">Message</Label>
107                  <Input value={this.state.message}
108                        placeholder="Message"
109                        id="message"
110                        onChange={e => this.handleChange(e, 'message')}/>
111                </FormGroup>
112                <Button color="primary" onClick={(e) => this.sendMessage(e)}>Send Message</Button>
113  
114              </CardBody>
115            </Card>
116          </Col>
117        </Row>
118      );
119    }
120  }
121  
122  Communication.propTypes = {
123    sendMessage: PropTypes.func,
124    listenToMessages: PropTypes.func,
125    subscriptions: PropTypes.array,
126    channels: PropTypes.object
127  };
128  
129  export default Communication;
130