feat: Display noise level in red if currently triggering (#636)

* feat: Display noise level in red if currently triggering * ci: Format code * Update condition --------- Co-authored-by: Seam Bot <[email protected]>
seamapi · Jun 27, 2024 · a03f115 · a03f115
1 parent 36efbdf
commit a03f115
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 8 deletions.
diff --git a/.storybook/seed-fake.js b/.storybook/seed-fake.js
@@ -485,10 +485,11 @@ export const seedFake = (db) => {
       noiseaware_metadata: {
         device_model: 'indoor',
         noise_level_nrs: 1,
-        noise_level_decibel: 42,
+        noise_level_decibel: 80,
         device_name: 'Living room',
         device_id: 'noiseaware_123',
       },
+      currently_triggering_noise_threshold_ids: [],
     },
     errors: [],
   })

diff --git a/assets/icons/noise-levels-red.svg b/assets/icons/noise-levels-red.svg
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -132,7 +132,7 @@
     "luxon": "^3.3.0",
     "queue": "^7.0.0",
     "react-hook-form": "^7.46.1",
-    "seamapi": "^8.22.1",
+    "seamapi": "^8.24.0",
     "uuid": "^9.0.0",
     "zoned-time": "^1.1.2"
   },

diff --git a/src/lib/icons/NoiseLevelsRed.tsx b/src/lib/icons/NoiseLevelsRed.tsx
diff --git a/src/lib/ui/device/NoiseLevelStatus.tsx b/src/lib/ui/device/NoiseLevelStatus.tsx
@@ -1,6 +1,8 @@
+import classNames from 'classnames'
 import type { NoiseSensorDevice } from 'seamapi'
 
 import { NoiseLevelsIcon } from 'lib/icons/NoiseLevels.js'
+import { NoiseLevelsRedIcon } from 'lib/icons/NoiseLevelsRed.js'
 
 interface NoiseLevelStatusProps {
   device: NoiseSensorDevice
@@ -9,13 +11,22 @@ interface NoiseLevelStatusProps {
 export function NoiseLevelStatus({
   device,
 }: NoiseLevelStatusProps): JSX.Element {
+  const isActivated =
+    (device?.properties?.currently_triggering_noise_threshold_ids ?? [])
+      ?.length > 0
+
   return (
     <>
       <span className='seam-label'>{t.noiseLevel}:</span>
 
       <div className='seam-device-status'>
-        <NoiseLevelsIcon />
-        <span className='seam-text'>{getNoiseLevel(device)}</span>
+        {isActivated ? <NoiseLevelsRedIcon /> : <NoiseLevelsIcon />}
+        <span
+          className={classNames('seam-text', isActivated && 'seam-text-danger')}
+        >
+          {getNoiseLevel(device)}
+          {isActivated && ` (${t.noisy})`}
+        </span>
       </div>
     </>
   )
@@ -55,4 +66,5 @@ const t = {
   unknown: 'Unknown',
   decibel: 'dB',
   noiseAwareDefault: '0-40 dB',
+  noisy: 'noisy',
 }