Completed add MS Graph step

Author: jasonjoh

demo/graph-tutorial/package-lock.json

@@ -9,6 +9,7 @@
     "@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/node": "^12.0.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",

demo/graph-tutorial/package.json

@@ -7,6 +7,7 @@ import { UserAgentApplication } from 'msal';
 import NavBar from './NavBar';
 import ErrorMessage from './ErrorMessage';
 import Welcome from './Welcome';
+import Calendar from './Calendar';
 import { config } from './Config';
 import { getUserDetails } from './GraphService';
 import 'bootstrap/dist/css/bootstrap.css';
@@ -30,7 +31,7 @@ class App extends Component<any, AppState> {
           redirectUri: config.redirectUri
       },
       cache: {
-          cacheLocation: "localStorage",
+          cacheLocation: "sessionStorage",
           storeAuthStateInCookie: true
       }
     });
@@ -73,6 +74,11 @@ class App extends Component<any, AppState> {
                   user={this.state.user}
                   authButtonMethod={this.login.bind(this)} />
               } />
+            <Route exact path="/calendar"
+              render={(props) =>
+                <Calendar {...props}
+                  showError={this.setErrorMessage.bind(this)} />
+              } />
           </Container>
         </div>
       </Router>
@@ -126,6 +132,7 @@ class App extends Component<any, AppState> {
   }
   // </logoutSnippet>
 
+  // <getUserProfileSnippet>
   async getUserProfile() {
     try {
       // Get the access token silently
@@ -171,6 +178,7 @@ class App extends Component<any, AppState> {
       });
     }
   }
+  // </getUserProfileSnippet>
 }
 
 export default App;

demo/graph-tutorial/src/App.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Table } from 'reactstrap';
+import moment from 'moment';
+import { UserAgentApplication } from 'msal';
+import { Event } from 'microsoft-graph';
+import { config } from './Config';
+import { getEvents } from './GraphService';
+
+interface CalendarProps {
+  showError: any;
+}
+
+interface CalendarState {
+  events: Event[];
+}
+
+// Helper function to format Graph date/time
+function formatDateTime(dateTime: string | undefined) {
+  if (dateTime !== undefined) {
+    return moment.utc(dateTime).local().format('M/D/YY h:mm A');
+  }
+}
+
+export default class Calendar extends React.Component<CalendarProps, CalendarState> {
+  constructor(props: any) {
+    super(props);
+
+    this.state = {
+      events: []
+    };
+  }
+
+  async componentDidMount() {
+    try {
+      // Get the user's access token
+      const msal = window.msal as UserAgentApplication;
+
+      var accessToken = await msal.acquireTokenSilent({
+        scopes: config.scopes
+      });
+      // Get the user's events
+      var events = await getEvents(accessToken.accessToken);
+      // Update the array of events in state
+      this.setState({events: events.value});
+    }
+    catch(err) {
+      this.props.showError('ERROR', JSON.stringify(err));
+    }
+  }
+
+  // <renderSnippet>
+  render() {
+    return (
+      <div>
+        <h1>Calendar</h1>
+        <Table>
+          <thead>
+            <tr>
+              <th scope="col">Organizer</th>
+              <th scope="col">Subject</th>
+              <th scope="col">Start</th>
+              <th scope="col">End</th>
+            </tr>
+          </thead>
+          <tbody>
+            {this.state.events.map(
+              function(event: Event){
+                return(
+                  <tr key={event.id}>
+                    <td>{event.organizer?.emailAddress?.name}</td>
+                    <td>{event.subject}</td>
+                    <td>{formatDateTime(event.start?.dateTime)}</td>
+                    <td>{formatDateTime(event.end?.dateTime)}</td>
+                  </tr>
+                );
+              })}
+          </tbody>
+        </Table>
+      </div>
+    );
+  }
+  // </renderSnippet>
+}

demo/graph-tutorial/src/Calendar.tsx

@@ -23,4 +23,18 @@ export async function getUserDetails(accessToken: string) {
   const user = await client.api('/me').get();
   return user;
 }
-// </graphServiceSnippet1>
+// </graphServiceSnippet1>
+
+// <getEventsSnippet>
+export async function getEvents(accessToken: string) {
+  const client = getAuthenticatedClient(accessToken);
+
+  const events = await client
+    .api('/me/events')
+    .select('subject,organizer,start,end')
+    .orderby('createdDateTime DESC')
+    .get();
+
+  return events;
+}
+// </getEventsSnippet>

demo/graph-tutorial/src/GraphService.ts

@@ -32,7 +32,7 @@ Run the following command in your CLI.
 
 ```Shell
 npm install react-router-dom@5.1.2 @types/react-router-dom@5.1.3 bootstrap@4.4.1 reactstrap@8.4.1 @types/reactstrap@8.4.2
-npm install @fortawesome/fontawesome-free@5.12.1 moment@2.24.0 msal@1.2.1 @microsoft/microsoft-graph-client@2.0.0
+npm install @fortawesome/fontawesome-free@5.12.1 moment@2.24.0 msal@1.2.1 @microsoft/microsoft-graph-client@2.0.0 @types/microsoft-graph@1.12.0
 ```
 
 ## Design the app