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

import React, { Component } from "react";
import {
  Button,
  Header,
  Modal,
  Form,
  Input,
  Icon,
  Responsive,
} from "semantic-ui-react";
import SelectIcons from "./SelectIcons";

export default class ModalWindow extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: "",
      selectedIcon: "",
      name: this.props.type === 'new' ? '' : this.props.idRoom.name,
      img: this.props.type === 'new' ? '' : this.props.idRoom.images,
      openModal: false
    }

    this.addRoomModal = this.addRoomModal.bind(this);
    this.updateIcon = this.updateIcon.bind(this);
  }

  addRoomModal = (e) => {
    let data = {
      icon: this.state.selectedIcon,
      name: this.state.name,
      image: this.state.img,
    };
    this.props.addRoom(data);
    this.closeModal();
  };

  modifyRoomModal = (e) => {
    let data = {
      icon:
        this.state.selectedIcon === ""
          ? this.props.idRoom.icon
          : this.state.selectedIcon,
      name: this.state.name === "" ? this.props.idRoom.name : this.state.name,
      image: this.state.img,
    };
    this.props.updateRoom(data);
    this.closeModal();
  };

  deleteRoom = (e) => {
    this.props.deleteRoom();
    this.closeModal();
  };

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

   let nam = event.target.name;
   let val = event.target.value;
   this.setState({[nam]: val});
	  console.log(this.state);
   }

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

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

  updateIcon(e) {
    this.setState({ selectedIcon: e });
  }

  render() {
    const spaceDiv = {
      background: "#f4f4f4",
      padding: "10px 10px",
      margin: "10px 0px",
    };

    return (
      <div>
        <Responsive minWidth={768}>
          {this.props.type === "new" ? (
            <Button icon labelPosition="left" inverted onClick={this.openModal}>
              <Icon name="plus" size="small" />
              ADD ROOM
            </Button>
            :
              <Icon name='pencil' size='small' onClick={this.openModal} />
          }
          </Responsive>
          <Responsive maxWidth={768} >
            {
              this.props.type === "new" ?
                <Button icon fluid labelPosition='left' onClick={this.openModal}>
                  <Icon name='plus' size='small'/>
                  ADD ROOM
                </Button>
              :
                <Button icon fluid labelPosition='left' onClick={this.openModal}>
                  <Icon name='pencil' size='small'/>
                  EDIT ROOM
                </Button>
            }
          </Responsive>

        <Modal
        onClose={this.closeModal}
        open={this.state.openModal}>
        <Header>{this.props.type === "new" ? "Add new room" : "Modify room" }</Header>
        <Modal.Content>
          <Form>
          <p>Insert the name of the room:</p>
            <Form.Field>
              <Input label='Room name' placeholder='Room Name' name="name" type='text' onChange={this.changeSomething}
              value={this.state.name}/>
            </Form.Field>
            <p>Insert an image of the room:</p>
            <Form.Field>
              <Input label='Room image' type='file' name="img" onChange={this.changeSomething}
              value={this.state.img}/>
            </Form.Field>
          </Form>

          <div style={spaceDiv}>
          <p>Select an icon:</p>
          <SelectIcons updateIcon={this.updateIcon} currentIcon={this.props.type === "new" ? "home" : this.props.idRoom.icon }/>
          </div>

          {this.props.type === "modify" ?
          <Button icon labelPosition='left' inverted color='red' onClick={this.deleteRoom}>
            <Icon name='trash alternate' />
            Delete room
          </Button> : null }

        </Modal.Content>
        <Modal.Actions>
          <Button color='red' onClick={this.closeModal}>
            <Icon name='remove' /> {this.props.type === "new" ? "Cancel" : "Discard changes" }
          </Button>


          <Button color='green' onClick={this.props.type === "new" ? this.addRoomModal : this.modifyRoomModal}>
            <Icon name='checkmark' /> {this.props.type === "new" ? "Add room" : "Save changes"}
          </Button>

            <Button
              color="green"
              onClick={
                this.props.type === "new"
                  ? this.addRoomModal
                  : this.modifyRoomModal
              }
            >
              <Icon name="checkmark" />{" "}
              {this.props.type === "new" ? "Add room" : "Save changes"}
            </Button>
          </Modal.Actions>
        </Modal>
      </div>
    );
  }
}