Merge pull request #68 from microsoftgraph/refresh

Recreated tutorial with latest create-react-app

Author: jasonjoh

demo/graph-tutorial/README.md

@@ -1,3 +1,5 @@
+# Getting Started with Create React App
+
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
 ## Available Scripts
@@ -6,23 +8,23 @@ In the project directory, you can run:
 
 ### `yarn start`
 
-Runs the app in the development mode.<br />
+Runs the app in the development mode.\
 Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 
-The page will reload if you make edits.<br />
+The page will reload if you make edits.\
 You will also see any lint errors in the console.
 
 ### `yarn test`
 
-Launches the test runner in the interactive watch mode.<br />
+Launches the test runner in the interactive watch mode.\
 See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
 ### `yarn build`
 
-Builds the app for production to the `build` folder.<br />
+Builds the app for production to the `build` folder.\
 It correctly bundles React in production mode and optimizes the build for the best performance.
 
-The build is minified and the filenames include the hashes.<br />
+The build is minified and the filenames include the hashes.\
 Your app is ready to be deployed!
 
 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

demo/graph-tutorial/package-lock.json

@@ -3,28 +3,29 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@azure/msal-browser": "^2.1.0",
-    "@fortawesome/fontawesome-free": "^5.14.0",
-    "@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.18.0",
-    "@types/node": "^12.12.55",
-    "@types/react": "^16.9.49",
-    "@types/react-dom": "^16.9.0",
-    "@types/react-router-dom": "^5.1.5",
-    "@types/reactstrap": "^8.5.1",
-    "bootstrap": "^4.5.2",
-    "moment": "^2.27.0",
-    "moment-timezone": "^0.5.31",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "@azure/msal-browser": "^2.10.0",
+    "@fortawesome/fontawesome-free": "^5.15.2",
+    "@microsoft/microsoft-graph-client": "^2.2.1",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "@types/jest": "^26.0.15",
+    "@types/microsoft-graph": "^1.28.0",
+    "@types/node": "^12.0.0",
+    "@types/react": "^16.9.53",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-router-dom": "^5.1.7",
+    "@types/reactstrap": "^8.7.2",
+    "bootstrap": "^4.6.0",
+    "moment": "^2.29.1",
+    "moment-timezone": "^0.5.32",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^3.4.3",
-    "reactstrap": "^8.5.1",
-    "typescript": "~3.7.2",
+    "react-scripts": "4.0.1",
+    "reactstrap": "^8.9.0",
+    "typescript": "^4.0.3",
+    "web-vitals": "^0.2.4",
     "windows-iana": "^4.2.1"
   },
   "scripts": {
@@ -34,7 +35,10 @@
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
-    "extends": "react-app"
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
   },
   "browserslist": {
     "production": [

demo/graph-tutorial/package.json

@@ -1,9 +1,9 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import App from './App';
 
 test('renders learn react link', () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();
 });

demo/graph-tutorial/public/favicon.ico

@@ -21,15 +21,15 @@ interface CalendarState {
 class Calendar extends React.Component<AuthComponentProps, CalendarState> {
   constructor(props: any) {
     super(props);
+
     this.state = {
       eventsLoaded: false,
       events: [],
       startOfWeek: undefined
     };
   }
 
-  async componentDidUpdate()
-  {
+  async componentDidUpdate() {
     if (this.props.user && !this.state.eventsLoaded)
     {
       try {

demo/graph-tutorial/src/App.test.tsx

@@ -4,7 +4,7 @@
 // <graphServiceSnippet1>
 import moment, { Moment } from 'moment';
 import { Event } from 'microsoft-graph';
-import { PageCollection, PageIterator } from '@microsoft/microsoft-graph-client';
+import { GraphRequestOptions, PageCollection, PageIterator } from '@microsoft/microsoft-graph-client';
 
 var graph = require('@microsoft/microsoft-graph-client');
 
@@ -48,22 +48,28 @@ export async function getUserWeekCalendar(accessToken: string, timeZone: string,
   // &$top=50
   var response: PageCollection = await client
     .api('/me/calendarview')
-    .header("Prefer", `outlook.timezone="${timeZone}"`)
+    .header('Prefer', `outlook.timezone="${timeZone}"`)
     .query({ startDateTime: startDateTime, endDateTime: endDateTime })
     .select('subject,organizer,start,end')
     .orderby('start/dateTime')
-    .top(50)
+    .top(25)
     .get();
 
   if (response["@odata.nextLink"]) {
     // Presence of the nextLink property indicates more results are available
     // Use a page iterator to get all results
     var events: Event[] = [];
 
+    // Must include the time zone header in page
+    // requests too
+    var options: GraphRequestOptions = {
+      headers: { 'Prefer': `outlook.timezone="${timeZone}"` }
+    };
+
     var pageIterator = new PageIterator(client, response, (event) => {
       events.push(event);
       return true;
-    });
+    }, options);
 
     await pageIterator.iterate();
 
@@ -72,7 +78,6 @@ export async function getUserWeekCalendar(accessToken: string, timeZone: string,
 
     return response.value;
   }
-
 }
 // </getUserWeekCalendarSnippet>
 

demo/graph-tutorial/src/Calendar.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
-import * as serviceWorker from './serviceWorker';
+import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
   <React.StrictMode>
@@ -11,7 +11,7 @@ ReactDOM.render(
   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.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

demo/graph-tutorial/src/GraphService.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;