react/src/lib/seam/components/DeviceDetails/LockDeviceLockButtons.tsx at aaef70e92f7b256173646a4fd6a2d1d0713ff5b8 · seamapi/react · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
import type { LockDevice } from 'lib/seam/locks/lock-device.js'
import { useLock } from 'lib/seam/locks/use-lock-door.js'
import { useToggleLock } from 'lib/seam/locks/use-toggle-lock.js'
import { useUnlock } from 'lib/seam/locks/use-unlock-door.js'
import { Button } from 'lib/ui/Button.js'
import type { SnackbarVariant } from 'lib/ui/Snackbar/Snackbar.js'

interface LockDeviceLockButtonsProps {
  device: LockDevice
  disableLockUnlock: boolean
  setSnackbarVisible: (visible: boolean) => void
  setSnackbarVariant: (variant: SnackbarVariant) => void
}

export function LockDeviceLockButtons({
  device,
  setSnackbarVariant,
  setSnackbarVisible,
  disableLockUnlock,
}: LockDeviceLockButtonsProps): JSX.Element | null {
  const lockStatus = device.properties.locked ? t.locked : t.unlocked
  const toggleLockLabel = device.properties.locked ? t.unlock : t.lock

  const toggleLock = useToggleLock({
    onSuccess: () => {
      setSnackbarVisible(true)
      setSnackbarVariant('success')
    },
    onError: () => {
      setSnackbarVisible(true)
      setSnackbarVariant('error')
    },
  })

  const lock = useLock({
    onSuccess: () => {
      setSnackbarVisible(true)
      setSnackbarVariant('success')
    },
    onError: () => {
      setSnackbarVisible(true)
      setSnackbarVariant('error')
    },
  })

  const unlock = useUnlock({
    onSuccess: () => {
      setSnackbarVisible(true)
      setSnackbarVariant('success')
    },
    onError: () => {
      setSnackbarVisible(true)
      setSnackbarVariant('error')
    },
  })

  if (disableLockUnlock) {
    return null
  }

  if (
    device.can_remotely_lock === true &&
    device.can_remotely_unlock === true
  ) {
    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'>
          <Button
            size='small'
            onClick={() => {
              toggleLock.mutate(device)
            }}
          >
            {toggleLockLabel}
          </Button>
        </div>
      </div>
    )
  }

  if (device.can_remotely_lock === true) {
    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'>
          <Button
            size='small'
            onClick={() => {
              lock.mutate(device)
            }}
          >
            {t.lock}
          </Button>
        </div>
      </div>
    )
  }

  if (device.can_remotely_unlock === true) {
    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'>
          <Button
            size='small'
            onClick={() => {
              unlock.mutate(device)
            }}
          >
            {t.unlock}
          </Button>
        </div>
      </div>
    )
  }

  return null
}

const t = {
  unlock: 'Unlock',
  lock: 'Lock',
  locked: 'Locked',
  unlocked: 'Unlocked',
  lockStatus: 'Lock status',
  statusUnknown: 'Unknown',
}