Updated dependencies

Also fixed issue reported in #41

Author: jasonjoh

demo/graph-tutorial/package-lock.json

@@ -3,26 +3,26 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.12.1",
+    "@fortawesome/fontawesome-free": "^5.13.1",
     "@microsoft/microsoft-graph-client": "^2.0.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "@types/jest": "^24.0.0",
-    "@types/microsoft-graph": "^1.12.0",
+    "@types/microsoft-graph": "^1.13.0",
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
-    "@types/react-router-dom": "^5.1.3",
-    "@types/reactstrap": "^8.4.2",
-    "bootstrap": "^4.4.1",
-    "moment": "^2.24.0",
-    "msal": "^1.2.1",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
-    "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.0",
-    "reactstrap": "^8.4.1",
+    "@types/react-router-dom": "^5.1.5",
+    "@types/reactstrap": "^8.5.0",
+    "bootstrap": "^4.5.0",
+    "moment": "^2.27.0",
+    "msal": "^1.3.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "3.4.1",
+    "reactstrap": "^8.5.1",
     "typescript": "~3.7.2"
   },
   "scripts": {

demo/graph-tutorial/package.json

@@ -26,7 +26,7 @@ class App extends Component<AuthComponentProps> {
           <NavBar
             isAuthenticated={this.props.isAuthenticated}
             authButtonMethod={this.props.isAuthenticated ? this.props.logout : this.props.login}
-            user={this.props.user}/>
+            user={this.props.user} />
           <Container>
             {error}
             <Route exact path="/"

demo/graph-tutorial/src/App.tsx

@@ -23,7 +23,7 @@ interface AuthProviderState {
 }
 
 export default function withAuthProvider<T extends React.Component<AuthComponentProps>>
-  (WrappedComponent: new(props: AuthComponentProps, context?: any) => T): React.ComponentClass {
+  (WrappedComponent: new (props: AuthComponentProps, context?: any) => T): React.ComponentClass {
   return class extends React.Component<any, AuthProviderState> {
     private userAgentApplication: UserAgentApplication;
 
@@ -38,12 +38,12 @@ export default function withAuthProvider<T extends React.Component<AuthComponent
       // Initialize the MSAL application object
       this.userAgentApplication = new UserAgentApplication({
         auth: {
-            clientId: config.appId,
-            redirectUri: config.redirectUri
+          clientId: config.appId,
+          redirectUri: config.redirectUri
         },
         cache: {
-            cacheLocation: "sessionStorage",
-            storeAuthStateInCookie: true
+          cacheLocation: "sessionStorage",
+          storeAuthStateInCookie: true
         }
       });
     }
@@ -61,28 +61,28 @@ export default function withAuthProvider<T extends React.Component<AuthComponent
 
     render() {
       return <WrappedComponent
-        error = { this.state.error }
-        isAuthenticated = { this.state.isAuthenticated }
-        user = { this.state.user }
-        login = { () => this.login() }
-        logout = { () => this.logout() }
-        getAccessToken = { (scopes: string[]) => this.getAccessToken(scopes)}
-        setError = { (message: string, debug: string) => this.setErrorMessage(message, debug)}
-        {...this.props} {...this.state} />;
+        error={this.state.error}
+        isAuthenticated={this.state.isAuthenticated}
+        user={this.state.user}
+        login={() => this.login()}
+        logout={() => this.logout()}
+        getAccessToken={(scopes: string[]) => this.getAccessToken(scopes)}
+        setError={(message: string, debug: string) => this.setErrorMessage(message, debug)}
+        {...this.props} />;
     }
 
     async login() {
       try {
         // Login via popup
         await this.userAgentApplication.loginPopup(
-            {
-              scopes: config.scopes,
-              prompt: "select_account"
+          {
+            scopes: config.scopes,
+            prompt: "select_account"
           });
         // After login, get the user's profile
         await this.getUserProfile();
       }
-      catch(err) {
+      catch (err) {
         this.setState({
           isAuthenticated: false,
           user: {},
@@ -151,13 +151,13 @@ export default function withAuthProvider<T extends React.Component<AuthComponent
 
     setErrorMessage(message: string, debug: string) {
       this.setState({
-        error: {message: message, debug: debug}
+        error: { message: message, debug: debug }
       });
     }
 
     normalizeError(error: string | Error): any {
       var normalizedError = {};
-      if (typeof(error) === 'string') {
+      if (typeof (error) === 'string') {
         var errParts = error.split('|');
         normalizedError = errParts.length > 1 ?
           { message: errParts[1], debug: errParts[0] } :

demo/graph-tutorial/src/AuthProvider.tsx

@@ -1,3 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
 import React from 'react';
 import { Table } from 'reactstrap';
 import moment from 'moment';
@@ -33,9 +35,9 @@ class Calendar extends React.Component<AuthComponentProps, CalendarState> {
       // Get the user's events
       var events = await getEvents(accessToken);
       // Update the array of events in state
-      this.setState({events: events.value});
+      this.setState({ events: events.value });
     }
-    catch(err) {
+    catch (err) {
       this.props.setError('ERROR', JSON.stringify(err));
     }
   }

demo/graph-tutorial/src/Calendar.tsx

@@ -6,8 +6,8 @@ import React from 'react';
 import { Alert } from 'reactstrap';
 
 interface ErrorMessageProps {
-  debug : string;
-  message : string;
+  debug: string;
+  message: string;
 }
 
 export default class ErrorMessage extends React.Component<ErrorMessageProps> {

demo/graph-tutorial/src/ErrorMessage.tsx

@@ -17,32 +17,33 @@ import {
   UncontrolledDropdown,
   DropdownToggle,
   DropdownMenu,
-  DropdownItem } from 'reactstrap';
+  DropdownItem
+} from 'reactstrap';
 import '@fortawesome/fontawesome-free/css/all.css';
 
 interface NavBarProps {
-  isAuthenticated : boolean;
-  authButtonMethod : any;
-  user : any;
+  isAuthenticated: boolean;
+  authButtonMethod: any;
+  user: any;
 }
 
 interface NavBarState {
-  isOpen : boolean;
+  isOpen: boolean;
 }
 
 function UserAvatar(props: any) {
   // If a user avatar is available, return an img tag with the pic
   if (props.user.avatar) {
     return <img
-            src={props.user.avatar} alt="user"
-            className="rounded-circle align-self-center mr-2"
-            style={{width: '32px'}}></img>;
+      src={props.user.avatar} alt="user"
+      className="rounded-circle align-self-center mr-2"
+      style={{ width: '32px' }}></img>;
   }
 
   // No avatar available, return a default icon
   return <i
-          className="far fa-user-circle fa-lg rounded-circle align-self-center mr-2"
-          style={{width: '32px'}}></i>;
+    className="far fa-user-circle fa-lg rounded-circle align-self-center mr-2"
+    style={{ width: '32px' }}></i>;
 }
 
 function AuthNavItem(props: NavBarProps) {
@@ -52,7 +53,7 @@ function AuthNavItem(props: NavBarProps) {
     return (
       <UncontrolledDropdown>
         <DropdownToggle nav caret>
-          <UserAvatar user={props.user}/>
+          <UserAvatar user={props.user} />
         </DropdownToggle>
         <DropdownMenu right>
           <h5 className="dropdown-item-text mb-0">{props.user.displayName}</h5>

demo/graph-tutorial/src/NavBar.tsx

@@ -5,16 +5,17 @@
 import React from 'react';
 import {
   Button,
-  Jumbotron } from 'reactstrap';
+  Jumbotron
+} from 'reactstrap';
 
 interface WelcomeProps {
-  isAuthenticated : boolean;
-  authButtonMethod : any;
-  user : any;
+  isAuthenticated: boolean;
+  authButtonMethod: any;
+  user: any;
 }
 
 interface WelcomeState {
-  isOpen : boolean;
+  isOpen: boolean;
 }
 
 function WelcomeContent(props: WelcomeProps) {
@@ -38,7 +39,7 @@ export default class Welcome extends React.Component<WelcomeProps, WelcomeState>
       <Jumbotron>
         <h1>React Graph Tutorial</h1>
         <p className="lead">
-            This sample app shows how to use the Microsoft Graph API to access Outlook and OneDrive data from React
+          This sample app shows how to use the Microsoft Graph API to access Outlook and OneDrive data from React
         </p>
         <WelcomeContent
           isAuthenticated={this.props.isAuthenticated}

demo/graph-tutorial/src/Welcome.tsx

@@ -4,7 +4,12 @@ import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.