Add initial base selector and handler for calling (#179)

* Add initial calling handler selector package setup

* Change files

* Add initial selector and handler

* Change files

* Fix lint

* Address code review comments

* Add initial exports and documentation

change/@azure-acs-calling-selector-65fb0799-15e9-418b-9b09-3fe15a99f98a.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add initial base selector and handler for calling",
+  "packageName": "@azure/acs-calling-selector",
+  "email": "allenhwang@microsoft.com",
+  "dependentChangeType": "patch"
+}

common/config/rush/pnpm-lock.yaml

@@ -22,7 +22,7 @@ dependencies:
   '@octokit/rest': 18.0.15
   '@rollup/plugin-commonjs': 17.1.0_rollup@2.42.4
   '@rush-temp/acs-calling-declarative': file:projects/acs-calling-declarative.tgz_prettier@2.0.5+ts-node@9.1.1
-  '@rush-temp/acs-calling-selector': file:projects/acs-calling-selector.tgz_prettier@2.0.5
+  '@rush-temp/acs-calling-selector': file:projects/acs-calling-selector.tgz_prettier@2.0.5+ts-node@9.1.1
   '@rush-temp/acs-chat-declarative': file:projects/acs-chat-declarative.tgz_prettier@2.0.5+ts-node@9.1.1
   '@rush-temp/acs-chat-selector': file:projects/acs-chat-selector.tgz_prettier@2.0.5+ts-node@9.1.1
   '@rush-temp/build-tools': file:projects/build-tools.tgz_typescript@4.1.5
@@ -38,10 +38,6 @@ dependencies:
   '@storybook/addon-knobs': 6.1.21_30bc4764d4ba778218056aab0be8023f
   '@storybook/addon-links': 6.1.21_react-dom@16.14.0+react@16.14.0
   '@storybook/addon-storyshots': 6.1.21_bf4eba619a81a338b8fdba9794ec01fe
-  '@storybook/addons': 6.2.9_react-dom@16.14.0+react@16.14.0
-  '@storybook/api': 6.2.9_react-dom@16.14.0+react@16.14.0
-  '@storybook/components': 6.2.9_30bc4764d4ba778218056aab0be8023f
-  '@storybook/core-events': 6.2.9
   '@storybook/node-logger': 6.1.21
   '@storybook/react': 6.1.21_4afa15f3c90940bbd828a24f4067472e
   '@storybook/storybook-deployer': 2.8.7
@@ -20640,30 +20636,36 @@ packages:
       integrity: sha512-6WDVzpnjmR2MwCtI1zhNSC+8t40zkB4OZZbi6nF+p/SMwtYGwjl0g8FVF7L9zYL7ENgf6Jdqxs9flYTQ7bMgoQ==
       tarball: file:projects/acs-calling-declarative.tgz
     version: 0.0.0
-  file:projects/acs-calling-selector.tgz_prettier@2.0.5:
+  file:projects/acs-calling-selector.tgz_prettier@2.0.5+ts-node@9.1.1:
     dependencies:
       '@azure/communication-calling': 1.0.1-beta.1
+      '@azure/communication-common': 1.0.0
       '@microsoft/api-documenter': 7.12.12
       '@microsoft/api-extractor': 7.13.2
       '@types/jest': 26.0.22
       '@types/react': 16.14.5
+      '@typescript-eslint/eslint-plugin': 4.18.0_e9e1aa536ec0b34179456e3b69e4968e
+      '@typescript-eslint/parser': 4.18.0_eslint@7.22.0+typescript@4.1.5
       copyfiles: 2.4.1
       eslint: 7.22.0
       eslint-config-prettier: 6.15.0_eslint@7.22.0
       eslint-plugin-header: 3.1.1_eslint@7.22.0
       eslint-plugin-import: 2.22.1_eslint@7.22.0
       eslint-plugin-prettier: 3.3.1_cdac37046eab2e8d6fb794f34ed825c2
+      jest: 26.6.0_ts-node@9.1.1
       memoize-one: 5.1.1
       reselect: 4.0.0
       rollup: 2.42.4
+      ts-jest: 26.5.3_jest@26.6.0+typescript@4.1.5
       typescript: 4.1.5
     dev: false
     id: file:projects/acs-calling-selector.tgz
     name: '@rush-temp/acs-calling-selector'
     peerDependencies:
       prettier: '*'
+      ts-node: '*'
     resolution:
