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

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

export default class ModalWindow extends Component {

  constructor(props) {
    super(props);
    this.state = {
      selectedIcon: 'home',
      name: "",
      img: "",
      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,
      "images" : this.state.img
    }

    console.log(this.props, data);
    this.props.addRoom(data);
    this.closeModal();
  }

  deleteRoom = (e) => {
    console.log(e);
  }

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

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

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

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

  render(){

    const spaceDiv = {
      background: '#f4f4f4',
      padding: '10px 10px',
      margin: '10px 0px'
    }


      return (
        <div>
        <Button icon labelPosition='left' inverted onClick={this.openModal}>
          <Icon name='plus' size='small'/>
          ADD ROOM
        </Button>
        <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}/>
            </Form.Field>
            <p>Insert an image of the room:</p>
            <Form.Field>
              <Input label='Room image' type='file' name="img" onChange={this.changeSomething}/>
            </Form.Field>
          </Form>

          <div style={spaceDiv}>
          <p>Select an icon:</p>
          <SelectIcons updateIcon={this.updateIcon} currentIcon={this.state.selectedIcon}/>
          </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.addRoomModal}>
            <Icon name='checkmark' /> {this.props.type == "new" ? "Add room" : "Save changes" }
          </Button>
        </Modal.Actions>
          </Modal>
        </div>
    )
  }
}