frontend/smart-hut/src/components/HostModal.js

import React, { Component } from "react";
import { Button, Header, Modal, Icon, Responsive } from "semantic-ui-react";
import { connect } from "react-redux";
import { RemoteService } from "../remote";
import { appActions } from "../storeActions";
//import { update } from "immutability-helper";

class HostModal extends Component {
  constructor(props) {
    super(props);
    this.state = this.initialState;

    this.saveGuestSettings = this.saveGuestSettings.bind(this);
  }

  get initialState() {
    return {
      //INITIAL STATE HERE
    };
  }

  setInitialState() {
    this.setState(this.initialState);
  }

  changeSomething = (event) => {
    let nam = event.target.name;
    let val = event.target.value;
    this.setState({ [nam]: val });
  };

  closeModal = (e) => {
    this.setState({ openModal: false });
  };

  openModal = (e) => {
    this.setState({ openModal: true });
  };

  saveGuestSettings() {}

  render() {
    return (
      <React.Fragment>
        <Responsive minWidth={768}>
          <Button icon labelPosition="left" inverted onClick={this.openModal}>
            <Icon name="plus" size="small" />
            Invitation settings
          </Button>
        </Responsive>
        <Responsive maxWidth={768}>
          {this.type === "new" ? (
            <Button icon fluid labelPosition="left" onClick={this.openModal}>
              <Icon name="plus" size="small" />
              Invitation settings
            </Button>
          ) : (
            <Button icon fluid labelPosition="left" onClick={this.openModal}>
              <Icon name="pencil" size="small" />
              EDIT AUTOMATION
            </Button>
          )}
        </Responsive>

        <Modal closeIcon onClose={this.closeModal} open={this.state.openModal}>
          <Header>Select guests</Header>
          <Modal.Content>
            <marquee scrollamount="50">
              <h1>Spaghetti!</h1>
            </marquee>
          </Modal.Content>
          <Modal.Actions>
            <Button color="red" onClick={this.closeModal}>
              <Icon name="remove" /> Discard changes
            </Button>

            <Button color="green" onClick={this.saveGuestSettings}>
              <Icon name="checkmark" /> Save changes
            </Button>
          </Modal.Actions>
        </Modal>
      </React.Fragment>
    );
  }
}

const setActiveHost = (activeHost) => {
  return (dispatch) => dispatch(appActions.setActiveHost(activeHost));
};

const mapStateToProps = (state, ownProps) => ({
  hostss: ownProps.id ? state.hostss[ownProps.id] : null,
});
const HostModalContainer = connect(
  mapStateToProps,
  { ...RemoteService, setActiveHost },
  null,
  { forwardRef: true }
)(HostModal);
export default HostModalContainer;