fix(DeviceDetails): Non-functional errorFilter and warningFilter props

Author: razor-x

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

@@ -15,8 +15,16 @@ export interface DeviceDetailsProps extends CommonProps {
 
 export const NestedDeviceDetails = withRequiredCommonProps(DeviceDetails)
 
+export interface NestedSpecificDeviceDetailsProps
+  extends Required<Omit<CommonProps, 'onBack' | 'className'>> {
+  onBack: (() => void) | undefined
+  className: string | undefined
+}
+
 export function DeviceDetails({
   deviceId,
+  errorFilter = () => true,
+  warningFilter = () => true,
   disableLockUnlock = false,
   disableDeleteAccessCode = false,
   disableResourceIds = false,
@@ -37,7 +45,9 @@ export function DeviceDetails({
     return null
   }
 
-  const props: Omit<DeviceDetailsProps, 'deviceId'> = {
+  const props: NestedSpecificDeviceDetailsProps = {
+    errorFilter,
+    warningFilter,
     disableLockUnlock,
     disableDeleteAccessCode,
     disableResourceIds,

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

@@ -4,7 +4,7 @@ import type { LockDevice } from 'seamapi'
 import { ChevronRightIcon } from 'lib/icons/ChevronRight.js'
 import { useAccessCodes } from 'lib/seam/access-codes/use-access-codes.js'
 import { NestedAccessCodeTable } from 'lib/seam/components/AccessCodeTable/AccessCodeTable.js'
-import type { CommonProps } from 'lib/seam/components/common-props.js'
+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 { useToggleLock } from 'lib/seam/devices/use-toggle-lock.js'
@@ -17,28 +17,24 @@ import { OnlineStatus } from 'lib/ui/device/OnlineStatus.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import { useToggle } from 'lib/ui/use-toggle.js'
 
-interface LockDeviceDetailsProps extends CommonProps {
+interface LockDeviceDetailsProps extends NestedSpecificDeviceDetailsProps {
   device: LockDevice
 }
 
-export function LockDeviceDetails(
-  props: LockDeviceDetailsProps
-): JSX.Element | null {
-  const {
-    device,
-    errorFilter = () => true,
-    warningFilter = () => true,
-    disableLockUnlock,
-    disableCreateAccessCode,
-    disableEditAccessCode,
-    disableDeleteAccessCode,
-    disableResourceIds,
-    disableConnectedAccountInformation,
-    disableClimateSettingSchedules,
-    onBack,
-    className,
-  } = props
-
+export function LockDeviceDetails({
+  device,
+  errorFilter,
+  warningFilter,
+  disableLockUnlock,
+  disableCreateAccessCode,
+  disableEditAccessCode,
+  disableDeleteAccessCode,
+  disableResourceIds,
+  disableConnectedAccountInformation,
+  disableClimateSettingSchedules,
+  onBack,
+  className,
+}: LockDeviceDetailsProps): JSX.Element | null {
   const [accessCodesOpen, toggleAccessCodesOpen] = useToggle()
   const toggleLock = useToggleLock(device)
   const { accessCodes } = useAccessCodes({
@@ -132,7 +128,7 @@ export function LockDeviceDetails(
               <span className='seam-value'>{lockStatus}</span>
             </div>
             <div className='seam-right'>
-              {disableLockUnlock !== true &&
+              {!disableLockUnlock &&
                 device.capabilities_supported.includes('lock') && (
                   <Button
                     size='small'

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

@@ -6,7 +6,7 @@ import { debounce } from 'lib/debounce.js'
 import { CheckBlackIcon } from 'lib/icons/CheckBlack.js'
 import { ChevronWideIcon } from 'lib/icons/ChevronWide.js'
 import { NestedClimateSettingScheduleTable } from 'lib/seam/components/ClimateSettingScheduleTable/ClimateSettingScheduleTable.js'
-import type { CommonProps } from 'lib/seam/components/common-props.js'
+import type { NestedSpecificDeviceDetailsProps } from 'lib/seam/components/DeviceDetails/DeviceDetails.js'
 import { DeviceInfo } from 'lib/seam/components/DeviceDetails/DeviceInfo.js'
 import { useClimateSettingSchedules } from 'lib/seam/thermostats/climate-setting-schedules/use-climate-setting-schedules.js'
 import { useCoolThermostat } from 'lib/seam/thermostats/use-cool-thermostat.js'
@@ -29,23 +29,24 @@ import { FanModeMenu } from 'lib/ui/thermostat/FanModeMenu.js'
 import { TemperatureControlGroup } from 'lib/ui/thermostat/TemperatureControlGroup.js'
 import { ThermostatCard } from 'lib/ui/thermostat/ThermostatCard.js'
 
-interface ThermostatDeviceDetailsProps extends CommonProps {
+interface ThermostatDeviceDetailsProps
+  extends NestedSpecificDeviceDetailsProps {
   device: ThermostatDevice
 }
 
 export function ThermostatDeviceDetails({
   device,
-  onBack,
-  className,
-  errorFilter = () => true,
-  warningFilter = () => true,
+  errorFilter,
+  warningFilter,
   disableLockUnlock,
   disableCreateAccessCode,
   disableEditAccessCode,
   disableDeleteAccessCode,
-  disableResourceIds = false,
-  disableConnectedAccountInformation = false,
-  disableClimateSettingSchedules = false,
+  disableResourceIds,
+  disableConnectedAccountInformation,
+  disableClimateSettingSchedules,
+  onBack,
+  className,
 }: ThermostatDeviceDetailsProps): JSX.Element | null {
   const [climateSettingsOpen, setClimateSettingsOpen] = useState(false)