feat: Add NoiseSensorDeviceDetails (#628)

Author: xplato

.storybook/seed-fake.js

@@ -468,6 +468,42 @@ export const seedFake = (db) => {
     errors: [],
   })
 
+  const device7 = db.addDevice({
+    workspace_id: ws2.workspace_id,
+    connected_account_id: ca.connected_account_id,
+    device_type: 'noiseaware_activity_zone',
+    created_at: '2023-05-15T15:08:53.000',
+    name: 'Living Room',
+    properties: {
+      online: true,
+      model: {
+        manufacturer_display_name: 'NoiseAware',
+        display_name: 'Indoor Sensor',
+      },
+    },
+    errors: [],
+  })
+
+  db.addNoiseThreshold({
+    device_id: device7.device_id,
+    workspace_id: ws2.workspace_id,
+    created_at: '2023-05-17T00:16:12.000',
+    noise_threshold_decibels: 70,
+    starts_daily_at: '22:00:00[America/Los_Angeles]',
+    ends_daily_at: '06:00:00[America/Los_Angeles]',
+    name: 'Quiet Hours',
+  })
+
+  db.addNoiseThreshold({
+    device_id: device7.device_id,
+    workspace_id: ws2.workspace_id,
+    created_at: '2023-05-17T00:16:12.000',
+    noise_threshold_decibels: 75,
+    starts_daily_at: '06:00:00[America/Los_Angeles]',
+    ends_daily_at: '22:00:00[America/Los_Angeles]',
+    name: 'Active Hours',
+  })
+
   // add climate setting schedules
   db.addClimateSettingSchedule({
     device_id: device5.device_id,
@@ -532,5 +568,6 @@ export const seedFake = (db) => {
     device4,
     device5,
     device6,
+    device7,
   })
 }

assets/icons/noise-levels.svg

@@ -133,7 +133,8 @@
     "queue": "^7.0.0",
     "react-hook-form": "^7.46.1",
     "seamapi": "^8.22.0",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "zoned-time": "^1.1.2"
   },
   "devDependencies": {
     "@emotion/styled": "^11.10.6",

package-lock.json

@@ -23,6 +23,11 @@ export const formatTimeZone = (timeZone: string): string => {
   return `${timeZone.replaceAll('_', ' ')} (${offset})`
 }
 
+export const formatTime = (time: string): string => {
+  const dateTime = DateTime.fromISO(time)
+  return dateTime.isValid ? dateTime.toLocaleString(DateTime.TIME_SIMPLE) : ''
+}
+
 export const serializeDateTimePickerValue = (
   dateTime: DateTime,
   timeZone: string

package.json

@@ -82,3 +82,7 @@ export const DeviceOffline: Story = {
 export const ThermostatDevice: Story = {
   render: (props) => <DeviceDetails {...props} deviceId='device5' />,
 }
+
+export const NoiseSensorDevice: Story = {
+  render: (props) => <DeviceDetails {...props} deviceId='device7' />,
+}

src/lib/dates.ts

@@ -1,10 +1,11 @@
-import { isLockDevice, isThermostatDevice } from 'seamapi'
+import { isLockDevice, isNoiseSensorDevice, isThermostatDevice } from 'seamapi'
 
 import {
   type CommonProps,
   withRequiredCommonProps,
 } from 'lib/seam/components/common-props.js'
 import { LockDeviceDetails } from 'lib/seam/components/DeviceDetails/LockDeviceDetails.js'
+import { NoiseSensorDeviceDetails } from 'lib/seam/components/DeviceDetails/NoiseSensorDeviceDetails.js'
 import { ThermostatDeviceDetails } from 'lib/seam/components/DeviceDetails/ThermostatDeviceDetails.js'
 import { useDevice } from 'lib/seam/devices/use-device.js'
 import { useComponentTelemetry } from 'lib/telemetry/index.js'
@@ -67,5 +68,9 @@ export function DeviceDetails({
     return <ThermostatDeviceDetails device={device} {...props} />
   }
 
+  if (isNoiseSensorDevice(device)) {
+    return <NoiseSensorDeviceDetails device={device} {...props} />
+  }
+
   return null
 }

src/lib/icons/NoiseLevels.tsx

@@ -0,0 +1,58 @@
+import type { NoiseSensorDevice } from 'seamapi'
+
+import type { NestedSpecificDeviceDetailsProps } from 'lib/seam/components/DeviceDetails/DeviceDetails.js'
+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 { OnlineStatus } from 'lib/ui/device/OnlineStatus.js'
+import { NoiseThresholdsList } from 'lib/ui/noise-sensor/NoiseThresholdsList.js'
+
+interface NoiseSensorDeviceDetailsProps
+  extends NestedSpecificDeviceDetailsProps {
+  device: NoiseSensorDevice
+}
+
+export function NoiseSensorDeviceDetails({
+  device,
+  disableConnectedAccountInformation,
+  disableResourceIds,
+}: NoiseSensorDeviceDetailsProps): JSX.Element | null {
+  return (
+    <div className='seam-device-details'>
+      <div className='seam-body'>
+        <div className='seam-summary'>
+          <div className='seam-content'>
+            <div className='seam-image'>
+              <DeviceImage device={device} />
+            </div>
+            <div className='seam-info'>
+              <span className='seam-label'>{t.noiseSensor}</span>
+              <h4 className='seam-device-name'>{device.properties.name}</h4>
+              <div className='seam-properties'>
+                <span className='seam-label'>{t.status}:</span>{' '}
+                <OnlineStatus device={device} />
+                <DeviceModel device={device} />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <NoiseThresholdsList device={device} />
+
+        <DeviceInfo
+          device={device}
+          disableConnectedAccountInformation={
+            disableConnectedAccountInformation
+          }
+          disableResourceIds={disableResourceIds}
+        />
+      </div>
+    </div>
+  )
+}
+
+const t = {
+  noiseSensor: 'Noise Sensor',
+  status: 'Status',
+  noiseLevel: 'Noise level',
+}

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

@@ -0,0 +1,46 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import type {
+  NoiseThresholds,
+  NoiseThresholdsListRequest,
+  NoiseThresholdsListResponse,
+  SeamError,
+} from 'seamapi'
+
+import { useSeamClient } from 'lib/seam/use-seam-client.js'
+import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
+
+export type UseNoiseThresholdsParams = NoiseThresholdsListRequest
+export type UseNoiseThresholdsData = NoiseThresholds[]
+
+export function useNoiseThresholds(
+  params: UseNoiseThresholdsParams
+): UseSeamQueryResult<'noiseThresholds', UseNoiseThresholdsData> {
+  const { client } = useSeamClient()
+  const queryClient = useQueryClient()
+
+  const { data, ...rest } = useQuery<
+    NoiseThresholdsListResponse['noise_thresholds'],
+    SeamError
+  >({
+    enabled: client != null,
+    queryKey: ['noise_thresholds', 'list', params],
+    queryFn: async () => {
+      if (client == null) return []
+      return await client.noiseThresholds.list(params)
+    },
+    onSuccess: (noiseThresholds) => {
+      for (const noiseThreshold of noiseThresholds) {
+        queryClient.setQueryData(
+          [
+            'noise_thresholds',
+            'get',
+            { noise_threshold_id: noiseThreshold.noise_threshold_id },
+          ],
+          noiseThreshold
+        )
+      }
+    },
+  })
+
+  return { ...rest, noiseThresholds: data }
+}