feat: Add noise level to NoiseSensorDeviceDetails (#632)

* feat: Add noise level to Noise Sensor card

* ci: Format code

* Bump `seamapi`

* Add `noiseaware_metadata` to seed

* Add return type

* Add return type (2)

* ci: Format code

* Satisfy linter boolean expression

---------

Co-authored-by: Seam Bot <[email protected]>

.storybook/seed-fake.js

@@ -482,6 +482,13 @@ export const seedFake = (db) => {
       },
       image_url:
         'https://connect.getseam.com/assets/images/devices/noiseaware_indoor_sensor_front.png',
+      noiseaware_metadata: {
+        device_model: 'indoor',
+        noise_level_nrs: 1,
+        noise_level_decibel: 42,
+        device_name: 'Living room',
+        device_id: 'noiseaware_123',
+      },
     },
     errors: [],
   })

package.json

@@ -132,7 +132,7 @@
     "luxon": "^3.3.0",
     "queue": "^7.0.0",
     "react-hook-form": "^7.46.1",
-    "seamapi": "^8.22.0",
+    "seamapi": "^8.22.1",
     "uuid": "^9.0.0",
     "zoned-time": "^1.1.2"
   },

src/lib/seam/components/DeviceDetails/NoiseSensorDeviceDetails.tsx

@@ -5,6 +5,7 @@ import type { NestedSpecificDeviceDetailsProps } from 'lib/seam/components/Devic
 import { DeviceInfo } from 'lib/seam/components/DeviceDetails/DeviceInfo.js'
 import { DeviceModel } from 'lib/seam/components/DeviceDetails/DeviceModel.js'
 import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
+import { NoiseLevelStatus } from 'lib/ui/device/NoiseLevelStatus.js'
 import { OnlineStatus } from 'lib/ui/device/OnlineStatus.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import { NoiseThresholdsList } from 'lib/ui/noise-sensor/NoiseThresholdsList.js'
@@ -37,6 +38,7 @@ export function NoiseSensorDeviceDetails({
               <div className='seam-properties'>
                 <span className='seam-label'>{t.status}:</span>{' '}
                 <OnlineStatus device={device} />
+                <NoiseLevelStatus device={device} />
                 <DeviceModel device={device} />
               </div>
             </div>

src/lib/ui/device/NoiseLevelStatus.tsx

@@ -0,0 +1,58 @@
+import type { NoiseSensorDevice } from 'seamapi'
+
+import { NoiseLevelsIcon } from 'lib/icons/NoiseLevels.js'
+
+interface NoiseLevelStatusProps {
+  device: NoiseSensorDevice
+}
+
+export function NoiseLevelStatus({
+  device,
+}: NoiseLevelStatusProps): JSX.Element {
+  return (
+    <>
+      <span className='seam-label'>{t.noiseLevel}:</span>
+
+      <div className='seam-device-status'>
+        <NoiseLevelsIcon />
+        <span className='seam-text'>{getNoiseLevel(device)}</span>
+      </div>
+    </>
+  )
+}
+
+function toNoiseString(value: number | string | undefined): string {
+  if (typeof value === 'string' || typeof value === 'number') {
+    return `${Number(value).toFixed(0)} ${t.decibel}`
+  }
+  return t.unknown
+}
+
+function getNoiseLevel(device: NoiseSensorDevice): string {
+  const isMinut = device.device_type === 'minut_sensor'
+  const isNoiseAware = device.device_type === 'noiseaware_activity_zone'
+
+  if (isMinut) {
+    return toNoiseString(
+      device?.properties?.minut_metadata?.latest_sensor_values?.sound?.value
+    )
+  }
+
+  if (isNoiseAware) {
+    if (device?.properties?.noiseaware_metadata?.noise_level_nrs === -1) {
+      return t.noiseAwareDefault
+    }
+    return toNoiseString(
+      device?.properties?.noiseaware_metadata?.noise_level_decibel
+    )
+  }
+
+  return toNoiseString(undefined)
+}
+
+const t = {
+  noiseLevel: 'Noise level',
+  unknown: 'Unknown',
+  decibel: 'dB',
+  noiseAwareDefault: '0-40 dB',
+}