Alkwa/use one call client (#71)

* use one call client

* useCallback instead of useMemo for the handler

* prettier fixes

Calling/ClientApp/src/App.tsx

@@ -1,5 +1,5 @@
 // © Microsoft Corporation. All rights reserved.
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import GroupCall from './containers/GroupCall';
 import { createStore, applyMiddleware } from 'redux';
 import { Provider } from 'react-redux';
@@ -27,6 +27,8 @@ const App = (): JSX.Element => {
   const [screenWidth, setScreenWidth] = useState(0);
   const [localVideoStream, setLocalVideoStream] = useState(undefined);
 
+  const unsupportedStateHandler = useCallback((): void => setPage('unsupported'), []);
+
   useEffect(() => {
     const setWindowWidth = (): void => {
       const width = typeof window !== 'undefined' ? window.innerWidth : 0;
@@ -63,7 +65,7 @@ const App = (): JSX.Element => {
       return (
         <ConfigurationScreen
           startCallHandler={(): void => setPage('call')}
-          unsupportedStateHandler={(): void => setPage('unsupported')}
+          unsupportedStateHandler={unsupportedStateHandler}
           callEndedHandler={(errorMsg: CallEndReason): void => {
             setCallEndReason(errorMsg);
             setPage('error');

Calling/ClientApp/src/components/Configuration.tsx

@@ -1,6 +1,6 @@
 // © Microsoft Corporation. All rights reserved.
 
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Stack, Spinner, PrimaryButton } from '@fluentui/react';
 import LocalPreview from './LocalPreview';
 import LocalSettings from './LocalSettings';
@@ -78,9 +78,12 @@ export default (props: ConfigurationScreenProps): JSX.Element => {
 
   const { groupId, setupCallClient, setGroup, unsupportedStateHandler } = props;
 
+  const memoizedSetupCallClient = useCallback(() => setupCallClient(unsupportedStateHandler), [
+    unsupportedStateHandler
+  ]);
   useEffect(() => {
-    setupCallClient(unsupportedStateHandler);
-  }, [setupCallClient, unsupportedStateHandler]);
+    memoizedSetupCallClient();
+  }, [memoizedSetupCallClient]);
 
   return (
     <Stack className={mainContainerStyle} horizontalAlign="center" verticalAlign="center">

Calling/ClientApp/src/containers/Configuration.ts

@@ -10,7 +10,6 @@ import {
   VideoDeviceInfo,
   LocalVideoStream,
   CallAgent,
-  CallClient,
   CallEndReason
 } from '@azure/communication-calling';
 import { CommunicationUserToken } from '@azure/communication-identity';
@@ -67,7 +66,12 @@ const mapStateToProps = (state: State, props: ConfigurationScreenProps) => ({
     tokenCredential: AzureCommunicationTokenCredential,
     displayName: string
   ): Promise<CallAgent> => {
-    const callClient = new CallClient();
+    const callClient = state.sdk.callClient;
+
+    if (callClient === undefined) {
+      throw new Error('CallClient is not initialized');
+    }
+
     const callAgent: CallAgent = await callClient.createCallAgent(tokenCredential, { displayName });
     return callAgent;
   }

Calling/ClientApp/src/core/actions/sdk.ts

@@ -1,11 +1,19 @@
+import { CallClient } from '@azure/communication-calling';
+
 const SET_USERID = 'SET_USERID';
+const SET_CALL_CLIENT = 'SET_CALL_CLIENT';
 const SET_DISPLAY_NAME = 'SET_DISPLAY_NAME';
 
 interface SetUserIdAction {
   type: typeof SET_USERID;
   userId: string;
 }
 
+interface SetCallClient {
+  type: typeof SET_CALL_CLIENT;
+  callClient: CallClient;
+}
+
 interface SetDisplayNameAction {
   type: typeof SET_DISPLAY_NAME;
   displayName: string;
@@ -18,13 +26,20 @@ export const setUserId = (userId: string): SetUserIdAction => {
   };
 };
 
+export const setCallClient = (callClient: CallClient): SetCallClient => {
+  return {
+    type: SET_CALL_CLIENT,
+    callClient
+  };
+};
+
 export const setDisplayName = (displayName: string): SetDisplayNameAction => {
   return {
     type: SET_DISPLAY_NAME,
     displayName
   };
 };
 
-export { SET_USERID, SET_DISPLAY_NAME };
+export { SET_USERID, SET_CALL_CLIENT, SET_DISPLAY_NAME };
 
-export type SdkTypes = SetUserIdAction | SetDisplayNameAction;
+export type SdkTypes = SetUserIdAction | SetCallClient | SetDisplayNameAction;

Calling/ClientApp/src/core/reducers/sdk.ts

@@ -1,8 +1,10 @@
+import { CallClient } from '@azure/communication-calling';
 import { Reducer } from 'redux';
-import { SET_USERID, SdkTypes, SET_DISPLAY_NAME } from '../actions/sdk';
+import { SET_USERID, SdkTypes, SET_CALL_CLIENT, SET_DISPLAY_NAME } from '../actions/sdk';
 
 export interface SdkState {
   userId?: string;
+  callClient?: CallClient;
   displayName: string;
 }
 
@@ -14,6 +16,8 @@ export const sdkReducer: Reducer<SdkState, SdkTypes> = (state = initialState, ac
   switch (action.type) {
     case SET_USERID:
       return { ...state, userId: action.userId };
+    case SET_CALL_CLIENT:
+      return { ...state, callClient: action.callClient };
     case SET_DISPLAY_NAME:
       return { ...state, displayName: action.displayName };
     default:

Calling/ClientApp/src/core/sideEffects.ts

@@ -32,7 +32,7 @@ import { State } from './reducers';
 import { setLogLevel } from '@azure/logger';
 import RemoteStreamSelector from './RemoteStreamSelector';
 import { Constants } from './constants';
-import { setUserId } from './actions/sdk';
+import { setCallClient, setUserId } from './actions/sdk';
 
 export const setMicrophone = (mic: boolean) => {
   return async (dispatch: Dispatch, getState: () => State): Promise<void> => {
@@ -309,7 +309,7 @@ export const initCallClient = (unsupportedStateHandler: () => void) => {
     }
 
     const deviceManager: DeviceManager = await callClient.getDeviceManager();
-
+    dispatch(setCallClient(callClient));
     dispatch(setDeviceManager(deviceManager));
     subscribeToDeviceManager(deviceManager, dispatch, getState);
   };