Calling Sample migration setup (#187)

* Add callClientDeclaratify to CallingProvider

* Add useSelector and useHandler for Calling

* Change files

* Fix pnpm-lock.yaml

Co-authored-by: Anjul Garg <anjulgarg@live.com>

change/@azure-acs-calling-declarative-141e91e1-70a9-452e-b10f-cdc1151e2b11.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add ability to unregister from stateChange events",
+  "packageName": "@azure/acs-calling-declarative",
+  "email": "allenhwang@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-ui-26cf6ce7-509f-48a1-9d04-bd585dc5abc6.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add useCallClient, useDeviceManager, and useCall utilities",
+  "packageName": "@azure/communication-ui",
+  "email": "allenhwang@microsoft.com",
+  "dependentChangeType": "patch"
+}

common/config/rush/pnpm-lock.yaml

@@ -21337,4 +21337,4 @@ specifiers:
   uuid: ^8.1.0
   webpack: 4.44.2
   webpack-cli: ^4.2.0
-  webpack-node-externals: ^2.5.2
+  webpack-node-externals: ^2.5.2

packages/acs-calling-declarative/review/acs-calling-declarative.api.md

@@ -51,6 +51,7 @@ export interface CallClientState {
 
 // @public
 export interface DeclarativeCallClient extends CallClient {
+    offStateChange(handler: (state: CallClientState) => void): void;
     onStateChange(handler: (state: CallClientState) => void): void;
     startRenderVideo(callId: string, stream: LocalVideoStream | RemoteVideoStream, options?: CreateViewOptions): Promise<void>;
     state: CallClientState;

packages/acs-calling-declarative/src/CallClientDeclarative.ts

@@ -23,6 +23,12 @@ export interface DeclarativeCallClient extends CallClient {
    * @param handler - Callback to receive the state.
    */
   onStateChange(handler: (state: CallClientState) => void): void;
+  /**
+   * Allows unregistering for 'stateChanged' events.
+   *
+   * @param handler - Original callback to be unsubscribed.
+   */
+  offStateChange(handler: (state: CallClientState) => void): void;
   /**
    * Renders a {@Link RemoteVideoStream} or {@Link LocalVideoStream} and stores the resulting
    * {@Link VideoStreamRendererView} under the relevant {@Link RemoteVideoStream} or {@Link LocalVideoStream} in the
@@ -124,6 +130,10 @@ export const callClientDeclaratify = (callClient: CallClient): DeclarativeCallCl
     configurable: false,
     value: (handler: (state: CallClientState) => void) => context.onStateChange(handler)
   });
+  Object.defineProperty(callClient, 'offStateChange', {
+    configurable: false,
+    value: (handler: (state: CallClientState) => void) => context.offStateChange(handler)
+  });
   Object.defineProperty(callClient, 'startRenderVideo', {
     configurable: false,
     value: (

packages/acs-calling-declarative/src/CallContext.ts

@@ -47,6 +47,10 @@ export class CallContext {
     this._emitter.on('stateChanged', handler);
   }
 
+  public offStateChange(handler: (state: CallClientState) => void): void {
+    this._emitter.off('stateChanged', handler);
+  }
+
   // Disposing of the CallAgentDeclarative will not clear the state. If we create a new CallAgentDeclarative, we should
   // make sure the state is clean because any left over state (if previous CallAgentDeclarative was disposed) may be
   // invalid.

packages/communication-ui/package.json

@@ -27,6 +27,8 @@
     "postpack": "node scripts/restore-pkg && copyfiles -E \"./*.tgz\" private-preview && copyfiles -u 2 -E \"docs/private-preview/README.md\" private-preview"
   },
   "dependencies": {
+    "@azure/acs-calling-declarative": "~1.0.0-beta",
+    "@azure/acs-calling-selector": "~1.0.0-beta",
     "@azure/communication-administration": "1.0.0-beta.3",
     "@azure/communication-calling": "1.0.1-beta.1",
     "@azure/communication-chat": "1.0.0-beta.4",

packages/communication-ui/src/providers/CallProvider.tsx

@@ -75,3 +75,7 @@ export const CallProvider = (props: CallProvider & ErrorHandlingProps): JSX.Elem
   WithErrorHandling(CallProviderBase, props);
 
 export const useCallContext = (): CallContextType => useValidContext(CallContext);
+
+export const useCall = (): Call | undefined => {
+  return useValidContext(CallContext).call;
+};

packages/communication-ui/src/providers/CallingProvider.tsx

@@ -15,6 +15,7 @@ import { ErrorHandlingProps } from './ErrorProvider';
 import { WithErrorHandling } from '../utils/WithErrorHandling';
 import { CommunicationUiError, CommunicationUiErrorCode } from '../types/CommunicationUiError';
 import { DevicePermissionState } from '../types/DevicePermission';
+import { callClientDeclaratify } from '@azure/acs-calling-declarative';
 
 export type CallingContextType = {
   userId: string;
@@ -56,7 +57,7 @@ const CallingProviderBase = (props: CallingProviderProps & ErrorHandlingProps):
 
   // if there is no valid token then there is no valid userId
   const userIdFromToken = token ? getIdFromToken(token) : '';
-  const [callClient, setCallClient] = useState<CallClient>(new CallClient(callClientOptions));
+  const [callClient, setCallClient] = useState<CallClient>(callClientDeclaratify(new CallClient(callClientOptions)));
   const [callAgent, setCallAgent] = useState<CallAgent | undefined>(undefined);
   const [deviceManager, setDeviceManager] = useState<DeviceManager | undefined>(undefined);
   const [userId, setUserId] = useState<string>(userIdFromToken);
@@ -151,3 +152,11 @@ export const CallingProvider = (props: CallingProviderProps & ErrorHandlingProps
   WithErrorHandling(CallingProviderBase, props);
 
 export const useCallingContext = (): CallingContextType => useValidContext(CallingContext);
+
+export const useCallClient = (): CallClient => {
+  return useValidContext(CallingContext).callClient;
+};
+
+export const useDeviceManager = (): DeviceManager | undefined => {
+  return useValidContext(CallingContext).deviceManager;
+};

samples/Calling/src/app/hooks/useHandlers.ts

@@ -0,0 +1,18 @@
+// © Microsoft Corporation. All rights reserved.
+
+import { DeclarativeCallClient } from '@azure/acs-calling-declarative';
+import { createDefaultHandlersForComponent } from '@azure/acs-calling-selector';
+
+import { useCallClient, useCallingContext, useDeviceManager, useCall } from '@azure/communication-ui';
+
+import { ReactElement } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
+export const useHandlers = <PropsT>(component: (props: PropsT) => ReactElement | null) => {
+  const callClient: DeclarativeCallClient = useCallClient() as any;
+  const callAgent = useCallingContext().callAgent;
+  const deviceManager = useDeviceManager();
+  const call = useCall();
+
+  return createDefaultHandlersForComponent(callClient, callAgent, deviceManager, call, component);
+};

samples/Calling/src/app/hooks/useSelector.ts

@@ -0,0 +1,29 @@
+// © Microsoft Corporation. All rights reserved.
+
+import { CallClientState, DeclarativeCallClient } from '@azure/acs-calling-declarative';
+import { useCallClient } from '@azure/communication-ui';
+
+import { useState, useEffect, useRef } from 'react';
+
+export const useSelector = <SelectorT extends (state: CallClientState, props: any) => any>(
+  selector: SelectorT,
+  selectorProps: Parameters<SelectorT>[1]
+): ReturnType<SelectorT> => {
+  const callClient: DeclarativeCallClient = useCallClient() as any;
+  const [props, setProps] = useState(selector(callClient.state, selectorProps));
+  const propRef = useRef(props);
+  propRef.current = props;
+  useEffect(() => {
+    const onStateChange = (state: CallClientState): void => {
+      const newProps = selector(state, selectorProps);
+      if (propRef.current !== newProps) {
+        setProps(newProps);
+      }
+    };
+    callClient.onStateChange(onStateChange);
+    return () => {
+      callClient.offStateChange(onStateChange);
+    };
+  }, [callClient, selector, selectorProps]);
+  return props;
+};