/**
* Users can add sensors in their rooms.
* Sensors typically measure physical quantities in a room.
* You must support temperature sensors, humidity sensors, light sensors (which measure luminosity1).
* Sensors have an internal state that cannot be changed by the user.
* For this story, make the sensors return a constant value with some small random error.
*/
/*
OPTIONAL STATE
error: 2.4
±{this.state.error}
errorStyle,
*/
import React, { Component } from 'react';
import { CircularInput, CircularProgress } from 'react-circular-input';
import { Image } from 'semantic-ui-react';
import { connect } from 'react-redux';
import {
container,
sensorText,
style,
valueStyle,
motionSensorInnerCircle,
motionSensorOuterCircle,
nameMotionStyle,
motionSensorIcon,
temperatureSensorColors,
lightSensorColors,
humiditySensorColors,
iconSensorStyle,
} from './SensorStyle';
import { RemoteService } from '../../../remote';
import mapStateToProps from '../../../deviceProps';
class Sensor extends Component {
constructor(props) {
super(props);
this.state = {
value: 0,
motion: false,
};
this.units = '';
this.stateCallback = (e) => {
this.setState(Object.assign(this.state, e));
};
this.colors = temperatureSensorColors;
this.icon = 'temperatureIcon.svg';
this.name = 'Sensor';
}
componentDidUpdate(prevProps) {
if (
this.props.stateOrDevice.kind === 'sensor'
&& this.props.stateOrDevice.value !== prevProps.stateOrDevice.value
) {
this.setState({ value: this.props.stateOrDevice.value });
} else if (
this.props.stateOrDevice.kind === 'motionSensor'
&& this.props.stateOrDevice.detected !== prevProps.stateOrDevice.detected
) {
this.setState({
motion: true,
detected: this.props.stateOrDevice.detected,
});
}
}
componentDidMount() {
if (this.props.stateOrDevice.kind === 'sensor') {
switch (this.props.stateOrDevice.sensor) {
case 'TEMPERATURE':
this.units = 'ÂșC';
this.colors = temperatureSensorColors;
this.icon = 'temperatureIcon.svg';
this.name = 'Temperature Sensor';
break;
case 'HUMIDITY':
this.units = '%';
this.colors = humiditySensorColors;
this.icon = 'humidityIcon.svg';
this.name = 'Humidity Sensor';
break;
case 'LIGHT':
this.units = 'lm';
this.colors = lightSensorColors;
this.icon = 'lightSensorIcon.svg';
this.name = 'Light Sensor';
break;
default:
this.units = '';
}
this.setState({
value: this.props.stateOrDevice.value,
});
} else {
this.setState({
detected: this.props.stateOrDevice.detected,
motion: true,
});
}
}
getIcon = () => {
if (this.state.detected) {
return this.iconOn;
}
return this.iconOff;
};
temperatureColor = (value) => {
let hue = 100;
const min = 16;
const max = 20;
if (value >= min && value < max) {
hue = 100 - ((value - min) * 100) / (max - min);
} else if (value >= max) {
hue = 0;
}
return `hsl(${hue}, 100%, 50%)`;
};
render() {
const MotionSensor = (props) => (
);
return (
{this.state.motion ? (
) : (
<>
{+(`${Math.round(`${this.state.value}e+2`)}e-2`)}
{this.units}
{this.name}
>
)}
);
}
}
const SensorContainer = connect(mapStateToProps, RemoteService)(Sensor);
export default SensorContainer;