import React, { Component, useState } from "react";
import { Button, Form, Icon, Header, Modal } from "semantic-ui-react";
import { connect } from "react-redux";
import { RemoteService } from "../../../remote";
const DeleteModal = (props) => (
Delete device
}
closeIcon
>
);
const SettingsForm = (props) => {
const handleInputChange = (e) => {
const { name, value } = e.target;
setValues({ ...values, [name]: value });
};
const [values, setValues] = useState({ name: "" });
return (
props.removeDevice(values)} />
//{" "}
//{" "}
);
};
class DeviceSettingsModal extends Component {
constructor(props) {
super(props);
this.state = {
open: false,
};
this.updateDevice = this.updateDevice.bind(this);
this.deleteDevice = this.deleteDevice.bind(this);
}
closeModal = (e) => {
this.setState({ openModal: false });
};
openModal = (e) => {
this.setState({ openModal: true });
};
updateDevice(values) {
if (values.name.length === 0) return;
this.props
.saveDevice({ ...this.props.device, name: values.name })
.then(() => this.setState({ open: false }))
.catch((err) =>
console.error(
`settings modal for device ${this.props.id} deletion error`,
err
)
);
}
deleteDevice() {
this.props
.deleteDevice(this.props.device)
.then(() => this.setState({ open: false }))
.catch((err) =>
console.error(
`settings modal for device ${this.props.id} deletion error`,
err
)
);
}
render() {
const SettingsModal = () => (
Settings of {this.props.device.name}
);
return ;
}
}
const mapStateToProps = (state, ownProps) => ({
device: state.devices[ownProps.id],
});
const DeviceSettingsModalContainer = connect(
mapStateToProps,
RemoteService,
null,
{ forwardRef: true }
)(DeviceSettingsModal);
export default DeviceSettingsModalContainer;