[Bug Fix] Fix issue where Call with Chat adapter would create multiple clients (#3676)

* remove old logic for open in other tab

* fix cwc adapter hook multi create

* Change files

* Duplicate change files for beta release

* remove commented code

* remove commented code

Author: dmceachernmsft

change-beta/@azure-communication-react-fce477ed-15d0-425f-8f5b-5e638c578e8f.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Bug fix",
+  "comment": "Fix Call with Chat adapter creation hook to handle multiple invokations.",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-fce477ed-15d0-425f-8f5b-5e638c578e8f.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Bug fix",
+  "comment": "Fix Call with Chat adapter creation hook to handle multiple invokations.",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-composites/src/composites/CallWithChatComposite/adapter/AzureCommunicationCallWithChatAdapter.ts

@@ -849,6 +849,7 @@ export const useAzureCommunicationCallWithChatAdapter = (
   const [adapter, setAdapter] = useState<CallWithChatAdapter | undefined>(undefined);
   // Ref needed for cleanup to access the old adapter created asynchronously.
   const adapterRef = useRef<CallWithChatAdapter | undefined>(undefined);
+  const creatingAdapterRef = useRef<boolean>(false);
 
   const afterCreateRef = useRef<((adapter: CallWithChatAdapter) => Promise<CallWithChatAdapter>) | undefined>(
     undefined
@@ -879,7 +880,13 @@ export const useAzureCommunicationCallWithChatAdapter = (
           adapterRef.current.dispose();
           adapterRef.current = undefined;
         }
-
+        if (creatingAdapterRef.current) {
+          console.warn(
+            'Adapter is already being created, please see storybook for more information: https://azure.github.io/communication-ui-library/?path=/story/troubleshooting--page'
+          );
+          return;
+        }
+        creatingAdapterRef.current = true;
         let newAdapter = await createAzureCommunicationCallWithChatAdapter({
           credential,
           displayName,

samples/CallWithChat/src/app/App.tsx

@@ -29,9 +29,6 @@ import { joinThread } from './utils/joinThread';
 import { getThread } from './utils/getThread';
 import { getExistingThreadIdFromURL } from './utils/getThreadId';
 import { WEB_APP_TITLE } from './utils/constants';
-import { useSecondaryInstanceCheck } from './utils/useSecondaryInstanceCheck';
-import { PageOpenInAnotherTab } from './views/PageOpenInAnotherTab';
-import { useIsMobile } from './utils/useIsMobile';
 /* @conditional-compile-remove(PSTN-calls) */
 import { CallParticipantsLocator } from '@azure/communication-react';
 
@@ -58,12 +55,6 @@ console.log(
 const App = (): JSX.Element => {
   const [page, setPage] = useState<AppPages>('home');
   const [callWithChatArgs, setCallWithChatArgs] = useState<CallWithChatArgs | undefined>(undefined);
-  const isMobileSession = useIsMobile();
-  const isAppAlreadyRunningInAnotherTab = useSecondaryInstanceCheck();
-
-  if (isMobileSession && isAppAlreadyRunningInAnotherTab) {
-    return <PageOpenInAnotherTab />;
-  }
 
   if (isOnIphoneAndNotSafari()) {
     return <UnsupportedBrowserPage />;

samples/CallWithChat/src/app/utils/useSecondaryInstanceCheck.ts

@@ -31,11 +31,9 @@ import { getOutboundParticipants } from './utils/AppUtils';
 /* @conditional-compile-remove(rooms) */
 import { createRoom, getRoomIdFromUrl, addUserToRoom } from './utils/AppUtils';
 import { useIsMobile } from './utils/useIsMobile';
-import { useSecondaryInstanceCheck } from './utils/useSecondaryInstanceCheck';
 import { CallError } from './views/CallError';
 import { CallScreen } from './views/CallScreen';
 import { HomeScreen } from './views/HomeScreen';
-import { PageOpenInAnotherTab } from './views/PageOpenInAnotherTab';
 import { UnsupportedBrowserPage } from './views/UnsupportedBrowserPage';
 
 setLogLevel('verbose');
@@ -84,18 +82,13 @@ const App = (): JSX.Element => {
 
   const isMobileSession = useIsMobile();
   const isLandscapeSession = isLandscape();
-  const isAppAlreadyRunningInAnotherTab = useSecondaryInstanceCheck();
 
   useEffect(() => {
     if (isMobileSession && isLandscapeSession) {
       console.log('ACS Calling sample: Mobile landscape view is experimental behavior');
     }
   }, [isMobileSession, isLandscapeSession]);
 
-  if (isMobileSession && isAppAlreadyRunningInAnotherTab) {
-    return <PageOpenInAnotherTab />;
-  }
-
   const supportedBrowser = !isOnIphoneAndNotSafari();
   if (!supportedBrowser) {
     return <UnsupportedBrowserPage />;