Use mutation

Author: kadiryazici

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

@@ -6,10 +6,10 @@ import { LockDeviceDetails } from 'lib/seam/components/DeviceDetails/LockDeviceD
 import { NoiseSensorDeviceDetails } from 'lib/seam/components/DeviceDetails/NoiseSensorDeviceDetails.js'
 import { ThermostatDeviceDetails } from 'lib/seam/components/DeviceDetails/ThermostatDeviceDetails.js'
 import { useDevice } from 'lib/seam/devices/use-device.js'
+import { useSetDeviceName } from 'lib/seam/devices/use-set-device-name.js'
 import { isLockDevice } from 'lib/seam/locks/lock-device.js'
 import { isNoiseSensorDevice } from 'lib/seam/noise-sensors/noise-sensor-device.js'
 import { isThermostatDevice } from 'lib/seam/thermostats/thermostat-device.js'
-import { useSeamClient } from 'lib/seam/use-seam-client.js'
 import { useComponentTelemetry } from 'lib/telemetry/index.js'
 
 export interface DeviceDetailsProps extends CommonProps {
@@ -38,24 +38,21 @@ export function DeviceDetails({
 }: DeviceDetailsProps): JSX.Element | null {
   useComponentTelemetry('DeviceDetails')
 
-  const { client } = useSeamClient()
-  const { device, refetch: refetchDevice } = useDevice({
+  const { device } = useDevice({
     device_id: deviceId,
   })
 
-  const updateDeviceName = async (newName: string): Promise<void> => {
-    if (client == null) return
+  const { mutate: setDeviceName } = useSetDeviceName({
+    device_id: deviceId,
+  })
 
-    client.devices
-      .update({
-        device_id: deviceId,
+  const updateDeviceName = (newName: string): void => {
+    if (device != null) {
+      setDeviceName({
+        device_id: device.device_id,
         name: newName,
       })
-      .then(async () => await refetchDevice())
-      .catch((error) => {
-        // eslint-disable-next-line no-console
-        console.error(error)
-      })
+    }
   }
 
   if (device == null) {

src/lib/seam/devices/use-set-device-name.ts

@@ -0,0 +1,83 @@
+import type {
+  DevicesGetParams,
+  DevicesUpdateBody,
+  SeamHttpApiError,
+} from '@seamapi/http/connect'
+import type { Device } from '@seamapi/types/connect'
+import {
+  useMutation,
+  type UseMutationResult,
+  useQueryClient,
+} from '@tanstack/react-query'
+
+import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js'
+
+export type UseSetDeviceNameParams = never
+
+export type UseSetDeviceNameData = undefined
+
+export type UseSetDeviceNameMutationVariables = Pick<DevicesUpdateBody, 'device_id' | 'name'>
+
+type MutationError = SeamHttpApiError
+
+export function useSetDeviceName(params: DevicesGetParams): UseMutationResult<
+  UseSetDeviceNameData,
+  MutationError,
+  UseSetDeviceNameMutationVariables
+> {
+  const { client } = useSeamClient()
+  const queryClient = useQueryClient()
+
+  return useMutation<
+    UseSetDeviceNameData,
+    MutationError,
+    UseSetDeviceNameMutationVariables
+  >({
+    mutationFn: async (variables) => {
+      if (client === null) throw new NullSeamClientError()
+      await client.devices.update(variables)
+    },
+    onSuccess: (_data, variables) => {
+
+      queryClient.setQueryData<Device | null>(
+        ['devices', 'get', params],
+        (device) => {
+          if (device == null) {
+            return
+          }
+
+          return getUpdatedDevice(device, variables.name ?? device.properties.name)
+        }
+      )
+
+      queryClient.setQueryData<Device[]>(
+        ['devices', 'list', { device_id: variables.device_id }],
+        (devices): Device[] => {
+          if (devices == null) {
+            return []
+          }
+
+          return devices.map((device) => {
+            if (device.device_id === variables.device_id) {
+              return getUpdatedDevice(device, variables.name ?? device.properties.name)
+            }
+
+            return device
+          })
+        }
+      )
+    },
+  })
+}
+
+const getUpdatedDevice = (device: Device, name: string): Device => {
+  const { properties } = device
+
+  return {
+    ...device,
+    properties: {
+      ...properties,
+      name,
+    },
+  }
+}