import React, { Component } from 'react'; import { Button, Header, Modal, Form, Input, Icon, Responsive, Image, Confirm, } from 'semantic-ui-react'; import { connect } from 'react-redux'; import SelectIcons from './SelectIcons'; import { RemoteService } from '../remote'; import { appActions } from '../storeActions'; const NO_IMAGE = 'https://react.semantic-ui.com/images/wireframe/image.png'; class RoomModal extends Component { constructor(props) { super(props); this.state = this.initialState; this.fileInputRef = React.createRef(); this.addRoomModal = this.addRoomModal.bind(this); this.updateIcon = this.updateIcon.bind(this); this.unsetImage = this.unsetImage.bind(this); } get initialState() { return { selectedIcon: this.type === 'new' ? 'home' : this.props.room.icon, name: this.type === 'new' ? 'New Room' : this.props.room.name, img: this.type === 'new' ? null : this.props.room.image, openModal: false, sure: false, }; } unsetImage = (e) => { e.preventDefault(); this.setState({ ...this.state, img: '' }); }; setInitialState() { this.setState(this.initialState); } get type() { return !this.props.id ? 'new' : 'modify'; } addRoomModal = (e) => { const data = { icon: this.state.selectedIcon, name: this.state.name, image: this.state.img, }; this.props .saveRoom(data, null) .then(() => { this.setInitialState(); this.closeModal(); }) .catch((err) => console.error('error in creating room', err)); }; modifyRoomModal = (e) => { const data = { icon: this.state.selectedIcon, name: this.state.name, image: this.state.img, }; console.log('data', data); this.props .saveRoom(data, this.props.id) .then(() => { this.setInitialState(); this.closeModal(); }) .catch((err) => console.error('error in updating room', err)); }; deleteRoom = (e) => { this.props .deleteRoom(this.props.id) .then(() => this.closeModal()) .catch((err) => console.error('error in deleting room', err)); }; setSureTrue = () => { this.setState({ sure: true }); }; setSureFalse = () => { this.setState({ sure: false }); }; changeSomething = (event) => { const nam = event.target.name; const val = event.target.value; this.setState({ [nam]: val }); }; closeModal = (e) => { this.setState({ openModal: false }); }; openModal = (e) => { this.setState({ openModal: true }); }; updateIcon(e) { this.setState({ selectedIcon: e }); } getBase64(file, callback) { const reader = new FileReader(); reader.readAsDataURL(file.target.files[0]); reader.onload = () => { this.setState(Object.assign(this.state, { img: reader.result })); }; reader.onerror = console.error; } render() { const spaceDiv = { background: '#f4f4f4', padding: '10px 10px', margin: '10px 0px', }; return (
Insert an image of the room:
Select an icon: