From 503a81faadee4f25135287cb42ec358bc3123de0 Mon Sep 17 00:00:00 2001 From: kadiryazici Date: Wed, 29 Jan 2025 12:27:22 +0300 Subject: [PATCH 1/9] feat: Add snackbars for toggling lock status --- .../AccessCodeDetails/AccessCodeDevice.tsx | 62 ++++--- .../DeviceDetails/LockDeviceDetails.tsx | 156 ++++++++++-------- .../seam/locks/use-toggle-lock-snackbar.tsx | 40 +++++ src/lib/seam/locks/use-toggle-lock.ts | 16 +- src/lib/ui/Snackbar/Snackbar.tsx | 2 +- 5 files changed, 177 insertions(+), 99 deletions(-) create mode 100644 src/lib/seam/locks/use-toggle-lock-snackbar.tsx diff --git a/src/lib/seam/components/AccessCodeDetails/AccessCodeDevice.tsx b/src/lib/seam/components/AccessCodeDetails/AccessCodeDevice.tsx index eeb8e9425..76197cef0 100644 --- a/src/lib/seam/components/AccessCodeDetails/AccessCodeDevice.tsx +++ b/src/lib/seam/components/AccessCodeDetails/AccessCodeDevice.tsx @@ -1,6 +1,7 @@ import { useDevice } from 'lib/seam/devices/use-device.js' import { isLockDevice, type LockDevice } from 'lib/seam/locks/lock-device.js' import { useToggleLock } from 'lib/seam/locks/use-toggle-lock.js' +import { useToggleLockSnackbar } from 'lib/seam/locks/use-toggle-lock-snackbar.js' import { Button } from 'lib/ui/Button.js' import { DeviceImage } from 'lib/ui/device/DeviceImage.js' import { TextButton } from 'lib/ui/TextButton.js' @@ -49,35 +50,48 @@ function Content(props: { onSelectDevice: (deviceId: string) => void }): JSX.Element { const { device, disableLockUnlock, onSelectDevice } = props - const toggleLock = useToggleLock() + + const { renderSnackbar, showToggleSnackbar } = useToggleLockSnackbar() + const toggleLock = useToggleLock({ + onSuccess: () => { + showToggleSnackbar('success') + }, + onError: () => { + showToggleSnackbar('error') + }, + }) const toggleLockLabel = device.properties.locked ? t.unlock : t.lock return ( -
-
- -
-
-
{device.properties.name}
- { - onSelectDevice(device.device_id) - }} - > - {t.deviceDetails} - + <> + {renderSnackbar()} + +
+
+ +
+
+
{device.properties.name}
+ { + onSelectDevice(device.device_id) + }} + > + {t.deviceDetails} + +
+ {!disableLockUnlock && device.properties.online && ( + + )}
- {!disableLockUnlock && device.properties.online && ( - - )} -
+ ) } diff --git a/src/lib/seam/components/DeviceDetails/LockDeviceDetails.tsx b/src/lib/seam/components/DeviceDetails/LockDeviceDetails.tsx index 9e19e47d0..f2333d8da 100644 --- a/src/lib/seam/components/DeviceDetails/LockDeviceDetails.tsx +++ b/src/lib/seam/components/DeviceDetails/LockDeviceDetails.tsx @@ -9,6 +9,7 @@ import { DeviceModel } from 'lib/seam/components/DeviceDetails/DeviceModel.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 { useToggleLockSnackbar } from 'lib/seam/locks/use-toggle-lock-snackbar.js' import { Alerts } from 'lib/ui/Alert/Alerts.js' import { Button } from 'lib/ui/Button.js' import { BatteryStatusIndicator } from 'lib/ui/device/BatteryStatusIndicator.js' @@ -38,11 +39,20 @@ export function LockDeviceDetails({ onEditName, }: LockDeviceDetailsProps): JSX.Element | null { const [accessCodesOpen, toggleAccessCodesOpen] = useToggle() - const toggleLock = useToggleLock() const { accessCodes } = useAccessCodes({ device_id: device.device_id, }) + const { renderSnackbar, showToggleSnackbar } = useToggleLockSnackbar() + const toggleLock = useToggleLock({ + onSuccess: () => { + showToggleSnackbar('success') + }, + onError: () => { + showToggleSnackbar('error') + }, + }) + const lockStatus = device.properties.locked ? t.locked : t.unlocked const toggleLockLabel = device.properties.locked ? t.unlock : t.lock @@ -88,87 +98,91 @@ export function LockDeviceDetails({ ] return ( -
- -
-
-
-
- -
-
- {t.device} - -
- {t.status}:{' '} - - {device.properties.online && ( - <> - {t.power}:{' '} - - - )} - + <> + {renderSnackbar()} + +
+ +
+
+
+
+ +
+
+ {t.device} + +
+ {t.status}:{' '} + + {device.properties.online && ( + <> + {t.power}:{' '} + + + )} + +
+
- -
-
-
- - {accessCodeCount} {t.accessCodes} - - +
+
+ + {accessCodeCount} {t.accessCodes} + + +
-
-
- {device.properties.locked && device.properties.online && ( -
-
- {t.lockStatus} - {lockStatus} -
-
- {!disableLockUnlock && - device.capabilities_supported.includes('lock') && ( - - )} +
+ {device.properties.locked && device.properties.online && ( +
+
+ {t.lockStatus} + {lockStatus} +
+
+ {!disableLockUnlock && + device.capabilities_supported.includes('lock') && ( + + )} +
-
- )} + )} - +
+
-
-
+ ) } diff --git a/src/lib/seam/locks/use-toggle-lock-snackbar.tsx b/src/lib/seam/locks/use-toggle-lock-snackbar.tsx new file mode 100644 index 000000000..ee607a9d1 --- /dev/null +++ b/src/lib/seam/locks/use-toggle-lock-snackbar.tsx @@ -0,0 +1,40 @@ +import { useCallback, useState } from 'react' + +import { Snackbar, type SnackbarProps } from 'lib/ui/Snackbar/Snackbar.js' + +export interface UseToggleLockSnackbarContext { + showToggleSnackbar: (type: SnackbarProps['variant']) => void + renderSnackbar: () => JSX.Element +} + +export function useToggleLockSnackbar(): UseToggleLockSnackbarContext { + const [visible, setVisible] = useState(false) + const [variant, setVariant] = useState('success') + + return { + showToggleSnackbar: useCallback((type) => { + setVariant(type) + setVisible(true) + }, []), + renderSnackbar: useCallback(() => { + return ( + { + setVisible(false) + }} + message={ + variant === 'success' ? t.successfullyUpdated : t.failedToUpdate + } + autoDismiss + /> + ) + }, [visible, variant]), + } +} + +const t = { + successfullyUpdated: 'Lock status has been successfully updated', + failedToUpdate: 'Failed to update lock status', +} diff --git a/src/lib/seam/locks/use-toggle-lock.ts b/src/lib/seam/locks/use-toggle-lock.ts index 502c44e7a..8c4a87b15 100644 --- a/src/lib/seam/locks/use-toggle-lock.ts +++ b/src/lib/seam/locks/use-toggle-lock.ts @@ -12,8 +12,6 @@ import { import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js' -export type UseToggleLockParams = never - export type UseToggleLockData = undefined export type UseToggleLockMutationVariables = Pick & { @@ -29,7 +27,14 @@ type MutationError = | SeamActionAttemptFailedError | SeamActionAttemptTimeoutError -export function useToggleLock(): UseMutationResult< +interface UseToggleLockParams { + onError?: () => void + onSuccess?: () => void +} + +export function useToggleLock( + params: UseToggleLockParams = {} +): UseMutationResult< UseToggleLockData, MutationError, UseToggleLockMutationVariables @@ -92,6 +97,8 @@ export function useToggleLock(): UseMutationResult< ) }, onError: async (_error, variables) => { + params.onError?.() + await queryClient.invalidateQueries({ queryKey: ['devices', 'list'], }) @@ -99,5 +106,8 @@ export function useToggleLock(): UseMutationResult< queryKey: ['devices', 'get', { device_id: variables.device_id }], }) }, + onSuccess() { + params.onSuccess?.() + }, }) } diff --git a/src/lib/ui/Snackbar/Snackbar.tsx b/src/lib/ui/Snackbar/Snackbar.tsx index a9f7a339b..6c53dc511 100644 --- a/src/lib/ui/Snackbar/Snackbar.tsx +++ b/src/lib/ui/Snackbar/Snackbar.tsx @@ -7,7 +7,7 @@ import { ExclamationCircleIcon } from 'lib/icons/ExclamationCircle.js' type SnackbarVariant = 'success' | 'error' -interface SnackbarProps { +export interface SnackbarProps { message: string variant: SnackbarVariant visible: boolean From 36a32e4be23d7d09100375e4b5fec2869331a003 Mon Sep 17 00:00:00 2001 From: kadiryazici Date: Wed, 29 Jan 2025 22:54:57 +0300 Subject: [PATCH 2/9] Optimize rendering --- .../AccessCodeDetails/AccessCodeDevice.tsx | 4 +- .../DeviceDetails/LockDeviceDetails.tsx | 4 +- .../seam/locks/use-toggle-lock-snackbar.tsx | 37 ++++++++++--------- 3 files changed, 24 insertions(+), 21 deletions(-) diff --git a/src/lib/seam/components/AccessCodeDetails/AccessCodeDevice.tsx b/src/lib/seam/components/AccessCodeDetails/AccessCodeDevice.tsx index 76197cef0..786149506 100644 --- a/src/lib/seam/components/AccessCodeDetails/AccessCodeDevice.tsx +++ b/src/lib/seam/components/AccessCodeDetails/AccessCodeDevice.tsx @@ -51,7 +51,7 @@ function Content(props: { }): JSX.Element { const { device, disableLockUnlock, onSelectDevice } = props - const { renderSnackbar, showToggleSnackbar } = useToggleLockSnackbar() + const { SnackbarNode, showToggleSnackbar } = useToggleLockSnackbar() const toggleLock = useToggleLock({ onSuccess: () => { showToggleSnackbar('success') @@ -65,7 +65,7 @@ function Content(props: { return ( <> - {renderSnackbar()} + {SnackbarNode}
diff --git a/src/lib/seam/components/DeviceDetails/LockDeviceDetails.tsx b/src/lib/seam/components/DeviceDetails/LockDeviceDetails.tsx index f2333d8da..41eac1b96 100644 --- a/src/lib/seam/components/DeviceDetails/LockDeviceDetails.tsx +++ b/src/lib/seam/components/DeviceDetails/LockDeviceDetails.tsx @@ -43,7 +43,7 @@ export function LockDeviceDetails({ device_id: device.device_id, }) - const { renderSnackbar, showToggleSnackbar } = useToggleLockSnackbar() + const { SnackbarNode, showToggleSnackbar } = useToggleLockSnackbar() const toggleLock = useToggleLock({ onSuccess: () => { showToggleSnackbar('success') @@ -99,7 +99,7 @@ export function LockDeviceDetails({ return ( <> - {renderSnackbar()} + {SnackbarNode}
diff --git a/src/lib/seam/locks/use-toggle-lock-snackbar.tsx b/src/lib/seam/locks/use-toggle-lock-snackbar.tsx index ee607a9d1..57de36773 100644 --- a/src/lib/seam/locks/use-toggle-lock-snackbar.tsx +++ b/src/lib/seam/locks/use-toggle-lock-snackbar.tsx @@ -1,36 +1,39 @@ -import { useCallback, useState } from 'react' +import { useCallback, useMemo, useState } from 'react' import { Snackbar, type SnackbarProps } from 'lib/ui/Snackbar/Snackbar.js' export interface UseToggleLockSnackbarContext { showToggleSnackbar: (type: SnackbarProps['variant']) => void - renderSnackbar: () => JSX.Element + SnackbarNode: JSX.Element } export function useToggleLockSnackbar(): UseToggleLockSnackbarContext { const [visible, setVisible] = useState(false) const [variant, setVariant] = useState('success') + const SnackbarNode = useMemo( + () => ( + { + setVisible(false) + }} + message={ + variant === 'success' ? t.successfullyUpdated : t.failedToUpdate + } + autoDismiss + /> + ), + [visible, variant] + ) + return { showToggleSnackbar: useCallback((type) => { setVariant(type) setVisible(true) }, []), - renderSnackbar: useCallback(() => { - return ( - { - setVisible(false) - }} - message={ - variant === 'success' ? t.successfullyUpdated : t.failedToUpdate - } - autoDismiss - /> - ) - }, [visible, variant]), + SnackbarNode, } } From 71e124dfc9a5895d3d44365314a3718f69e25046 Mon Sep 17 00:00:00 2001 From: kadiryazici Date: Wed, 29 Jan 2025 22:56:05 +0300 Subject: [PATCH 3/9] Use correct typing --- src/lib/seam/locks/use-toggle-lock-snackbar.tsx | 10 +++++----- src/lib/ui/Snackbar/Snackbar.tsx | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/lib/seam/locks/use-toggle-lock-snackbar.tsx b/src/lib/seam/locks/use-toggle-lock-snackbar.tsx index 57de36773..3be48fda3 100644 --- a/src/lib/seam/locks/use-toggle-lock-snackbar.tsx +++ b/src/lib/seam/locks/use-toggle-lock-snackbar.tsx @@ -1,15 +1,15 @@ import { useCallback, useMemo, useState } from 'react' -import { Snackbar, type SnackbarProps } from 'lib/ui/Snackbar/Snackbar.js' +import { Snackbar, type SnackbarVariant } from 'lib/ui/Snackbar/Snackbar.js' export interface UseToggleLockSnackbarContext { - showToggleSnackbar: (type: SnackbarProps['variant']) => void + showToggleSnackbar: (variant: SnackbarVariant) => void SnackbarNode: JSX.Element } export function useToggleLockSnackbar(): UseToggleLockSnackbarContext { const [visible, setVisible] = useState(false) - const [variant, setVariant] = useState('success') + const [variant, setVariant] = useState('success') const SnackbarNode = useMemo( () => ( @@ -29,8 +29,8 @@ export function useToggleLockSnackbar(): UseToggleLockSnackbarContext { ) return { - showToggleSnackbar: useCallback((type) => { - setVariant(type) + showToggleSnackbar: useCallback((variant) => { + setVariant(variant) setVisible(true) }, []), SnackbarNode, diff --git a/src/lib/ui/Snackbar/Snackbar.tsx b/src/lib/ui/Snackbar/Snackbar.tsx index 6c53dc511..66a49201b 100644 --- a/src/lib/ui/Snackbar/Snackbar.tsx +++ b/src/lib/ui/Snackbar/Snackbar.tsx @@ -5,7 +5,7 @@ import { CheckGreenIcon } from 'lib/icons/CheckGreen.js' import { CloseWhiteIcon } from 'lib/icons/CloseWhite.js' import { ExclamationCircleIcon } from 'lib/icons/ExclamationCircle.js' -type SnackbarVariant = 'success' | 'error' +export type SnackbarVariant = 'success' | 'error' export interface SnackbarProps { message: string From 0affc48cd271df7fc4c21de7a0a1456fa8075a34 Mon Sep 17 00:00:00 2001 From: kadiryazici Date: Thu, 30 Jan 2025 20:37:24 +0300 Subject: [PATCH 4/9] Update naming --- .../seam/components/AccessCodeDetails/AccessCodeDevice.tsx | 4 ++-- src/lib/seam/components/DeviceDetails/LockDeviceDetails.tsx | 4 ++-- src/lib/seam/locks/use-toggle-lock-snackbar.tsx | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/lib/seam/components/AccessCodeDetails/AccessCodeDevice.tsx b/src/lib/seam/components/AccessCodeDetails/AccessCodeDevice.tsx index 786149506..c7271f758 100644 --- a/src/lib/seam/components/AccessCodeDetails/AccessCodeDevice.tsx +++ b/src/lib/seam/components/AccessCodeDetails/AccessCodeDevice.tsx @@ -51,7 +51,7 @@ function Content(props: { }): JSX.Element { const { device, disableLockUnlock, onSelectDevice } = props - const { SnackbarNode, showToggleSnackbar } = useToggleLockSnackbar() + const { ToggleLockSnackbarNode, showToggleSnackbar } = useToggleLockSnackbar() const toggleLock = useToggleLock({ onSuccess: () => { showToggleSnackbar('success') @@ -65,7 +65,7 @@ function Content(props: { return ( <> - {SnackbarNode} + {ToggleLockSnackbarNode}
diff --git a/src/lib/seam/components/DeviceDetails/LockDeviceDetails.tsx b/src/lib/seam/components/DeviceDetails/LockDeviceDetails.tsx index 41eac1b96..acfc92a75 100644 --- a/src/lib/seam/components/DeviceDetails/LockDeviceDetails.tsx +++ b/src/lib/seam/components/DeviceDetails/LockDeviceDetails.tsx @@ -43,7 +43,7 @@ export function LockDeviceDetails({ device_id: device.device_id, }) - const { SnackbarNode, showToggleSnackbar } = useToggleLockSnackbar() + const { ToggleLockSnackbarNode, showToggleSnackbar } = useToggleLockSnackbar() const toggleLock = useToggleLock({ onSuccess: () => { showToggleSnackbar('success') @@ -99,7 +99,7 @@ export function LockDeviceDetails({ return ( <> - {SnackbarNode} + {ToggleLockSnackbarNode}
diff --git a/src/lib/seam/locks/use-toggle-lock-snackbar.tsx b/src/lib/seam/locks/use-toggle-lock-snackbar.tsx index 3be48fda3..5cbed57ca 100644 --- a/src/lib/seam/locks/use-toggle-lock-snackbar.tsx +++ b/src/lib/seam/locks/use-toggle-lock-snackbar.tsx @@ -4,14 +4,14 @@ import { Snackbar, type SnackbarVariant } from 'lib/ui/Snackbar/Snackbar.js' export interface UseToggleLockSnackbarContext { showToggleSnackbar: (variant: SnackbarVariant) => void - SnackbarNode: JSX.Element + ToggleLockSnackbarNode: JSX.Element } export function useToggleLockSnackbar(): UseToggleLockSnackbarContext { const [visible, setVisible] = useState(false) const [variant, setVariant] = useState('success') - const SnackbarNode = useMemo( + const ToggleLockSnackbarNode = useMemo( () => ( Date: Wed, 5 Feb 2025 01:51:38 +0300 Subject: [PATCH 5/9] use duplication --- .../AccessCodeDetails/AccessCodeDevice.tsx | 30 ++++++++++--- .../DeviceDetails/LockDeviceDetails.tsx | 30 ++++++++++--- .../seam/locks/use-toggle-lock-snackbar.tsx | 43 ------------------- 3 files changed, 50 insertions(+), 53 deletions(-) delete mode 100644 src/lib/seam/locks/use-toggle-lock-snackbar.tsx diff --git a/src/lib/seam/components/AccessCodeDetails/AccessCodeDevice.tsx b/src/lib/seam/components/AccessCodeDetails/AccessCodeDevice.tsx index c7271f758..db2330025 100644 --- a/src/lib/seam/components/AccessCodeDetails/AccessCodeDevice.tsx +++ b/src/lib/seam/components/AccessCodeDetails/AccessCodeDevice.tsx @@ -1,9 +1,11 @@ +import { useState } from 'react' + import { useDevice } from 'lib/seam/devices/use-device.js' import { isLockDevice, type LockDevice } from 'lib/seam/locks/lock-device.js' import { useToggleLock } from 'lib/seam/locks/use-toggle-lock.js' -import { useToggleLockSnackbar } from 'lib/seam/locks/use-toggle-lock-snackbar.js' import { Button } from 'lib/ui/Button.js' import { DeviceImage } from 'lib/ui/device/DeviceImage.js' +import { Snackbar, type SnackbarVariant } from 'lib/ui/Snackbar/Snackbar.js' import { TextButton } from 'lib/ui/TextButton.js' export function AccessCodeDevice({ @@ -50,14 +52,18 @@ function Content(props: { onSelectDevice: (deviceId: string) => void }): JSX.Element { const { device, disableLockUnlock, onSelectDevice } = props + const [snackbarVisible, setSnackbarVisible] = useState(false) + const [snackbarVariant, setSnackbarVariant] = + useState('success') - const { ToggleLockSnackbarNode, showToggleSnackbar } = useToggleLockSnackbar() const toggleLock = useToggleLock({ onSuccess: () => { - showToggleSnackbar('success') + setSnackbarVisible(true) + setSnackbarVariant('success') }, onError: () => { - showToggleSnackbar('error') + setSnackbarVisible(true) + setSnackbarVariant('error') }, }) @@ -65,7 +71,19 @@ function Content(props: { return ( <> - {ToggleLockSnackbarNode} + { + setSnackbarVisible(false) + }} + message={ + snackbarVariant === 'success' + ? t.successfullyUpdated + : t.failedToUpdate + } + autoDismiss + />
@@ -99,4 +117,6 @@ const t = { deviceDetails: 'Device details', unlock: 'Unlock', lock: 'Lock', + successfullyUpdated: 'Lock status has been successfully updated', + failedToUpdate: 'Failed to update lock status', } diff --git a/src/lib/seam/components/DeviceDetails/LockDeviceDetails.tsx b/src/lib/seam/components/DeviceDetails/LockDeviceDetails.tsx index acfc92a75..cfc741a6c 100644 --- a/src/lib/seam/components/DeviceDetails/LockDeviceDetails.tsx +++ b/src/lib/seam/components/DeviceDetails/LockDeviceDetails.tsx @@ -1,4 +1,5 @@ import classNames from 'classnames' +import { useState } from 'react' import { ChevronRightIcon } from 'lib/icons/ChevronRight.js' import { useAccessCodes } from 'lib/seam/access-codes/use-access-codes.js' @@ -9,7 +10,6 @@ import { DeviceModel } from 'lib/seam/components/DeviceDetails/DeviceModel.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 { useToggleLockSnackbar } from 'lib/seam/locks/use-toggle-lock-snackbar.js' import { Alerts } from 'lib/ui/Alert/Alerts.js' import { Button } from 'lib/ui/Button.js' import { BatteryStatusIndicator } from 'lib/ui/device/BatteryStatusIndicator.js' @@ -17,6 +17,7 @@ import { DeviceImage } from 'lib/ui/device/DeviceImage.js' import { EditableDeviceName } from 'lib/ui/device/EditableDeviceName.js' import { OnlineStatus } from 'lib/ui/device/OnlineStatus.js' import { ContentHeader } from 'lib/ui/layout/ContentHeader.js' +import { Snackbar, type SnackbarVariant } from 'lib/ui/Snackbar/Snackbar.js' import { useToggle } from 'lib/ui/use-toggle.js' interface LockDeviceDetailsProps extends NestedSpecificDeviceDetailsProps { @@ -43,13 +44,18 @@ export function LockDeviceDetails({ device_id: device.device_id, }) - const { ToggleLockSnackbarNode, showToggleSnackbar } = useToggleLockSnackbar() + const [snackbarVisible, setSnackbarVisible] = useState(false) + const [snackbarVariant, setSnackbarVariant] = + useState('success') + const toggleLock = useToggleLock({ onSuccess: () => { - showToggleSnackbar('success') + setSnackbarVisible(true) + setSnackbarVariant('success') }, onError: () => { - showToggleSnackbar('error') + setSnackbarVisible(true) + setSnackbarVariant('error') }, }) @@ -99,7 +105,19 @@ export function LockDeviceDetails({ return ( <> - {ToggleLockSnackbarNode} + { + setSnackbarVisible(false) + }} + message={ + snackbarVariant === 'success' + ? t.successfullyUpdated + : t.failedToUpdate + } + autoDismiss + />
@@ -222,4 +240,6 @@ const t = { lockStatus: 'Lock status', status: 'Status', power: 'Power', + successfullyUpdated: 'Lock status has been successfully updated', + failedToUpdate: 'Failed to update lock status', } diff --git a/src/lib/seam/locks/use-toggle-lock-snackbar.tsx b/src/lib/seam/locks/use-toggle-lock-snackbar.tsx deleted file mode 100644 index 5cbed57ca..000000000 --- a/src/lib/seam/locks/use-toggle-lock-snackbar.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { useCallback, useMemo, useState } from 'react' - -import { Snackbar, type SnackbarVariant } from 'lib/ui/Snackbar/Snackbar.js' - -export interface UseToggleLockSnackbarContext { - showToggleSnackbar: (variant: SnackbarVariant) => void - ToggleLockSnackbarNode: JSX.Element -} - -export function useToggleLockSnackbar(): UseToggleLockSnackbarContext { - const [visible, setVisible] = useState(false) - const [variant, setVariant] = useState('success') - - const ToggleLockSnackbarNode = useMemo( - () => ( - { - setVisible(false) - }} - message={ - variant === 'success' ? t.successfullyUpdated : t.failedToUpdate - } - autoDismiss - /> - ), - [visible, variant] - ) - - return { - showToggleSnackbar: useCallback((variant) => { - setVariant(variant) - setVisible(true) - }, []), - ToggleLockSnackbarNode, - } -} - -const t = { - successfullyUpdated: 'Lock status has been successfully updated', - failedToUpdate: 'Failed to update lock status', -} From d8782b679c709019ede2a05f1bab17f9de702fee Mon Sep 17 00:00:00 2001 From: kadiryazici Date: Wed, 5 Feb 2025 01:53:41 +0300 Subject: [PATCH 6/9] Update packages --- package-lock.json | 24 ++++++++++++------------ package.json | 4 ++-- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/package-lock.json b/package-lock.json index a862afa3e..ac2688eff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,15 +1,15 @@ { "name": "@seamapi/react", - "version": "4.3.1", + "version": "4.4.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@seamapi/react", - "version": "4.3.1", + "version": "4.4.0", "license": "MIT", "dependencies": { - "@seamapi/http": "^1.14.0", + "@seamapi/http": "^1.20.0", "@tanstack/react-query": "^5.27.5", "classnames": "^2.3.2", "luxon": "^3.3.0", @@ -26,7 +26,7 @@ "@rxfork/r2wc-react-to-web-component": "^2.4.0", "@seamapi/fake-devicedb": "^1.6.1", "@seamapi/fake-seam-connect": "^1.69.1", - "@seamapi/types": "^1.292.2", + "@seamapi/types": "^1.344.3", "@storybook/addon-designs": "^7.0.1", "@storybook/addon-essentials": "^7.0.2", "@storybook/addon-links": "^7.0.2", @@ -83,7 +83,7 @@ "npm": ">= 9.0.0" }, "peerDependencies": { - "@seamapi/types": "^1.26.2", + "@seamapi/types": "^1.344.3", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", "react": "^18.0.0", @@ -5863,9 +5863,9 @@ } }, "node_modules/@seamapi/http": { - "version": "1.14.0", - "resolved": "https://registry.npmjs.org/@seamapi/http/-/http-1.14.0.tgz", - "integrity": "sha512-/b1tGZL5aYmoegnvw+H3OSEOwQjawbDHW8BTHZiZkCY8B0k/AhWSPIPXP0AHqLc3278UECFrv1UeOsLPlGrXkQ==", + "version": "1.20.0", + "resolved": "https://registry.npmjs.org/@seamapi/http/-/http-1.20.0.tgz", + "integrity": "sha512-5FP9yT4dJUQEbcUdcu3aUE6LbFyl6ZY0Xk9rtyl4rIwfmvTEy4b21dtzMxIjzBNR7zQue7NnPEizKjYlcANv/w==", "license": "MIT", "dependencies": { "@seamapi/url-search-params-serializer": "^1.1.0", @@ -5878,7 +5878,7 @@ "npm": ">= 9.0.0" }, "peerDependencies": { - "@seamapi/types": "^1.292.2" + "@seamapi/types": "^1.343.0" }, "peerDependenciesMeta": { "@seamapi/types": { @@ -5887,9 +5887,9 @@ } }, "node_modules/@seamapi/types": { - "version": "1.294.0", - "resolved": "https://registry.npmjs.org/@seamapi/types/-/types-1.294.0.tgz", - "integrity": "sha512-NcZemUYBNECpMXJnBgteRwPrri0jZSUPKPJTdeOM7X0ba3kWpuj3nvA5JESsLArFB7Tv7kUAVngIvY2vWrc7aw==", + "version": "1.344.3", + "resolved": "https://registry.npmjs.org/@seamapi/types/-/types-1.344.3.tgz", + "integrity": "sha512-YUw1MStsMwQU63H7S0qOQe3wJLt6ArRZQNlxxpIiz8gb+NtefZEmVdvEv3MaRT2YTfL6g6Lkie7s6Td1AB2YRg==", "devOptional": true, "license": "MIT", "engines": { diff --git a/package.json b/package.json index 22ac0dc99..868948217 100644 --- a/package.json +++ b/package.json @@ -127,7 +127,7 @@ } }, "dependencies": { - "@seamapi/http": "^1.14.0", + "@seamapi/http": "^1.20.0", "@tanstack/react-query": "^5.27.5", "classnames": "^2.3.2", "luxon": "^3.3.0", @@ -196,4 +196,4 @@ "vitest": "^0.34.4", "zustand-hoist": "^2.0.0" } -} +} \ No newline at end of file From 8d153098c8263d2a7912162bbe3fbefc35e8d1ae Mon Sep 17 00:00:00 2001 From: Seam Bot Date: Tue, 4 Feb 2025 22:54:30 +0000 Subject: [PATCH 7/9] ci: Generate code --- package-lock.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index ac2688eff..89a0f9751 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@seamapi/react", - "version": "4.4.0", + "version": "4.3.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@seamapi/react", - "version": "4.4.0", + "version": "4.3.1", "license": "MIT", "dependencies": { "@seamapi/http": "^1.20.0", @@ -26,7 +26,7 @@ "@rxfork/r2wc-react-to-web-component": "^2.4.0", "@seamapi/fake-devicedb": "^1.6.1", "@seamapi/fake-seam-connect": "^1.69.1", - "@seamapi/types": "^1.344.3", + "@seamapi/types": "^1.292.2", "@storybook/addon-designs": "^7.0.1", "@storybook/addon-essentials": "^7.0.2", "@storybook/addon-links": "^7.0.2", @@ -83,7 +83,7 @@ "npm": ">= 9.0.0" }, "peerDependencies": { - "@seamapi/types": "^1.344.3", + "@seamapi/types": "^1.26.2", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", "react": "^18.0.0", From 998c413813fcf6a9c2d04df4ed68b07d33391ffe Mon Sep 17 00:00:00 2001 From: Seam Bot Date: Tue, 4 Feb 2025 22:55:27 +0000 Subject: [PATCH 8/9] ci: Format code --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 868948217..30cef4aad 100644 --- a/package.json +++ b/package.json @@ -196,4 +196,4 @@ "vitest": "^0.34.4", "zustand-hoist": "^2.0.0" } -} \ No newline at end of file +} From 3cbb8083cc3251d25e9e74f94982dc33a4a3a27b Mon Sep 17 00:00:00 2001 From: kadiryazici Date: Wed, 5 Feb 2025 01:56:05 +0300 Subject: [PATCH 9/9] Revert "Update packages" This reverts commit d8782b679c709019ede2a05f1bab17f9de702fee. --- package-lock.json | 16 ++++++++-------- package.json | 2 +- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index 89a0f9751..a862afa3e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "4.3.1", "license": "MIT", "dependencies": { - "@seamapi/http": "^1.20.0", + "@seamapi/http": "^1.14.0", "@tanstack/react-query": "^5.27.5", "classnames": "^2.3.2", "luxon": "^3.3.0", @@ -5863,9 +5863,9 @@ } }, "node_modules/@seamapi/http": { - "version": "1.20.0", - "resolved": "https://registry.npmjs.org/@seamapi/http/-/http-1.20.0.tgz", - "integrity": "sha512-5FP9yT4dJUQEbcUdcu3aUE6LbFyl6ZY0Xk9rtyl4rIwfmvTEy4b21dtzMxIjzBNR7zQue7NnPEizKjYlcANv/w==", + "version": "1.14.0", + "resolved": "https://registry.npmjs.org/@seamapi/http/-/http-1.14.0.tgz", + "integrity": "sha512-/b1tGZL5aYmoegnvw+H3OSEOwQjawbDHW8BTHZiZkCY8B0k/AhWSPIPXP0AHqLc3278UECFrv1UeOsLPlGrXkQ==", "license": "MIT", "dependencies": { "@seamapi/url-search-params-serializer": "^1.1.0", @@ -5878,7 +5878,7 @@ "npm": ">= 9.0.0" }, "peerDependencies": { - "@seamapi/types": "^1.343.0" + "@seamapi/types": "^1.292.2" }, "peerDependenciesMeta": { "@seamapi/types": { @@ -5887,9 +5887,9 @@ } }, "node_modules/@seamapi/types": { - "version": "1.344.3", - "resolved": "https://registry.npmjs.org/@seamapi/types/-/types-1.344.3.tgz", - "integrity": "sha512-YUw1MStsMwQU63H7S0qOQe3wJLt6ArRZQNlxxpIiz8gb+NtefZEmVdvEv3MaRT2YTfL6g6Lkie7s6Td1AB2YRg==", + "version": "1.294.0", + "resolved": "https://registry.npmjs.org/@seamapi/types/-/types-1.294.0.tgz", + "integrity": "sha512-NcZemUYBNECpMXJnBgteRwPrri0jZSUPKPJTdeOM7X0ba3kWpuj3nvA5JESsLArFB7Tv7kUAVngIvY2vWrc7aw==", "devOptional": true, "license": "MIT", "engines": { diff --git a/package.json b/package.json index 30cef4aad..22ac0dc99 100644 --- a/package.json +++ b/package.json @@ -127,7 +127,7 @@ } }, "dependencies": { - "@seamapi/http": "^1.20.0", + "@seamapi/http": "^1.14.0", "@tanstack/react-query": "^5.27.5", "classnames": "^2.3.2", "luxon": "^3.3.0",