Merge pull request #1008 from OfficeDev/UpdateInitialize

Update all sample codes to add await and async for initialize function
OfficeDev · Nov 21, 2023 · 96690cd · 96690cd
2 parents c01250f + c23f166
commit 96690cd
Show file tree

Hide file tree

Showing 95 changed files with 633 additions and 550 deletions.
diff --git a/samples/app-anonymous-users/csharp/ClientApp/src/components/app-in-meeting.jsx b/samples/app-anonymous-users/csharp/ClientApp/src/components/app-in-meeting.jsx
@@ -17,8 +17,8 @@ class AppInMeeting extends Component {
     }
 
     // Allows us to execute the React code when the component is already placed in the DOM.
-    componentDidMount() {
-        microsoftTeams.app.initialize();
+    async componentDidMount() {
+        await microsoftTeams.app.initialize();
     }
 
     // Share the content to meeting stage view.

diff --git a/samples/app-anonymous-users/csharp/ClientApp/src/router/router.js b/samples/app-anonymous-users/csharp/ClientApp/src/router/router.js
@@ -3,7 +3,7 @@
 // Licensed under the MIT license.
 // </copyright>
 
-import * as React from "react";
+import React, { useEffect } from 'react';
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import AppInMeeting from "../components/app-in-meeting";
 import Configure from "../components/configure";
@@ -15,10 +15,11 @@ import AuthStart from "../components/auth-start";
 import AuthEnd from "../components/auth-end";
 export const AppRoute = () => {
 
-    React.useEffect(() => {
-        microsoftTeams.app.initialize();
-
-    }, [])
+    useEffect(() => {
+    (async function () {
+        await microsoftTeams.app.initialize();
+        })();
+    }, []);
 
     return (
         <React.Fragment>

diff --git a/samples/app-anonymous-users/nodejs/ClientApp/src/App.js b/samples/app-anonymous-users/nodejs/ClientApp/src/App.js
@@ -3,7 +3,7 @@
 // Licensed under the MIT license.
 // </copyright>
 
-import * as React from "react";
+import React, { useEffect } from 'react';
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import AppInMeeting from "./components/app-in-meeting";
 import Configure from "./components/configure";
@@ -15,10 +15,11 @@ import AuthStart from "./components/auth-start";
 import AuthEnd from "./components/auth-end";
 export const AppRoute = () => {
 
-    React.useEffect(() => {
-        microsoftTeams.app.initialize();
-
-    }, [])
+    useEffect(() => {
+        (async function () {
+            await microsoftTeams.app.initialize();
+        })();
+    }, []);
 
     return (
         <React.Fragment>

diff --git a/samples/app-anonymous-users/nodejs/ClientApp/src/components/app-in-meeting.jsx b/samples/app-anonymous-users/nodejs/ClientApp/src/components/app-in-meeting.jsx
@@ -10,9 +10,11 @@ import { Button } from '@fluentui/react-components';
 const AppInMeeting = () => {
 
  // Allows us to execute the React code when the component is already placed in the DOM.
-    useEffect(() => {
-        microsoftTeams.app.initialize();
-    }, [])
+ useEffect(() => {
+    (async function () {
+        await microsoftTeams.app.initialize();
+    })();
+  }, []);
 
    // Share the content to meeting stage view.
     const shareSpecificPart = () => {

diff --git a/samples/app-anonymous-users/nodejs/ClientApp/src/components/shareview.jsx b/samples/app-anonymous-users/nodejs/ClientApp/src/components/shareview.jsx
@@ -40,14 +40,16 @@ const ShareView = () => {
     const [ssoAuthenticationButtonVisible, setIsSsoAuthenticationButtonVisible] = useState(true);
 
     useEffect(() => {
-        microsoftTeams.app.initialize();
-        verifyAnonymousUser();
+        microsoftTeams.app.initialize().then(() => {
+            verifyAnonymousUser();
+        });
     }, [])
 
     // Builds the socket connection, mapping it to /io
     useEffect(() => {
-        microsoftTeams.app.initialize();
-        setSocket(io());     
+        microsoftTeams.app.initialize().then(() => {
+            setSocket(io());   
+        });  
     }, []);
 
      // subscribe to the socket event

diff --git a/samples/app-auth/nodejs/views/AuthTab.ejs b/samples/app-auth/nodejs/views/AuthTab.ejs
@@ -36,7 +36,8 @@
         crossorigin="anonymous"></script>
 
     <script type="text/javascript">
-        microsoftTeams.app.initialize();
+        microsoftTeams.app.initialize().then(() => {
+        });
 
         // Trying to silently login using SSO
         showUserInformationUsingSSO();

diff --git a/samples/app-auth/nodejs/views/silent-end.ejs b/samples/app-auth/nodejs/views/silent-end.ejs
@@ -3,7 +3,7 @@
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
 <script type="text/javascript">
-    microsoftTeams.app.initialize();
+    microsoftTeams.app.initialize().then(() => {
 
     // MSAL.js configuration
     let msalConfig = {
@@ -33,4 +33,5 @@
             microsoftTeams.authentication.notifyFailure(error);
             return;
         });
+    });    
 </script>
diff --git a/samples/app-complete-auth/csharp/AppCompleteAuth/Pages/config.cshtml b/samples/app-complete-auth/csharp/AppCompleteAuth/Pages/config.cshtml
@@ -10,18 +10,17 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
     <script>
-        microsoftTeams.app.initialize();
-
-        function ssoLogin(){
-            microsoftTeams.authentication.notifySuccess('sso');
-        }
-        function facebookLogin() {
-            microsoftTeams.authentication.notifySuccess('facebooklogin');
-        }
-        function usingCredentialsLogin() {
-
-            microsoftTeams.authentication.notifySuccess('usercredentials');
-        }
+        microsoftTeams.app.initialize().then(() => {
+            function ssoLogin(){
+                microsoftTeams.authentication.notifySuccess('sso');
+            }
+            function facebookLogin() {
+                microsoftTeams.authentication.notifySuccess('facebooklogin');
+            }
+            function usingCredentialsLogin() {
+                microsoftTeams.authentication.notifySuccess('usercredentials');
+            }
+        });
     </script>
 
     <style>

diff --git a/samples/app-complete-auth/csharp/AppCompleteAuth/Pages/facebook-auth-end.cshtml b/samples/app-complete-auth/csharp/AppCompleteAuth/Pages/facebook-auth-end.cshtml
@@ -7,12 +7,13 @@
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
     <script type="text/javascript">
         $(document).ready(function () {
+            microsoftTeams.app.initialize().then(() => {
                 getAuthToken();
+            });
         });
 
         // Get face book client side token.
         function getAuthToken() {
-            microsoftTeams.app.initialize();
             localStorage.removeItem("auth.error");
             let code = getHashParameters();
             let key = "auth.result";

diff --git a/samples/app-complete-auth/csharp/AppCompleteAuth/Pages/popUpSignin.cshtml b/samples/app-complete-auth/csharp/AppCompleteAuth/Pages/popUpSignin.cshtml
@@ -14,75 +14,76 @@
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
     <script>
         var requestFrom;
-         $(document).ready(function () {
+        $(document).ready(function () {
+            microsoftTeams.app.initialize().then(() => {
             const params = window.location.search;
             requestFrom = params.substring(params.search("=")+1);
-        });
+            });
+         });
 
-        microsoftTeams.app.initialize();
+       
+            // Submit user name and password.
+            function submit()
+            {
+                var isValid = true;
+                $('#userName,#password').each(function () {
 
-        // Submit user name and password.
-        function submit()
-        {
-             var isValid = true;
-             $('#userName,#password').each(function () {
-
-                 if ($.trim($(this).val()) == '') {
-                     isValid = false;
-                     $(this).css({
-                         "border": "1px solid red"
-                     });
-                 }
-                 else {
-                     $(this).css({
-                         "border": "",
-                         "background": ""
-                     });
-                 }
-             });
+                    if ($.trim($(this).val()) == '') {
+                        isValid = false;
+                        $(this).css({
+                            "border": "1px solid red"
+                        });
+                    }
+                    else {
+                        $(this).css({
+                            "border": "",
+                            "background": ""
+                        });
+                    }
+                });
 
-             if (isValid == false) {
-                 e.preventDefault();
-                 return false;
-             }
+                if (isValid == false) {
+                    e.preventDefault();
+                    return false;
+                }
 
-             let credentials = {
-                 userName: $('#userName').val(),
-                 password: $('#password').val(),
-             };
+                let credentials = {
+                    userName: $('#userName').val(),
+                    password: $('#password').val(),
+                };
 
-             if(requestFrom == "tab"){
-                 $.ajax({
-                 type: 'POST',
-                 url: '/tabCredentialsAuth',
-                 dataType: 'json',
-                 data: credentials,
-                 success: function (response) {
-                        microsoftTeams.authentication.notifySuccess(response);
-                    },
-                 error: function (xhr, textStatus, errorThrown) {
-                         console.log("textStatus: " + textStatus + ", errorThrown:" + errorThrown);
-                    },
-                });
-             }
-             else if(requestFrom == "msgext"){
-                microsoftTeams.authentication.notifySuccess(JSON.stringify(credentials));
-             }
-             else{
-                 microsoftTeams.authentication.notifySuccess(JSON.stringify(credentials));
-             }
-        } 
+                if(requestFrom == "tab"){
+                    $.ajax({
+                    type: 'POST',
+                    url: '/tabCredentialsAuth',
+                    dataType: 'json',
+                    data: credentials,
+                    success: function (response) {
+                            microsoftTeams.authentication.notifySuccess(response);
+                        },
+                    error: function (xhr, textStatus, errorThrown) {
+                            console.log("textStatus: " + textStatus + ", errorThrown:" + errorThrown);
+                        },
+                    });
+                }
+                else if(requestFrom == "msgext"){
+                    microsoftTeams.authentication.notifySuccess(JSON.stringify(credentials));
+                }
+                else{
+                    microsoftTeams.authentication.notifySuccess(JSON.stringify(credentials));
+                }
+            } 
 
-        // Close auth window.
-        function closeWindow() {
-             microsoftTeams.authentication.notifyFailure({state:"CancelledByUser"});
-        }
+            // Close auth window.
+            function closeWindow() {
+                microsoftTeams.authentication.notifyFailure({state:"CancelledByUser"});
+            }
 
-        function showHint() {
-            var x = document.getElementById("snackbar");
-            x.className = "show";
-            setTimeout(function () { x.className = x.className.replace("show", ""); }, 3000);
-        }
+            function showHint() {
+                var x = document.getElementById("snackbar");
+                x.className = "show";
+                setTimeout(function () { x.className = x.className.replace("show", ""); }, 3000);
+            }
     </script>
 
     <style>

diff --git a/samples/app-complete-auth/csharp/AppCompleteAuth/Pages/tab.cshtml b/samples/app-complete-auth/csharp/AppCompleteAuth/Pages/tab.cshtml
@@ -17,7 +17,7 @@
         let showFbToggle = false;
         let showUserToggle = false;
         let hostClientType;
-        microsoftTeams.app.initialize();
+        
         $(document).ready(function () {
             microsoftTeams.app.initialize().then(() => {
                 microsoftTeams.app.getContext().then((context) => {

diff --git a/samples/app-complete-auth/nodejs/views/AuthTab.ejs b/samples/app-complete-auth/nodejs/views/AuthTab.ejs
@@ -24,7 +24,6 @@
             });
         });
 
-        microsoftTeams.app.initialize();
          ssoAuthentication = () => {
             getClientSideToken()
                 .then((clientSideToken) => {

diff --git a/samples/app-complete-auth/nodejs/views/config.ejs b/samples/app-complete-auth/nodejs/views/config.ejs
@@ -7,7 +7,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
     <script>
-        microsoftTeams.app.initialize();
+      microsoftTeams.app.initialize().then(() => {
         function ssoLogin(){
             microsoftTeams.authentication.notifySuccess('sso');
         }
@@ -17,6 +17,7 @@
         function usingCredentialsLogin() {
             microsoftTeams.authentication.notifySuccess('usercredentials');
         }
+      });
     </script>
 
     <style>

diff --git a/samples/app-complete-auth/nodejs/views/fb-auth.ejs b/samples/app-complete-auth/nodejs/views/fb-auth.ejs
@@ -8,7 +8,8 @@
         integrity="sha384-lIk8T3uMxKqXQVVfFbiw0K/Nq+kt1P3NtGt/pNexiDby2rKU6xnDY8p16gIwKqgI" ,
         crossorigin="anonymous"></script>
     <script>
-        microsoftTeams.app.initialize();
+        microsoftTeams.app.initialize().then(() => {
+        });   
         localStorage.removeItem("auth.error");
         let code = getHashParameters();
         let key = "auth.result";

diff --git a/samples/app-complete-auth/nodejs/views/popUpSignin.ejs b/samples/app-complete-auth/nodejs/views/popUpSignin.ejs
@@ -10,10 +10,11 @@
     <script>
         var requestFrom;
         $(document).ready(function () {
-            const params = window.location.search;
-            requestFrom = params.substring(params.search("=") + 1);
+            microsoftTeams.app.initialize().then(() => {
+                const params = window.location.search;
+                requestFrom = params.substring(params.search("=") + 1);
+            });
         });
-        microsoftTeams.app.initialize();
         function submit() {
             var isValid = true;
             $('#userName,#password').each(function () {

diff --git a/samples/app-complete-sample/csharp/wwwroot/Page/composeExtensionSettings.html b/samples/app-complete-sample/csharp/wwwroot/Page/composeExtensionSettings.html
@@ -14,7 +14,8 @@
     <button onclick="selectHeroCards()">Hero Cards</button>
     <script>
         $(document).ready(function () {
-            microsoftTeams.app.initialize();
+            microsoftTeams.app.initialize().then(() => {
+            });
         });
 
         function selectThumbnailCards() {

diff --git a/samples/app-complete-sample/csharp/wwwroot/Page/popUpSignin.html b/samples/app-complete-sample/csharp/wwwroot/Page/popUpSignin.html
@@ -18,7 +18,8 @@
     <script src="https://res.cdn.office.net/teams-js/2.0.0/js/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
 
     <script>
-        microsoftTeams.app.initialize();
+        microsoftTeams.app.initialize().then(() => {
+        });
         function submit()
         {
             microsoftTeams.authentication.notifySuccess('PopUpSignInAuthenticationSuccess');

diff --git a/...s/app-complete-sample/nodejs/server/public/composeExtension/composeExtensionSettings.html b/...s/app-complete-sample/nodejs/server/public/composeExtension/composeExtensionSettings.html
@@ -12,8 +12,8 @@
     <button onclick="selectThumbnailCards()">Thumbnail Cards</button>
     <button onclick="selectHeroCards()">Hero Cards</button>
     <script>        
-        $(document).ready(function () {
-            microsoftTeams.app.initialize();
+        $(document).ready(async function () {
+            await microsoftTeams.app.initialize();
         });
 
         function selectThumbnailCards() {