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

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

const NO_IMAGE = "https://react.semantic-ui.com/images/wireframe/image.png";

export default class ModalWindow extends Component {
  constructor(props) {
    super(props);

    console.table(this.props);

    this.state = {
      id: "",
      selectedIcon: "",
      name: this.props.type === "new" ? "" : this.props.idRoom.name,
      img: this.props.type === "new" ? null : this.props.idRoom.image,
      openModal: false,
    };

    this.fileInputRef = React.createRef();

    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 });
  };

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

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

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

  getBase64(file, callback) {
    let reader = new FileReader();
    reader.readAsDataURL(file.target.files[0]);
    reader.onload = () => {
      this.state.img = reader.result;
      this.setState(this.state);
    };
    reader.onerror = console.error;
  }

  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>
          ) : (
            <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>
                <Image
                  src={this.state.img == null ? NO_IMAGE : this.state.img}
                  size="small"
                  onClick={() => this.fileInputRef.current.click()}
                />

                <input
                  ref={this.fileInputRef}
                  hidden
                  label="Room image"
                  type="file"
                  name="img"
                  accept="image/png, image/jpeg"
                  onChange={this.getBase64.bind(this)}
                />
              </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>
          </Modal.Actions>
        </Modal>
      </div>
    );
  }
}