fix: reevaluate volume hook when state updates

Author: andrew-welker

src/lib/shared/hooks/interfaces/useIBasicVolumeWithFeedback.ts

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { Volume } from '../../../types';
 import { useWebsocketContext } from '../../../utils/useWebsocketContext';
 import { IBasicVolumeReturn, useIBasicVolume } from './useIBasicVolume';
@@ -15,25 +16,31 @@ export function useIBasicVolumeWithFeedback(
   const { sendMessage, sendSimpleMessage } = useWebsocketContext();
 
   const baseVolume = useIBasicVolume(path);
-  if(!baseVolume) {
+
+  return useMemo(() => {
+    if (!baseVolume) {
       console.log('baseVolume is undefined');
       return undefined;
-  }
-  if (!volumeState) {
-    console.log('volumeState is undefined');
-    return undefined;
-  }
-  const setLevel = (value: number) => sendSimpleMessage(`${path}/level`, value);
-  const muteOn = () => sendMessage(`${path}/muteOn`, null);
-  const muteOff = () => sendMessage(`${path}/muteOff`, null);
+    }
+
+    if (!volumeState) {
+      console.log('volumeState is undefined');
+      return undefined;
+    }
+
+    const setLevel = (value: number) =>
+      sendSimpleMessage(`${path}/level`, value);
+    const muteOn = () => sendMessage(`${path}/muteOn`, null);
+    const muteOff = () => sendMessage(`${path}/muteOff`, null);
 
-  return {
-    ...baseVolume,
-    volumeState,
-    setLevel,
-    muteOn,
-    muteOff,
-  };
+    return {
+      ...baseVolume,
+      volumeState,
+      setLevel,
+      muteOn,
+      muteOff,
+    };
+  }, [baseVolume, volumeState, path, sendMessage, sendSimpleMessage]);
 }
 
 export interface IBasicVolumeWithFeedbackReturn extends IBasicVolumeReturn {
@@ -42,32 +49,38 @@ export interface IBasicVolumeWithFeedbackReturn extends IBasicVolumeReturn {
   muteOn: () => void;
   muteOff: () => void;
 }
-
+/**
+ * @deprecated use useIBasicVolumeWithFeedback instead
+ */
 export function useGetIBasicVolumeWithFeedback(
   path: string,
   volumeState: Volume | undefined
 ): IBasicVolumeWithFeedbackReturn | undefined {
   const { sendMessage, sendSimpleMessage } = useWebsocketContext();
 
   const baseVolume = useIBasicVolume(path);
-  if(!baseVolume) {
+
+  return useMemo(() => {
+    if (!baseVolume) {
       console.log('baseVolume is undefined');
       return undefined;
-  }
-  if(!volumeState) {
+    }
+    if (!volumeState) {
       console.log('volumeState is undefined');
       return undefined;
-  }
+    }
 
-  const setLevel = (value: number) => sendSimpleMessage(`${path}/level`, value);
-  const muteOn = () => sendMessage(`${path}/muteOn`, null);
-  const muteOff = () => sendMessage(`${path}/muteOff`, null);
+    const setLevel = (value: number) =>
+      sendSimpleMessage(`${path}/level`, value);
+    const muteOn = () => sendMessage(`${path}/muteOn`, null);
+    const muteOff = () => sendMessage(`${path}/muteOff`, null);
 
-  return {
-    ...baseVolume,
-    volumeState,
-    setLevel,
-    muteOn,
-    muteOff,
-  };
+    return {
+      ...baseVolume,
+      volumeState,
+      setLevel,
+      muteOn,
+      muteOff,
+    };
+  }, [baseVolume, volumeState, path, sendMessage, sendSimpleMessage]);
 }

src/lib/shared/hooks/useDeviceIBasicVolumeWithFeedback.ts

@@ -4,14 +4,13 @@ import { useIBasicVolumeWithFeedback } from './interfaces/useIBasicVolumeWithFee
 
 /**
  *  Wrapper hook for a device volume
- * @param deviceKey 
- * @returns 
+ * @param deviceKey
+ * @returns
  */
-export function useDeviceIBasicVolumeWithFeedback(deviceKey: string ) {
+export function useDeviceIBasicVolumeWithFeedback(deviceKey: string) {
   const volumeState = useGetDevice<IBasicVolumeWithFeedbackState>(deviceKey);
 
   const path = `/device/${deviceKey}`;
 
   return useIBasicVolumeWithFeedback(path, volumeState?.volume);
 }
-