feat: Add Noise Sensors to DeviceTable (#630)

* feat: Add Noise Sensors to `DeviceTable` * ci: Format code * Add `ContentHeader` * ci: Format code * Add `image_url` --------- Co-authored-by: Seam Bot <devops@getseam.com>
seamapi · May 6, 2024 · a426132 · a426132
1 parent df690b1
commit a426132
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 3 deletions.
diff --git a/.storybook/seed-fake.js b/.storybook/seed-fake.js
@@ -480,6 +480,8 @@ export const seedFake = (db) => {
         manufacturer_display_name: 'NoiseAware',
         display_name: 'Indoor Sensor',
       },
+      image_url:
+        'https://connect.getseam.com/assets/images/devices/noiseaware_indoor_sensor_front.png',
     },
     errors: [],
   })

diff --git a/src/lib/seam/components/DeviceDetails/NoiseSensorDeviceDetails.tsx b/src/lib/seam/components/DeviceDetails/NoiseSensorDeviceDetails.tsx
@@ -1,10 +1,12 @@
+import classNames from 'classnames'
 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 { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import { NoiseThresholdsList } from 'lib/ui/noise-sensor/NoiseThresholdsList.js'
 
 interface NoiseSensorDeviceDetailsProps
@@ -16,9 +18,13 @@ export function NoiseSensorDeviceDetails({
   device,
   disableConnectedAccountInformation,
   disableResourceIds,
+  onBack,
+  className,
 }: NoiseSensorDeviceDetailsProps): JSX.Element | null {
   return (
-    <div className='seam-device-details'>
+    <div className={classNames('seam-device-details', className)}>
+      <ContentHeader title={t.noiseSensor} onBack={onBack} />
+
       <div className='seam-body'>
         <div className='seam-summary'>
           <div className='seam-content'>

diff --git a/src/lib/seam/components/DeviceTable/DeviceTable.tsx b/src/lib/seam/components/DeviceTable/DeviceTable.tsx
@@ -1,6 +1,11 @@
 import classNames from 'classnames'
 import { useCallback, useMemo, useState } from 'react'
-import { type CommonDevice, isLockDevice, isThermostatDevice } from 'seamapi'
+import {
+  type CommonDevice,
+  isLockDevice,
+  isNoiseSensorDevice,
+  isThermostatDevice,
+} from 'seamapi'
 
 import { compareByCreatedAtDesc } from 'lib/dates.js'
 import {
@@ -87,7 +92,12 @@ export function DeviceTable({
   const filteredDevices = useMemo(
     () =>
       devices
-        ?.filter((device) => isLockDevice(device) || isThermostatDevice(device))
+        ?.filter(
+          (device) =>
+            isLockDevice(device) ||
+            isThermostatDevice(device) ||
+            isNoiseSensorDevice(device)
+        )
         ?.filter((device) => deviceFilter(device, searchInputValue))
         ?.sort(deviceComparator) ?? [],
     [devices, searchInputValue, deviceFilter, deviceComparator]