-      integrity: sha512-fTpeDKoc1ila4kJzci4gitfnTici82paTB2p08ZNQXggudZciGa2NvJSpsgBPbFgxlTQFF1fJNtkL/81q1gZ1Q==
+      integrity: sha512-jdKUqrjba5k49khYBUAPVD+uZg0w2bpckz5gKZMYHBBqZAyT43PrYToBwGEAKHRUK1mDTU465Hw1196gpSLUqA==
       tarball: file:projects/acs-calling-selector.tgz
     version: 0.0.0
   file:projects/acs-chat-declarative.tgz_prettier@2.0.5+ts-node@9.1.1:
@@ -21189,7 +21191,7 @@ packages:
     peerDependencies:
       webpack-cli: '*'
     resolution:
-      integrity: sha512-WQdccpypge1hzrxraF5Z5ksMH16aptSM7OdipBEYCK4lwSap3xB54fBOOfnoStnhb9O/Ga2CgkapPERNyaHu7A==
+      integrity: sha512-UlApYfT1mmhLpMrV2E0qILycrKVR65FYQr1A91vpFvVXqFB0fzDTszXnrnWcJQSWNnnSGRCGdZS+ymtdmjo5qw==
       tarball: file:projects/storybook.tgz
     version: 0.0.0
 registry: ''
@@ -21233,10 +21235,6 @@ specifiers:
   '@storybook/addon-knobs': ~6.1.9
   '@storybook/addon-links': ~6.1.1
   '@storybook/addon-storyshots': ~6.1.6
-  '@storybook/addons': ^6.2.5
-  '@storybook/api': ^6.2.5
-  '@storybook/components': ^6.2.5
-  '@storybook/core-events': ^6.2.5
   '@storybook/node-logger': ~6.1.1
   '@storybook/react': ~6.1.1
   '@storybook/storybook-deployer': ~2.8.7

packages/acs-calling-selector/package.json

