Source

components/compositemeter/index.jsx

  1. import React, { useEffect, useState } from 'react'
  2. import PropTypes from 'prop-types'
  3. import usePrevious from '../../hooks/use-previous';
  4. import CompositeMeterFace from './CompositeMeterFace';
  5. import CompositeMeterIndicatorContainer from './CompositeMeterIndicatorContainer';
  6. import './compositemeter.css'
  7. /**
  8. * This component is a multiple-property sensor which that can provide
  9. * the temperature, power, energy and switch state of any measured device at the same time.
  10. *
  11. * @category Things
  12. *
  13. * @component
  14. *
  15. */
  16. const CompositeMeter = ({energyValue, powerValue, temperatureValue, switchValue}) => {
  17. const [previous, setPrevious] = useState({
  18. energy: -1,
  19. power: -1,
  20. temperature: -40
  21. });
  22. let previousValue = usePrevious(previous);
  23. useEffect(() => {
  24. setPrevious({
  25. energy: energyValue,
  26. power: powerValue,
  27. temperature: temperatureValue
  28. })
  29. }, [energyValue, powerValue, temperatureValue])
  30. if(previousValue === undefined) {
  31. previousValue = {
  32. energy: -1,
  33. power: -1,
  34. temperature: -40
  35. }
  36. }
  37. return (
  38. <div className="compositemeter">
  39. <CompositeMeterFace/>
  40. <CompositeMeterIndicatorContainer
  41. energyValue={energyValue}
  42. previousEnergyValue={previousValue.energy}
  43. powerValue={powerValue}
  44. previousPowerValue={previousValue.power}
  45. temperatureValue={temperatureValue}
  46. previousTemperatureValue={previousValue.temperature}
  47. switchValue={switchValue}/>
  48. </div>
  49. )
  50. }
  51. CompositeMeter.propTypes = {
  52. /**
  53. * The measured energy value Watt-hours
  54. */
  55. energyValue: PropTypes.number.isRequired,
  56. /**
  57. * The measured power value in Watts
  58. */
  59. powerValue: PropTypes.number.isRequired,
  60. /**
  61. * The measured temperature value in °C.
  62. */
  63. temperatureValue: PropTypes.number.isRequired,
  64. /**
  65. * The measured switch state (true or false)
  66. */
  67. switchValue: PropTypes.bool.isRequired
  68. }
  69. export default CompositeMeter