// vim: set ts=2 sw=2 et tw=80:
import React, { Component } from "react";
import { Grid } from "semantic-ui-react";
import { panelStyle } from "./devices/styleComponents";
import Device from "./devices/Device";
import NewDevice from "./devices/NewDevice";
import { connect } from "react-redux";
import { RemoteService } from "../../remote";
class DevicePanel extends Component {
constructor(props) {
super(props);
this.getDevices();
}
getDevices() {
this.props
.fetchDevices()
.catch((err) => console.error(`error fetching devices:`, err));
}
render() {
return (
{this.props.devices.map((e, i) => {
return (
);
})}
{!this.props.isActiveRoomHome ? (
) : null}
);
}
}
const mapStateToProps = (state, _) => ({
get devices() {
if (state.active.activeRoom === -1) {
return Object.values(state.devices);
} else {
console.log(state.active.activeRoom);
const deviceArray = [...state.rooms[state.active.activeRoom].devices].sort();
console.log(deviceArray);
return deviceArray.map((id) => state.devices[id]);
}
},
get isActiveRoomHome() {
return state.active.activeRoom === -1;
},
activeRoom: state.active.activeRoom,
});
const DevicePanelContainer = connect(
mapStateToProps,
RemoteService
)(DevicePanel);
export default DevicePanelContainer;