@@ -33,6 +33,7 @@
   },
   "dependencies": {
     "@azure/acs-calling-declarative": "~1.0.0-beta",
+    "@azure/communication-common": "1.0.0",
     "@azure/communication-calling": "1.0.1-beta.1",
     "reselect": "~4.0.0",
     "memoize-one": "~5.1.1"
@@ -41,14 +42,18 @@
     "@microsoft/api-documenter": "~7.12.11",
     "@microsoft/api-extractor": "~7.13.2",
     "@types/react": "^16.9.49",
+    "@typescript-eslint/eslint-plugin": "^4.12.0",
+    "@typescript-eslint/parser": "^4.12.0",
     "copyfiles": "^2.4.1",
     "eslint": "^7.7.0",
     "eslint-config-prettier": "^6.12.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-header": "^3.1.0",
     "eslint-plugin-import": "^2.20.1",
+    "jest": "26.6.0",
     "rollup": "~2.42.4",
     "typescript": "4.1.5",
+    "ts-jest": "^26.4.4",
     "@types/jest": "~26.0.22"
   },
   "beachball": {

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

@@ -4,8 +4,50 @@
 
 ```ts
 
-// @public (undocumented)
-export const TEMPORARY_EXPORT = "REPLACE THIS";
+import { Call } from '@azure/communication-calling';
+import { CallAgent } from '@azure/communication-calling';
+import { CommunicationUserIdentifier } from '@azure/communication-common';
+import { DeclarativeCallClient } from '@azure/acs-calling-declarative';
+import { DeviceManager } from '@azure/communication-calling';
+import { HangUpOptions } from '@azure/communication-calling';
+import { PhoneNumberIdentifier } from '@azure/communication-common';
+import { ReactElement } from 'react';
+import { StartCallOptions } from '@azure/communication-calling';
+import { UnknownIdentifier } from '@azure/communication-common';
+import { VideoDeviceInfo } from '@azure/communication-calling';
+
+// @public
+export type BaseSelectorProps = {
+    callId: string;
+};
+
+// @public
+export type CallAgentHandlers = {
+    onStartCall(participants: (CommunicationUserIdentifier | PhoneNumberIdentifier | UnknownIdentifier)[], options?: StartCallOptions): Call;
+};
+
+// @public
+export type CallClientHandlers = {
+    getDeviceManager: () => Promise<DeviceManager>;
+};
+
+// @public
+export type CallHandlers = {
+    onHangUp(options?: HangUpOptions): Promise<void>;
+};
+
+// @public
+export type CommonProperties<A, B> = {
+    [P in keyof A & keyof B]: A[P] extends B[P] ? (A[P] extends B[P] ? P : never) : never;
+}[keyof A & keyof B];
+
+// @public
+export const createDefaultHandlersForComponent: <Props>(declarativeCallClient: DeclarativeCallClient, callAgent: CallAgent | undefined, deviceManager: DeviceManager | undefined, call: Call | undefined, _: (props: Props) => ReactElement | null) => Pick<CallClientHandlers & CallAgentHandlers & DeviceManagerHandlers & CallHandlers, CommonProperties<CallClientHandlers & CallAgentHandlers & DeviceManagerHandlers & CallHandlers, Props>> | Pick<CallClientHandlers, CommonProperties<CallClientHandlers, Props>>;
+
+// @public
+export type DeviceManagerHandlers = {
+    getCameras(): Promise<VideoDeviceInfo[]>;
+};
 
 
 // (No @packageDocumentation comment for this package)

packages/acs-calling-selector/src/baseSelectors.ts

@@ -0,0 +1,20 @@
+// © Microsoft Corporation. All rights reserved.
+
+import { Call, CallClientState, DeviceManagerState, IncomingCall } from '@azure/acs-calling-declarative';
+
+/**
+ * Common props used to reference declarative client state.
+ */
+export type BaseSelectorProps = {
+  callId: string;
+};
+
+export const getCalls = (state: CallClientState): Map<string, Call> => state.calls;
+
+export const getCallsEnded = (state: CallClientState): Call[] => state.callsEnded;
+
+export const getIncomingCalls = (state: CallClientState): Map<string, IncomingCall> => state.incomingCalls;
+
+export const getIncomingCallsEnded = (state: CallClientState): IncomingCall[] => state.incomingCallsEnded;
+
+export const getDeviceManager = (state: CallClientState): DeviceManagerState => state.deviceManagerState;

packages/acs-calling-selector/src/handlers/createHandlers.test.ts

@@ -0,0 +1,50 @@
+// © Microsoft Corporation. All rights reserved.
+
+import { CallAgent, CallAgentOptions, DeviceManager } from '@azure/communication-calling';
+import { CommunicationTokenCredential } from '@azure/communication-common';
+import { ReactElement } from 'react';
+import { CallClientHandlers, createDefaultHandlersForComponent } from './createHandlers';
+import { DeclarativeCallClient } from '@azure/acs-calling-declarative';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function TestCallClientComponent(props: CallClientHandlers): ReactElement | null {
+  return null;
+}
+
+class MockCallClient {
+  state: any;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onStateChange(handler: (state: any) => void): void {
+    throw new Error('Method not implemented.');
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  startRenderVideo(callId: string, stream: any, options?: any): Promise<void> {
+    throw new Error('Method not implemented.');
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  stopRenderVideo(callId: string, stream: any): void {
+    throw new Error('Method not implemented.');
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  createCallAgent(tokenCredential: CommunicationTokenCredential, options?: CallAgentOptions): Promise<CallAgent> {
+    throw new Error('Method not implemented.');
+  }
+  getDeviceManager(): Promise<DeviceManager> {
+    throw new Error('Method not implemented.');
+  }
+}
+
+describe('createHandlers', () => {
+  test('creates handlers when only callClient is passed in and others are undefined', async () => {
+    const handlers = createDefaultHandlersForComponent(
+      new MockCallClient() as DeclarativeCallClient,
+      undefined,
+      undefined,
+      undefined,
+      TestCallClientComponent
+    );
+
+    expect(handlers).toBeDefined();
+    expect(Object.keys(handlers).length > 0).toBe(true);
+  });
+});

packages/acs-calling-selector/src/handlers/createHandlers.ts

@@ -0,0 +1,122 @@
+// © Microsoft Corporation. All rights reserved.
+import {
+  CallAgent,
+  DeviceManager,
+  Call,
+  StartCallOptions,
+  HangUpOptions,
+  VideoDeviceInfo
+} from '@azure/communication-calling';
+import { CommunicationUserIdentifier, PhoneNumberIdentifier, UnknownIdentifier } from '@azure/communication-common';
+import { DeclarativeCallClient } from '@azure/acs-calling-declarative';
+import { ReactElement } from 'react';
+import memoizeOne from 'memoize-one';
+
+/**
+ * Defines all handlers associated with {@Link @azure/communication-calling#CallClient}.
+ */
+export type CallClientHandlers = {
+  getDeviceManager: () => Promise<DeviceManager>;
+};
+
+/**
+ * Defines all handlers associated with {@Link @azure/communication-calling#CallAgent}.
+ */
+export type CallAgentHandlers = {
+  onStartCall(
+    participants: (CommunicationUserIdentifier | PhoneNumberIdentifier | UnknownIdentifier)[],
+    options?: StartCallOptions
+  ): Call;
+};
+
+/**
+ * Defines all handlers associated with {@Link @azure/communication-calling#DeviceManager}.
+ */
+export type DeviceManagerHandlers = {
+  getCameras(): Promise<VideoDeviceInfo[]>;
+};
+
+/**
+ * Defines all handlers associated with {@Link @azure/communication-calling#Call}.
+ */
+export type CallHandlers = {
+  onHangUp(options?: HangUpOptions): Promise<void>;
+};
+
+const createCallClientDefaultHandlers = memoizeOne(
+  (declarativeCallClient: DeclarativeCallClient): CallClientHandlers => {
+    return {
+      getDeviceManager: () => declarativeCallClient.getDeviceManager()
+    };
+  }
+);
+
+const createCallAgentDefaultHandlers = memoizeOne(
+  (declarativeCallAgent: CallAgent): CallAgentHandlers => {
+    return {
+      onStartCall: (
+        participants: (CommunicationUserIdentifier | PhoneNumberIdentifier | UnknownIdentifier)[],
+        options?: StartCallOptions
+      ): Call => declarativeCallAgent.startCall(participants, options)
+    };
+  }
+);
+
+const createDeviceManagerDefaultHandlers = memoizeOne(
+  (declarativeDeviceManager: DeviceManager): DeviceManagerHandlers => {
+    return {
+      getCameras: (): Promise<VideoDeviceInfo[]> => declarativeDeviceManager.getCameras()
+    };
+  }
+);
+
+const createCallDefaultHandlers = memoizeOne(
+  (declarativeCall: Call): CallHandlers => {
+    return {
+      onHangUp: (options?: HangUpOptions): Promise<void> => declarativeCall.hangUp(options)
+    };
+  }
+);
+
+/**
+ * Type guard for common properties between two types.
+ */
+export type CommonProperties<A, B> = {
+  [P in keyof A & keyof B]: A[P] extends B[P] ? (A[P] extends B[P] ? P : never) : never;
+}[keyof A & keyof B];
+
+type Common<A, B> = Pick<A, CommonProperties<A, B>>;
+
+/**
+ * Create a set of default handlers for given component. Memoization is applied to the result. Multiple invokations with
+ * the same arguments will return the same handler instances. DeclarativeCallAgent, DeclarativeDeviceManager, and
+ * DeclarativeCall may be undefined. If undefined, their associated handlers will not be created and returned.
+ *
+ * @param declarativeCallClient - DeclarativeCallClient returned from
+ *   {@Link @azure/acs-calling-declarative#callClientDeclaratify}.
+ * @param callAgent - Instance of {@Link @azure/communication-calling#CallClient}.
+ * @param deviceManager - Instance of {@Link @azure/communication-calling#DeviceManager}.
+ * @param call - Instance of {@Link @azure/communication-calling#Call}.
+ * @param _ - React component that you want to generate handlers for.
+ * @returns
+ */
+export const createDefaultHandlersForComponent = <Props>(
+  declarativeCallClient: DeclarativeCallClient,
+  callAgent: CallAgent | undefined,
+  deviceManager: DeviceManager | undefined,
+  call: Call | undefined,
+  _: (props: Props) => ReactElement | null
+):
+  | Common<CallClientHandlers & CallAgentHandlers & DeviceManagerHandlers & CallHandlers, Props>
+  | Common<CallClientHandlers, Props> => {
+  const callClientHandlers = createCallClientDefaultHandlers(declarativeCallClient);
+  const callAgentHandlers = callAgent ? createCallAgentDefaultHandlers(callAgent) : undefined;
+  const deviceManagerHandlers = deviceManager ? createDeviceManagerDefaultHandlers(deviceManager) : undefined;
+  const callHandlers = call ? createCallDefaultHandlers(call) : undefined;
+  return {
+    ...callClientHandlers,
+    ...callAgentHandlers,
+    ...deviceManagerHandlers,
+    ...callHandlers
+  };
+};

packages/acs-calling-selector/src/index.ts

@@ -1,2 +1,10 @@
 // © Microsoft Corporation. All rights reserved.
-export const TEMPORARY_EXPORT = 'REPLACE THIS';
+export { createDefaultHandlersForComponent } from './handlers/createHandlers';
+export type { BaseSelectorProps } from './baseSelectors';
+export type {
+  CallClientHandlers,
+  CallAgentHandlers,
+  DeviceManagerHandlers,
+  CallHandlers,
+  CommonProperties
+} from './handlers/createHandlers';