create separate LockDeviceToggleLockButton

Author: mikewuu

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

@@ -7,11 +7,11 @@ import { NestedAccessCodeTable } from 'lib/seam/components/AccessCodeTable/Acces
 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 { LockDeviceToggleLockButton } from 'lib/seam/components/DeviceDetails/LockDeviceToggleLockButton.js'
 import { deviceErrorFilter, deviceWarningFilter } from 'lib/seam/filters.js'
 import type { LockDevice } from 'lib/seam/locks/lock-device.js'
 import { useToggleLock } from 'lib/seam/locks/use-toggle-lock.js'
 import { Alerts } from 'lib/ui/Alert/Alerts.js'
-import { Button } from 'lib/ui/Button.js'
 import { BatteryStatusIndicator } from 'lib/ui/device/BatteryStatusIndicator.js'
 import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
 import { EditableDeviceName } from 'lib/ui/device/EditableDeviceName.js'
@@ -59,9 +59,6 @@ export function LockDeviceDetails({
     },
   })
 
-  const lockStatus = device.properties.locked ? t.locked : t.unlocked
-  const toggleLockLabel = device.properties.locked ? t.unlock : t.lock
-
   const accessCodeCount = accessCodes?.length
 
   if (accessCodes == null) {
@@ -164,25 +161,13 @@ export function LockDeviceDetails({
 
           <div className='seam-box'>
             {device.properties.online && (
-              <div className='seam-content seam-lock-status'>
-                <div>
-                  <span className='seam-label'>{t.lockStatus}</span>
-                  <span className='seam-value'>{lockStatus}</span>
-                </div>
-                <div className='seam-right'>
-                  {!disableLockUnlock &&
-                    device.capabilities_supported.includes('lock') && (
-                      <Button
-                        size='small'
-                        onClick={() => {
-                          toggleLock.mutate(device)
-                        }}
-                      >
-                        {toggleLockLabel}
-                      </Button>
-                    )}
-                </div>
-              </div>
+              <LockDeviceToggleLockButton
+                onToggle={() => {
+                  toggleLock.mutate(device)
+                }}
+                device={device}
+                disableLockUnlock={disableLockUnlock}
+              />
             )}
 
             <AccessCodeLength
@@ -230,14 +215,9 @@ function AccessCodeLength(props: {
 
 const t = {
   device: 'Device',
-  unlock: 'Unlock',
-  lock: 'Lock',
-  locked: 'Locked',
-  unlocked: 'Unlocked',
   accessCodes: 'access codes',
   codeLength: 'Code length',
   digits: 'digits',
-  lockStatus: 'Lock status',
   status: 'Status',
   power: 'Power',
   successfullyUpdated: 'Lock status has been successfully updated',

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

@@ -0,0 +1,42 @@
+import type { LockDevice } from 'lib/seam/locks/lock-device.js'
+import { Button } from 'lib/ui/Button.js'
+
+interface LockDeviceToggleLockButtonProps {
+  device: LockDevice
+  onToggle: () => void
+  disableLockUnlock: boolean
+}
+
+export function LockDeviceToggleLockButton({
+  device,
+  onToggle,
+  disableLockUnlock,
+}: LockDeviceToggleLockButtonProps): JSX.Element {
+  const lockStatus = device.properties.locked ? t.locked : t.unlocked
+  const toggleLockLabel = device.properties.locked ? t.unlock : t.lock
+
+  return (
+    <div className='seam-content seam-lock-status'>
+      <div>
+        <span className='seam-label'>{t.lockStatus}</span>
+        <span className='seam-value'>{lockStatus}</span>
+      </div>
+      <div className='seam-right'>
+        {!disableLockUnlock &&
+          device.capabilities_supported.includes('lock') && (
+            <Button size='small' onClick={onToggle}>
+              {toggleLockLabel}
+            </Button>
+          )}
+      </div>
+    </div>
+  )
+}
+
+const t = {
+  unlock: 'Unlock',
+  lock: 'Lock',
+  locked: 'Locked',
+  unlocked: 'Unlocked',
+  lockStatus: 'Lock status',
+}