Fix react render tracker (#5087)

Azure · Sep 3, 2024 · 411c02d · 411c02d
1 parent 40ce647
commit 411c02d
Show file tree

Hide file tree

Showing 10 changed files with 43 additions and 58 deletions.
diff --git a/samples/CallWithChat/public/index.html b/samples/CallWithChat/public/index.html
@@ -1,13 +1,26 @@
 <!-- Copyright (c) Microsoft Corporation. -->
 <!-- Licensed under the MIT License. -->
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="Azure Communication Services - UI Library: Call With Chat Sample app" />
     <title>UI Library Call With Chat Sample</title>
+
+    <!-- Used for debugging only -->
+    <script type="text/javascript">
+      const urlParams = new URLSearchParams(window.location.search);
+      const isEnabled = urlParams.get('rrt');
+      if (isEnabled !== 'true') {
+        return;
+      }
+
+      const script = document.createElement('script');
+      script.src = 'https://cdn.jsdelivr.net/npm/react-render-tracker';
+      document.head.appendChild(script);
+    </script>
   </head>
 
   <body>

diff --git a/samples/CallWithChat/src/app/utils/AppUtils.ts b/samples/CallWithChat/src/app/utils/AppUtils.ts
@@ -23,21 +23,6 @@ export const fetchTokenResponse = async (): Promise<any> => {
   throw 'Invalid token response';
 };
 
-/**
- * Init React Render Tracker whenever it detects the query param 'rrt' is set to true.
- */
-export const initReactRenderTracker = (): void => {
-  const urlParams = new URLSearchParams(window.location.search);
-  const isEnabled = urlParams.get('rrt');
-  if (isEnabled !== 'true') {
-    return;
-  }
-
-  const script = document.createElement('script');
-  script.src = 'https://cdn.jsdelivr.net/npm/react-render-tracker';
-  document.head.appendChild(script);
-};
-
 /**
  * Get group id from the url's query params.
  */

diff --git a/samples/CallWithChat/src/index.tsx b/samples/CallWithChat/src/index.tsx
@@ -7,15 +7,12 @@ import './index.css';
 import App from './app/App';
 import { SwitchableFluentThemeProvider } from './app/theming/SwitchableFluentThemeProvider';
 import { ShakeToSendLogs } from './app/utils/ShakeToSendLogs';
-import { initReactRenderTracker } from './app/utils/AppUtils';
 
 const domNode = document.getElementById('root');
 if (!domNode) {
   throw new Error('Failed to find the root element');
 }
 
-initReactRenderTracker();
-
 createRoot(domNode).render(
   <React.StrictMode>
     <SwitchableFluentThemeProvider scopeId="SampleCallWithChatApp">

diff --git a/samples/Calling/public/index.html b/samples/Calling/public/index.html
@@ -1,13 +1,26 @@
 <!-- Copyright (c) Microsoft Corporation. -->
 <!-- Licensed under the MIT License. -->
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="Azure Communication Services - UI Library: Calling Sample app" />
     <title>UI Library Calling Sample</title>
+
+    <!-- Used for debugging only -->
+    <script type="text/javascript">
+      const urlParams = new URLSearchParams(window.location.search);
+      const isEnabled = urlParams.get('rrt');
+      if (isEnabled !== 'true') {
+        return;
+      }
+
+      const script = document.createElement('script');
+      script.src = 'https://cdn.jsdelivr.net/npm/react-render-tracker';
+      document.head.appendChild(script);
+    </script>
   </head>
 
   <body>

diff --git a/samples/Calling/src/app/utils/AppUtils.ts b/samples/Calling/src/app/utils/AppUtils.ts
@@ -39,21 +39,6 @@ export const getGroupIdFromUrl = (): GroupLocator | undefined => {
   return gid ? { groupId: gid } : undefined;
 };
 
-/**
- * Init React Render Tracker whenever it detects the query param 'rrt' is set to true.
- */
-export const initReactRenderTracker = (): void => {
-  const urlParams = new URLSearchParams(window.location.search);
-  const isEnabled = urlParams.get('rrt');
-  if (isEnabled !== 'true') {
-    return;
-  }
-
-  const script = document.createElement('script');
-  script.src = 'https://cdn.jsdelivr.net/npm/react-render-tracker';
-  document.head.appendChild(script);
-};
-
 export const createGroupId = (): GroupLocator => ({ groupId: generateGUID() });
 
 /**

diff --git a/samples/Calling/src/app/views/HomeScreen.tsx b/samples/Calling/src/app/views/HomeScreen.tsx
@@ -79,7 +79,7 @@ type ICallChoiceGroupOption = IChoiceGroupOption & { key: CallOption };
 
 export const HomeScreen = (props: HomeScreenProps): JSX.Element => {
   const imageProps = { src: heroSVG.toString() };
-  const headerTitle = props.joiningExistingCall ? 'Join Call' : 'Start or join a call';
+  const headerTitle = props.joiningExistingCall ? 'Join Call' : 'Start or join a call!';
   const callOptionsGroupLabel = 'Select a call option';
   const buttonText = 'Next';
   const callOptions: ICallChoiceGroupOption[] = [

diff --git a/samples/Calling/src/index.tsx b/samples/Calling/src/index.tsx
@@ -7,15 +7,12 @@ import './index.css';
 import App from './app/App';
 import { SwitchableFluentThemeProvider } from './app/theming/SwitchableFluentThemeProvider';
 import { ShakeToSendLogs } from './app/utils/ShakeToSendLogs';
-import { initReactRenderTracker } from './app/utils/AppUtils';
 
 const domNode = document.getElementById('root');
 if (!domNode) {
   throw new Error('Failed to find the root element');
 }
 
-initReactRenderTracker();
-
 createRoot(domNode).render(
   <React.StrictMode>
     <SwitchableFluentThemeProvider scopeId="SampleCallingApp">

diff --git a/samples/Chat/public/index.html b/samples/Chat/public/index.html
@@ -1,14 +1,27 @@
 <!-- Copyright (c) Microsoft Corporation. -->
 <!-- Licensed under the MIT License. -->
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Web site created using create-react-app" />
     <title>ACS Chat Sample App</title>
+
+    <!-- Used for debugging only -->
+    <script type="text/javascript">
+      const urlParams = new URLSearchParams(window.location.search);
+      const isEnabled = urlParams.get('rrt');
+      if (isEnabled !== 'true') {
+        return;
+      }
+
+      const script = document.createElement('script');
+      script.src = 'https://cdn.jsdelivr.net/npm/react-render-tracker';
+      document.head.appendChild(script);
+    </script>
   </head>
   <body>
     <div id="root" class="Root"></div>

diff --git a/samples/Chat/src/app/utils/utils.ts b/samples/Chat/src/app/utils/utils.ts
@@ -49,18 +49,3 @@ export const getBackgroundColor = (avatar: string): { backgroundColor: string }
       };
   }
 };
-
-/**
- * Init React Render Tracker whenever it detects the query param 'rrt' is set to true.
- */
-export const initReactRenderTracker = (): void => {
-  const urlParams = new URLSearchParams(window.location.search);
-  const isEnabled = urlParams.get('rrt');
-  if (isEnabled !== 'true') {
-    return;
-  }
-
-  const script = document.createElement('script');
-  script.src = 'https://cdn.jsdelivr.net/npm/react-render-tracker';
-  document.head.appendChild(script);
-};
diff --git a/samples/Chat/src/index.tsx b/samples/Chat/src/index.tsx
@@ -7,15 +7,12 @@ import './index.css';
 import App from './app/App';
 import { SwitchableFluentThemeProvider } from './app/theming/SwitchableFluentThemeProvider';
 import { ShakeToSendLogs } from './app/utils/ShakeToSendLogs';
-import { initReactRenderTracker } from './app/utils/utils';
 
 const domNode = document.getElementById('root');
 if (!domNode) {
   throw new Error('Failed to find the root element');
 }
 
-initReactRenderTracker();
-
 createRoot(domNode).render(
   <React.StrictMode>
     <SwitchableFluentThemeProvider scopeId="SampleChatApp">